javascript
JavaScript 学习笔记 ——document
1. 瀏覽器環(huán)境
JavaScript 語言最初是為 Web 瀏覽器創(chuàng)建的。此后，它已經(jīng)發(fā)展成為一種具有多種用途和平臺的語言。
下面是 JavaScript 在瀏覽器中運(yùn)行時(shí)的鳥瞰示意圖：
windows 是根對象，它充當(dāng) JavaScript 的全局對象以及代表著瀏覽器窗口，提供控制瀏覽器窗口的方法。
1.1 DOM 文檔對象模型
DOM 將所有頁面內(nèi)容表示為可以修改的對象，document 是頁面的入口，可以利用它修改創(chuàng)建 HTML 的內(nèi)容，可以參考 DOM：
document.bodyDOM.style.background = "pink"; let timer = setTimeout(() => {document.body.style.background = "orange"; }, 5000);1.2 BOM 瀏覽器對象模型
BOM表示由瀏覽器提供的用于處理 document 之外的所有內(nèi)容的其他對象，如 navigator 和 location。利用 location 可以讀取當(dāng)前 URL 和 重定向到新的 URL：
console.log(location.href); if (confirm("go to baidu.com")) {location.href = "https://git-jhy.github.io"; }此外，常用的 alert、confirm 和 prompt 都是 BOM 的一部分。
2. DOM 樹
2.1 DOM 樹
看一個(gè)簡單的 DOM 例子：
<!DOCTYPE HTML> <html> <head><title>document</title> </head> <body>This is text. </body> </html>-
html 是根節(jié)點(diǎn)，head 和 body 是它的字節(jié)點(diǎn)；
-
元素內(nèi)的文本形成 文本節(jié)點(diǎn)，被標(biāo)記為 #text，如 title 中的 “document”，包括換行、縮進(jìn)和空格。
-
若瀏覽器遇到不正確的 HTML，會在形成 DOM 時(shí)自動更正。
上面的 HTML 的 DOM 標(biāo)簽樹形結(jié)構(gòu)如下，可以在這個(gè)網(wǎng)站上查看 DOM 樹結(jié)構(gòu) Clck me：
一共有 12 種節(jié)點(diǎn)類型。實(shí)際上，我們通常用到的是其中的 4 種：
2.2 遍歷 DOM
頂層
html = document.documentElement body = document.body head = document.head注意：若腳本放在 <head>，則腳本訪問不到 docment.body 元素，因?yàn)闉g覽器還未讀到它。
子節(jié)點(diǎn)
使用 childNodes、firstChild 和 lastChild訪問子節(jié)點(diǎn)，如訪問 body 中的所有子元素：
<!DOCTYPE html> <html lang="en"><head><title>Document</title> </head><body><li>a</li><li>b</li> </body><script>for (let i = 0; i < document.body.childNodes.length; i++) {console.log(document.body.childNodes[i]);} </script></html>結(jié)果為：text、li、text、p、text、script、text、script
注意：顯示的節(jié)點(diǎn)只包含 script 之前的所有 body 子節(jié)點(diǎn)。
DOM 集合
DOM 集合是可迭代對象，可以使用 for...of 迭代它，若要使用數(shù)組方法，則需要通過Array.from 將集合轉(zhuǎn)化為數(shù)組：
console.log(Array.from(document.body.childNodes).filter);注意
兄弟節(jié)點(diǎn)和父節(jié)點(diǎn)
// <body> 的父節(jié)點(diǎn)是 <html> alert(document.body.parentNode === document.documentElenent); // true// <head> 的下一個(gè)兄弟節(jié)點(diǎn) alert(document.head.nextSibing); // body// <body> 的前一個(gè)兄弟節(jié)點(diǎn) alert(document.body.previousSibling); // HTMLHeadElement2.3 純元素導(dǎo)航
一般不希望得到文本節(jié)點(diǎn)和注釋節(jié)點(diǎn)，只讀取元素節(jié)點(diǎn)：
children // 子元素 firstElementChild // 第一個(gè)子元素 previousElementSibling // 前一個(gè)兄弟元素 parentElement // 父元素document.documentElement的父節(jié)點(diǎn)為 document，但父元素節(jié)點(diǎn)為 null。
若要從任意節(jié)點(diǎn)到達(dá) <html> 元素節(jié)點(diǎn)：
let elem = document.getElementById("a"); while (elem = elem.parentElement) {console.log(elem); }遍歷元素：
for (let elem of document.body.children) {console.log(elem); }應(yīng)用例子
<html> <body><div>Users:</div><ul><li>John</li><li>Pete</li></ul> </body> </html>3. 搜索元素
getElementById
通過 document.getElementById('id') 方法可以獲取具有 id 屬性的元素，如：
<div id="elem"><p id="text">text</p> </div><script>let elem = document.getElementById('text');elem.style.color = 'orange'; </script>補(bǔ)充：實(shí)際上直接使用 id 作為變量名也可以實(shí)現(xiàn)，但不建議！
querySelectorAll
最常用的方法是：elem.querySelectorALL(css)，css 是一個(gè) css 選擇器：
<body><div><ol><li>a</li><li>b</li></ol><p>b</p></div> </body><script>let element = document.querySelectorAll('ol > li:last-child');element[0].style.color = 'red'; </script>querySelector
elem.querySelector(css)也很常用，返回第一個(gè)與給定的 CSS 選擇器匹配的元素。它等價(jià)于 elem.querySelectorAll(css)[0]
matches
使用 elem.matches(css) 可以檢查 elem 是否與給定的 CSS 匹配，返回 true 或 false。
在遍歷是可以利用 matches來進(jìn)一步篩選元素：
<body><ol><li id="a.cn">a</li><li id="b.com">b</li><li id="c.org">c</li><li id="d.com">d</li></ol> </body><script>let element = document.querySelectorAll('ol > li');for (let elem of element) {// 匹配 id 屬性以 com 結(jié)尾的 li 標(biāo)簽if (elem.matches('li[id$="com"]')) {console.log(elem);}} </script>getElementsBy*
有以下三種方法：
注意：
3.1 實(shí)時(shí)性
看一個(gè)小例子：
<div>first</div><script>let divs = document.getElementsByTagName('div');console.log(divs.length); // 1 </script><div>second</div><script>console.log(divs.length); // 2 </script>從上面的例子可以看到：getElementsByTagName 是動態(tài)實(shí)時(shí)的；querySelector、querySelectorAll 和 getElementById是靜態(tài)的。
應(yīng)用例子
// 篩選 name="search" 的表單 document.querySelectorAll('form[name="search"]');// 篩選 id 以 com 結(jié)尾的 a 標(biāo)簽 document.querySelectorAll('a[id$="com"]');4. 節(jié)點(diǎn)屬性
4.1 DOM 節(jié)點(diǎn)類
nodeName、tagName 和 nodeType
4.2 innerHTML
innerHTML 屬性可以將元素內(nèi)的 HTML 獲取為字符串的形式（不包含外面的標(biāo)簽，但包括換行），也可以設(shè)置內(nèi)容：
<body><div id="text">Hello<b>World</b></div></body><script>elem = document.getElementById('text');console.log(elem.innerHTML); </script>注意
下面的語句是對 HTML 的重寫（移除舊的內(nèi)容寫入新的內(nèi)容），兩個(gè)語句等價(jià)：
elem.innerHTML += "..."; elem.innerHTML = elem.innerHTML + "...";4.3 outerHTML
outerHTML可以獲取完整的 HTML （包含外面的標(biāo)簽）：
<body><div id="text">Hello<b>World</b></div></body><script>elem = document.getElementById('text');console.log(elem.outerHTML); </script>4.4 textContent
textContent 可以獲取純文本：
<div id="news"><h1>Headline!</h1><p>Martians attack people!</p> </div><script>// Headline! Martians attack people!alert(news.textContent); </script>假設(shè)有一個(gè)用戶輸入的字符串，我們希望將其顯示出來。
- 使用 innerHTML，我們將其“作為 HTML”插入，帶有所有 HTML 標(biāo)簽。
- 使用 textContent，我們將其“作為文本”插入，所有符號（symbol）均按字面意義處理。
在大多數(shù)情況下，我們期望來自用戶的文本，并希望將其視為文本對待。我們不希望在我們的網(wǎng)站中出現(xiàn)意料不到的 HTML。
4.5 hidden
hidden 屬性可以設(shè)置元素是否隱藏，下面的代碼使用定時(shí)函數(shù)設(shè)置了標(biāo)簽是否可見，實(shí)現(xiàn)閃爍的效果：
<body><div id="blink">I'm blinking</div> </body><script>let timer = setInterval(() => {let elem = document.querySelector('#blink');elem.hidden = !elem.hidden;}, 1000); </script>其他屬性
此時(shí)點(diǎn)擊提交按鈕可以顯示出框內(nèi)的文字內(nèi)容（value）
5. 修改文檔
DOM 修改是創(chuàng)建“實(shí)時(shí)”頁面的關(guān)鍵。
5.1 創(chuàng)建元素
document.createELement(tag) —— 創(chuàng)建元素節(jié)點(diǎn)；
document.createTextNode(text) —— 創(chuàng)建文本節(jié)點(diǎn)；
let div = document.createElement('div'); let textNOde = document.createTextNode('text');舉個(gè)栗子
創(chuàng)建一個(gè) div 標(biāo)簽：
let div = document.createElement('div'); div.id = 'alert'; div.innerHTML = '<strong>Hello</strong> guys!';此時(shí)元素不能在瀏覽器中顯示出來，需要插入。
5.2 插入方法
有以下常用方法：
如在 ol 標(biāo)簽插入：
將上面的 div 標(biāo)簽插入到 document.body：
document.body.append(div);5.3 節(jié)點(diǎn)移除
使用 node.remove() 移除節(jié)點(diǎn)：
下面的代碼在 ol 的尾部追加了一個(gè) li 標(biāo)簽，1s 后再刪除 li 標(biāo)簽：
<body><ol><li>a</li><li>b</li><li>c</li></ol> </body><script>let li = document.createElement('li');li.innerHTML = 'd';document.getElementsByTagName('ol')[0].append(li);let timer = setTimeout(() => li.remove(), 1000); </script>5.4 克隆節(jié)點(diǎn)
使用 elem.cloneNode(true) 創(chuàng)建元素的一個(gè) “深” 克隆（復(fù)制所有特性和子元素）；
使用 elem.cloneNode(false) 創(chuàng)建元素的一個(gè) “深” 克隆；
let div = document.getElementsByName('div')[0]; let div2 = div.cloneNode(true); // 克隆消息6. 樣式和類
可以用 javascript 設(shè)置 style 屬性：
let circle = document.querySelector('#circle'); let le = 0; let timer = setInterval(() => {le += 1;circle.style.left = le + 'px';if (circle.style.left == '650px') {clearInterval(timer);} }, 5);上面的 HTML 可以讓綠色的圓勻速滾動，通過設(shè)置 elem.stle.xx 設(shè)置樣式元素的屬性。
可以查看 style：
console.log(document.body.style);6.1 classList & className
使用 className 可以查看標(biāo)簽的所有類名；
使用 classList 可以增加 / 刪除標(biāo)簽類名；
舉個(gè)栗子：
<body><div class="class1 class2"></div> </body><script>let div = document.querySelector('div');// 兩個(gè)類： class1 class2console.log(div.className);div.classList.add('class3');// 三個(gè)類： class1 class2 class3console.log(div.className); </script>classList 常用方法：
6.2 應(yīng)用例子
創(chuàng)建一個(gè) div ，添加內(nèi)容為 Hello，設(shè)置顏色為紅色，背景為粉色：
let div = document.createElement('div'); div.innerHTML = 'Hello'; document.body.append(div); div.style.color = 'red'; div.style.backgroundColor = 'pink';總結(jié)
以上是生活随笔為你收集整理的JavaScript 学习笔记 ——document的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript document对
- 下一篇： TXT生成PCD文件