javascript
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 對象了，也就是以下這一句：
這其實是通過 CSS 選擇器來獲取的我們網頁中的標簽，通過以下語法，我們將會從網頁中選擇到匹配的第一個元素。
document.querySelector('CSS 選擇器');其中的參數包含了一個或多個有效的 CSS 選擇器字符串，然后返回的結果就是匹配到的 CSS 選擇器中的第一個元素，是一個 HTMLElement 元素。當然，如果沒有匹配到任何元素，則返回 null。
以下是一個獲取 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>DOM 元素獲取</div><script>// 獲取 js 元素let div = document.querySelector('div');console.log(div);</script></body></html>之前我們已經學習了如何獲取匹配的首個元素，但是在日常開發中，我們常常需要獲取匹配到的多個元素，此時我們就可以使用如下語法來獲取匹配的多個元素。
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 獲取一個元素
- 根據標簽獲取頁面中的一類元素
- 根據類名獲取頁面中的元素
以下是一個分別利用上述方法來獲取頁面中 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.樣式屬性 = 樣式屬性值; <!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>當設計修改的樣式較多時，如果直接通過 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 類。
針對通過類名 className 操作 CSS 會覆蓋以前類名的問題，JavaScript 中又提供了 classList 的方式來追加和刪除類名。
| add('類名') | 追加一個類 |
| remove('類名') | 刪除一個類 |
| toggle('類名') | 切換一個類 |
總結
本文首先講了什么是 Web API，然后根據 Web API 所提供的各種方法，從頁面中獲取 DOM 對象，并對 DOM 對象中的元素內容進行設置和修改。
主要內容集中在常用的 DOM 對象獲取方法 querySelector()、querySelectorAll()，以及 DOM 元素內容 3 種修改方式 document.write()、innerText、innerHTML ，最后介紹了如何對 DOM 元素的樣式修改，實現樣式的增加、轉換和刪除。
總結
以上是生活随笔為你收集整理的JavaScript 教程「9」：DOM 元素获取、属性修改的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关闭hadoop安全模式
- 下一篇： JavaScript中的jQuery