當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript 教程「9」：DOM 元素获取、属性修改

發布時間：2023/12/8 javascript 54 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript 教程「9」：DOM 元素获取、属性修改小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

什么是 Web API

Web API 是指網頁服務器或者網頁瀏覽器的應用程序接口。簡單來講，就是我們在編寫 JavaScript 代碼時，可以通過 Web API 來操作 HTML 網頁和瀏覽器。

Web API 又可以分為兩類：

DOM（文檔對象模型）
BOM（瀏覽器對象模型）

DOM（Document Object Model），即文檔對象模型，主要用來呈現以及與 HTML 或 XML 文檔交互的 API。說白了就是用來操作網頁內容，實現各種特效，讓用戶用起來更順手。

再來看看 DOM 樹的概念，DOM 樹又叫文檔樹，指的是將 HTML 文檔以樹狀結構直觀呈現出來，從而將 HTML 中標簽與標簽之間的關系直觀體現出來。

我們都知道 HTML 頁面中包含了許多標簽，而 DOM 對象就是瀏覽器根據這些標簽所生成的 JavaScript 對象。通過這個對象，我們就可以找到標簽的各種屬性，而通過修改這個對象的屬性的結果也會映射到 HTML 頁面中標簽中。也就是說，通過修改 JavaScript 中的對象屬性，我們就能夠改變對象對應 HTML 中的標簽屬性。

<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>DOM</title></head><body><button>點擊</button><script>// 獲取 JavaScript 對象let btn = document.querySelector('button');// 打印所有屬性console.dir(btn);// 修改對象屬性btn.innerText = '村雨遙';</script></body> </html>

可以看到原本 button 標簽的屬性 innerText 從原先的點擊變成了村雨遙，說明通過修改 JavaScript 對象屬性從而改變 HTML 中標簽屬性的目的達到了。

DOM 對象獲取

匹配的首個元素
上一小節實例中我們其實已經獲取過相關 DOM 對象了，也就是以下這一句：

let btn = document.querySelector('button');

這其實是通過 CSS 選擇器來獲取的我們網頁中的標簽，通過以下語法，我們將會從網頁中選擇到匹配的第一個元素。

document.querySelector('CSS 選擇器');

其中的參數包含了一個或多個有效的 CSS 選擇器字符串，然后返回的結果就是匹配到的 CSS 選擇器中的第一個元素，是一個 HTMLElement 元素。當然，如果沒有匹配到任何元素，則返回 null。

以下是一個獲取 DOM 對象的實例。

匹配的多個元素

之前我們已經學習了如何獲取匹配的首個元素，但是在日常開發中，我們常常需要獲取匹配到的多個元素，此時我們就可以使用如下語法來獲取匹配的多個元素。

document.querySelectorAll('CSS 選擇器'); <!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>DOM 元素獲取</title></head><body><div>DOM 元素獲取1</div><div>DOM 元素獲取2</div><script>// 獲取 js 元素let div = document.querySelectorAll('div');console.log(div);</script></body></html>

除開上述兩種獲取 DOM 對象之外，還提供了一些用于獲取 DOM 元素的方法。最常見的幾種總結如下：

根據 id 獲取一個元素

document.getElementById('id 元素名');

根據標簽獲取頁面中的一類元素

document.getElementsByTagName('標簽名');

根據類名獲取頁面中的元素

document.getElementsByClassName('類名')

以下是一個分別利用上述方法來獲取頁面中 DOM 元素的實例。

<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>DOM 元素獲取</title></head><body><div id="id1">DOM 元素獲取1</div><div id="id2">DOM 元素獲取2</div><div class="class1">DOM 元素獲取3</div><div class="class1">DOM 元素獲取4</div><script>// 獲取 js 元素let divs = document.getElementsByTagName('div');console.log(divs);let id1 = document.getElementById('id1');console.log(id1);let id2 = document.getElementById('id2');console.log(id2);let classes = document.getElementsByClassName('class1');console.log(classes);</script></body></html>

DOM 元素內容

