本文實例講述了JavaScript DOM元素常見操作。分享給大家供大家參考，具體如下：
DOM概念
DOM（Document Object Model）：文檔對象模型。
通過開發者工具的Elements標簽頁可以查看
通過開發者工具的Sources標簽頁也可以觀察到整個文檔是有一系列節點
整個文檔是由一系列節點對象組成的一棵樹。
節點（Node）包括元素節點（1）、屬性節點（2）、文本節點（3）(1..2..3..代表節點類型)_
var th1= document.getElementById("th1");alert(th1.nodeType);alert(th1.nodeName);alert(th1.nodeValue);th1代表一個元素節點（nodeType=1），nodeName就是標簽名（th），元素節點的nodeValue=null。
var attr1=th1.getAttributeNode("name");alert(attr1.nodeType);alert(attr1.nodeName);alert(attr1.nodeValue);getAttributeNode方法是獲取元素的屬性節點，此時輸出的節點類型為屬性節點（2），節點名稱就是屬性名（name），節點值就是屬性值（sex）
var txtl = th1.firstChild；alert(txtl.nodeType);alert(txtl.nodeName);alert(txtl.nodeValue)
txt1是一個文本節點（3），節點名稱固定就是#text，節點值就是文本內容。
獲取元素
（1）getElementByid
根據元素的id屬性來獲取元素，獲取到的是一個元素。
（2）getElementsByTagName
根據標簽名來獲取元素，結果是一個元素集合。
（3）getElementsByClassName
根據class屬性來獲取元素，結果是一個元素集合。
（4）getElementsByName
根據name屬性來獲取元素，結果是一個元素集合。
總結：獲取元素可以根據標簽名獲取、也可以根據id、name、class屬性來獲取。根據id屬性獲取的結果是一個元素，而其它的獲取的是一個集合。
document對象支持以上四種，而element對象僅支持getElementsByTagName和getElementsByClassName。
修改元素
（1）修改內容
function fun(){ //獲取到指定元素 var p1 = document.getElementById("p1"); p1.innerText = "我被單擊了！";}通過.innerText屬性可讀取或設置標簽的內容文本
function fun(){ //獲取到指定元素 var p1 = document.getElementById("p1"); p1.innerHTML = "我被單擊了！<br>換行了";}也可以通過innerHTML屬性獲取或設置內容文本
倆者的區別：innerHTML會按照HTML規則解析文本，而innerText只是當做普通文本內容。
（1） 修改樣式
A．xxx．style.屬性名=“值”
B．xxx．classname=“…”(相當于修改了class的屬性)
<style> .style1{ color:red; font-size:20px; text-decoration:underline; } .style2{ color:blue; font-size:32px; text-decoration:line-through; } </style></head><body><p id="p1">修改樣式測試</p><input type="button"value="樣式一"onclick="style1()"><input type="button"value="樣式二"onclick="style2()"></body><script> var p1 = document.getElementById("p1"); function style1(){ p1.className = "style1" } function style2(){ p1.className = "style2" }</script></html>
新聞熱點
疑難解答
圖片精選
