一文解讀JavaScript中的文檔對象（DOM）
點(diǎn)擊上方“IT共享之家”，進(jìn)行關(guān)注
回復(fù)“資料”可獲贈Python學(xué)習(xí)福利
仰天大笑出門去，我輩豈是蓬蒿人。
大家好，我是IT共享者，人稱皮皮。
前言
相信做網(wǎng)站對JavaScript再熟悉不過了，它是一門腳本語言，不同于Python的是，它是一門瀏覽器腳本語言，而Python則是服務(wù)器腳本語言，我們不光要會Python，還要會JavaScript，因?yàn)樗鼘ψ鼍W(wǎng)頁方面是有很大作用的。
1.文檔對象（DOM）
1).Document對象
這是我們用的最普遍的一個(gè)文檔對象了，專門用來操作DOM節(jié)點(diǎn)時(shí)用。
1)).獲取元素
document.getElementById() #通過id查找HTML元素document.getElementsByName() #通過name查找HTML元素document.getElementsByTagName() #通過標(biāo)簽名查找HTML元素document.getElementsByClassName() #通過類名查找HTML元素document.querySelector(".h") #第一個(gè)類名為 "h" 的元素document.querySelectorAll("div.no, div#h") #所有class為"no"或者id為"h"的div元素document.body #獲取body標(biāo)簽document.documentElement #獲取html標(biāo)簽
2)).獲取網(wǎng)頁內(nèi)容
document.cookie #網(wǎng)頁cookiedocument.domain #文檔的域名document.lastModified #文檔被最后修改的日期和時(shí)間document.referrer #載入當(dāng)前文檔的文檔的URLdocument.title #當(dāng)前文檔的標(biāo)題document.URL #當(dāng)前文檔的URLdocument.doctype #當(dāng)前文檔的doctypedocument.baseURI #當(dāng)前文檔的絕對URIdocument.documentMode #瀏覽器使用的模式document.documentURI #文檔的URIdocument.implementation #DOM實(shí)現(xiàn)document.inputEncoding #文檔的編碼（字符集）document.readyState #文檔的（加載）狀態(tài)document.strictErrorChecking #是否強(qiáng)制執(zhí)行錯(cuò)誤檢查
3)).文檔寫入
document.write('hello world') 向文檔寫入文本document.writeln('hello world') 向文檔寫入文本并換行
4)).獲取集合
document.all #所有html元素document.anchors #所有Anchor引用document.forms #所有的表單引用document.images #所有的圖片引用document.links #所有的超鏈接引用document.scripts #所有的腳本引用document.embeds #所有的流媒體引用
5)).獲取節(jié)點(diǎn)
childNodes #獲取子節(jié)點(diǎn)的集合 ，返回?cái)?shù)組 ，并把換行和空格也當(dāng)成是節(jié)點(diǎn)信息。children #獲取子節(jié)點(diǎn)的集合 ，返回?cái)?shù)組firstChild #獲取第一個(gè)子元素 并把換行和空格也當(dāng)成是節(jié)點(diǎn)信息firstElementChild #獲取第一個(gè)子節(jié)點(diǎn)lastChild #獲取最后一個(gè)子節(jié)點(diǎn) 并把換行和空格也當(dāng)成是節(jié)點(diǎn)信息lastElementChild #獲取最后一個(gè)子節(jié)點(diǎn)parentNode #獲取父節(jié)點(diǎn)parentElement #獲取父節(jié)點(diǎn)(IE)offsetParent #獲取所有父節(jié)點(diǎn) 對應(yīng)的值是body下的所有節(jié)點(diǎn)信息previousSibling #獲取上一個(gè)兄弟節(jié)點(diǎn) 匹配字符，包括換行和空格，而不是節(jié)點(diǎn)previousElementSibling #獲取上一個(gè)兄弟節(jié)點(diǎn) 直接匹配節(jié)點(diǎn)nextSibling #獲取下一個(gè)兄弟節(jié)點(diǎn) 匹配字符，包括換行和空格，而不是節(jié)點(diǎn)nextElementSibling #獲取下一個(gè)兄弟節(jié)點(diǎn) 直接匹配節(jié)點(diǎn)ownerDocument #元素的根節(jié)點(diǎn)
這里我們獲取到了所有的Div元素，我們可以針對性的獲取一個(gè)ID下的Div的子元素以及它的兄弟和父，子元素，如下：
6)).創(chuàng)建節(jié)點(diǎn)
我們可以自定義節(jié)點(diǎn)并添加值，不過要將它添加到文檔中去，所以必須添加節(jié)點(diǎn)，一般和下方的增加節(jié)點(diǎn)配套使用。
document.createElement(標(biāo)簽) #創(chuàng)建HTML元素document.createTextNode(文本) #給文檔添加文本document.createComment(文本) #創(chuàng)建一個(gè)注釋節(jié)點(diǎn)document.createDocumentFragment() #創(chuàng)建文檔粉碎節(jié)點(diǎn)
7)).增加節(jié)點(diǎn)
appendChild（節(jié)點(diǎn)） #節(jié)點(diǎn)被添加到元素的末尾insertBefore（a,b） #a節(jié)點(diǎn)會插入b節(jié)點(diǎn)的前面
8)).刪除節(jié)點(diǎn)
removeChild(節(jié)點(diǎn)名) #被移除的節(jié)點(diǎn)仍在文檔中，只是文檔中已沒有其位置了9)).替換節(jié)點(diǎn)
replaceChild(插入的節(jié)點(diǎn)，被替換的節(jié)點(diǎn))10)).復(fù)制節(jié)點(diǎn)
a.cloneChild() #復(fù)制a節(jié)點(diǎn),復(fù)制出來的節(jié)點(diǎn)作為返回值為true時(shí)，則a元素后代也一并復(fù)制。否則，僅復(fù)制a元素本身
11)).節(jié)點(diǎn)屬性
#節(jié)點(diǎn)類型 nodeType 有三種情況#1.元素節(jié)點(diǎn) 2.屬性節(jié)點(diǎn) 3.文本節(jié)點(diǎn)#節(jié)點(diǎn)名稱 nodeName#節(jié)點(diǎn)值 nodeValue#元素節(jié)點(diǎn)沒節(jié)點(diǎn)值，為null#文本節(jié)點(diǎn)的節(jié)點(diǎn)值就是文本#屬性節(jié)點(diǎn)的節(jié)點(diǎn)值就是該屬性值#節(jié)點(diǎn)屬性獲取a.widtha['width']a.gerAttribute(屬性名) 返回指定的屬性值a.gerAttributeNode(屬性名) 返回指定的屬性節(jié)點(diǎn)節(jié)點(diǎn)屬性設(shè)置a.width=400a['width']=400a.attributes['width']=400a.setAttribute('width',400) 添加指定的屬性a.setAttributeNode(b) 添加指定的屬性節(jié)點(diǎn)#節(jié)點(diǎn)屬性刪除a.removeChild(子節(jié)點(diǎn)) 從元素中移除子節(jié)點(diǎn)a.removeAttribute(屬性) 從元素中移除指定屬性a.removeAttributeNode(屬性) 移除指定的屬性節(jié)點(diǎn)，并返回被移除的節(jié)點(diǎn)a.id 獲取當(dāng)前元素的ida.className 獲取當(dāng)前元素的classa.classList 獲取當(dāng)前元素的class列表a.accessKey='w' 設(shè)置或返回元素的快捷鍵a.namespaceURI 返回指定節(jié)點(diǎn)的命名空間的 URIa.dir 設(shè)置或返回元素的內(nèi)容是否可編輯a.normalize() 合并元素中相鄰的文本節(jié)點(diǎn)，并移除空的文本節(jié)點(diǎn)a.tabIndex='3' 設(shè)置或返回元素的tab鍵控制次序a.tagName 返回元素的標(biāo)簽名a.textContent 設(shè)置或返回節(jié)點(diǎn)及其子代的文本內(nèi)容a.title 設(shè)置或返回元素的標(biāo)題屬性a.item(num) 返回節(jié)點(diǎn)列表中位于指定下標(biāo)的節(jié)點(diǎn)a.length 返回節(jié)點(diǎn)列表中的節(jié)點(diǎn)數(shù)
12)).獲取元素文本
a.innerHTML 獲取或者設(shè)置對象內(nèi)的HTMLa.innerText 獲取或者設(shè)置對象內(nèi)的文本a.outerHTML 獲取或者設(shè)置對象外的HTMLa.outerText 獲取或者設(shè)置對象外的文本a.value 獲取或者設(shè)置表單元素的值
總結(jié)
這篇文章主要介紹了JavaScript的文檔對象。下一篇文章，我們繼續(xù)介紹JavaScript，敬請期待！
看完本文有收獲？請轉(zhuǎn)發(fā)分享給更多的人
IT共享之家
入群請?jiān)谖⑿藕笈_回復(fù)【入群】
------------------- End -------------------
往期精彩文章推薦：
評論
圖片
表情