既然已經學會了如何獲取 DOM 元素，接下來就是看看如何修改元素中的內容。

這里 Web API 主要提供了三種方式，分別是：

document.write()
innerText 屬性
innerHTML 屬性

doucument.write()

該方法只能將文本內容追加到 </body> 標簽前面的位置，而且文本內容中所包含的標簽也同樣會被解析。

<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>DOM 元素內容</title></head><body><script>document.write('公眾號：村雨遙！</br>');document.write("<font color='red'>wePublic: cunyu1943</font>");</script></body> </html>

innerText 屬性

通過該屬性，可以將文本內容添加或者更新到任意標簽的位置，而且文本中的標簽也不會被解析。

<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>DOM 元素內容</title></head><body><div>測試</div><script>let div = document.querySelector('div');div.innerText = 'Hello World!';div.innerText = '<h1>一級標題</h1>';</script></body> </html>

innerHTML 屬性

除了 innerText 屬性之外，也可以是使用 innerHTML 屬性來對文本內容進行添加或者更新，但不同于 innerText 的是，innerHTML 會將文本內容中中的標簽也進行解析。

<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>DOM 元素內容</title></head><body><div>測試</div><script>let div = document.querySelector('div');div.innerHTML = 'Java Park!';div.innerHTML = '<a href="https://cunyu1943.github.io/JavaPark">JavaPark</a>';</script></body> </html>

修改元素樣式屬性

出了修改文本內容，我們還可以實現對元素樣式的控制，主要可以通過以下三種方式：

通過 style 屬性操作 CSS
通過類名 className 操作 CSS
通過 classList 操作類控制 CSS

通過 style 屬性操作 CSS

語法結構如下：

對象.style.樣式屬性 = 樣式屬性值; <!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>屬性修改</title><style>div {background-color: black;width: 6.25rem;height: 12.5rem;}</style></head><body><div></div><script>let div = document.querySelector('div');div.style.backgroundColor = 'green';</script></body> </html>

通過類名 className 操作 CSS

當設計修改的樣式較多時，如果直接通過 style 屬性修改比較麻煩，此時就可以通過操作 CSS 類名的方式來進行批量修改，其語法結構如下：

元素.className = '類名'; <!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>屬性修改</title><style>div {background-color: black;width: 6.25rem;height: 12.5rem;}.demo {background-color: greenyellow;width: 25rem;height: 31.25rem;}</style></head><body><div class="demo"></div><script>let div = document.querySelector('div');div.className = 'demo';</script></body> </html>

使用類名來操作 CSS 時，需要注意一下，如果原先的元素中已經有了 CSS 類，那么此時新增的 CSS 類將覆蓋之前 CSS 類。

通過 classList 來操作 CSS

針對通過類名 className 操作 CSS 會覆蓋以前類名的問題，JavaScript 中又提供了 classList 的方式來追加和刪除類名。

方法說明

add('類名')	追加一個類
remove('類名')	刪除一個類
toggle('類名')	切換一個類

<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>屬性修改</title><style>div {background-color: black;width: 6.25rem;height: 12.5rem;}.demo1 {background-color: greenyellow;width: 10rem;height: 15rem;}.demo2 {background-color: aquamarine;width: 9.375rem;height: 12.5rem;}</style></head><body><div class="demo"></div><script>let div = document.querySelector('div');div.classList.add('demo1');div.classList.toggle('demo2');div.classList.remove('demo2');</script></body> </html>

總結

本文首先講了什么是 Web API，然后根據 Web API 所提供的各種方法，從頁面中獲取 DOM 對象，并對 DOM 對象中的元素內容進行設置和修改。

主要內容集中在常用的 DOM 對象獲取方法 querySelector()、querySelectorAll()，以及 DOM 元素內容 3 種修改方式 document.write()、innerText、innerHTML ，最后介紹了如何對 DOM 元素的樣式修改，實現樣式的增加、轉換和刪除。

總結

以上是生活随笔為你收集整理的JavaScript 教程「9」：DOM 元素获取、属性修改的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：关闭hadoop安全模式
下一篇： JavaScript中的jQuery