本文實例講述了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>添加刪除元素
（1）CreateElement建一個元素節點
CreateElement("p")創建一個段落
（2）createTextNode創建一個文本節點
createTextNode("文本內容")，創建一個值為“文本內容”的文本節點.
（3）appendChild添加子節點
（4）removeChild 刪除子節點
動態添加
<body><div id="div1"></div><input type="button"value="添加段落"onclick="add()"></body><script>//全局變量 var index = 1; function add(){ //創建一個段落標簽 var p = document.createElement("p"); //創建文本節點 var content= "第"+index+"段落"; var txt = document.createTextNode(content); //創建文本節點添加的段落 p.appendChild(txt); //將段落添加到div中 var div1 = document.getElementById("div1"); div1.appendChild(p); index++ }</script>動態刪除
<body><div id="div1"> <p id="p1">第1段落 </p> <p id="p2">第2段落 </p> <p id="p3">第3段落 </p> <p id="p4">第4段落 </p></div><input type="button"value="刪除第二段"onclick="del()"></body><script> function del(){ //先找到父節點 var div1 = document.getElementById("div1"); //再找到要刪除的節點 var p2 = document.getElementById("p2"); //將要刪除的節點從父節點中移除 div1.removeChild(p2); }</script></html>這種方法是分別找到父節點和要刪除的節點，然后執行刪除操作。該方法的一個前提是知道父節點是誰
那么如果并不知道父節點是誰，該如何刪除呢
p2.parentNode.removeChild(p2);
這個方法并不需要父節點是誰
動態的添加和刪除：
動態添加和動態刪除，刪除動態添加的奇數段落
思路1：獲取div1 下的所以段落，遍歷所以的段落，將序號為奇數的段落刪除。
function del(){ var div1 = document.getElementById("div1"); var paras = div1.getElementsByTagName("p"); for(var i in paras){ if((i+1)%2 == 1){ div1.removeChild(paras[i]); } }}這種在初始時是可以的,但是隨著動態添加或刪除的進行，后面的結果就不對了。因為動態刪除操作就影響了原來的順序，而程序是按照序號去判斷奇偶性，所以出現誤判
思路2：添加通過設置class屬性，然后通過getElementsByclassName來獲取奇數行
（也可以從后往前刪）
<body><div id="div1"></div><input type="button" value="添加段落" onclick="add()"><input type="button" value="刪除奇數第二段" onclick="de1()"></body><script> var index = 1; function add(){ //創建一個段落標簽 var p = document.createElement("p"); //創建文本節點 var content = "第" + index + "段落"; var txt = document.createTextNode(content); //將文本節點添加到段落 p.appendChild(txt); if (index % 2 == 1) { p.setAttribute("class","odd"); } //將段落添加到div中 var div1 = document.getElementById("div1"); div1.appendChild(p); index++; } /*function de1(){ var div1 = document.getElementById("div1"); var paras =div1.getElementsByTagName("p"); for(var i in paras){ if((i+1)%2 == 1){ div1.removeChild(paras[i]); } } }*/ functionde1() { var div1 = document.getElementById("div1"); var paras = div1.getElementsByClassName("odd");// varparas = document.getElementsByName("odd"); for (var i = paras.length - 1; i >= 0; i--) { div1.removeChild(paras[i]); } }</script></html>導航
Document：是根節點
ParentNode：獲取父節點
childNodes：獲取所有子節點
firstChild：第一個子節點
lastChlid：獲取最后一個子節點
</head><body><div name="第一章"> <p id="p1">第一段<span>第一句</span><span>第二句</span></p></div><input type="button"value="獲取父節點的name屬性"onclick="fun1()"><input type="button"value="顯示p1子節點的個數"onclick="fun2()"><input type="button"value="顯示p1第一個子節點的類型"onclick="fun3()"><input type="button"value="顯示p1最后一個子節點的類型"onclick="fun4()"></body><script>var p1 =document.getElementById("p1");function fun1(){ var value=p1.parentNode.getAttribute("name"); alert(value);}function fun2(){ var chlids = p1.childNodes; alert(chlids.length)}function fun3(){ alert(p1.firstChild.nodeType);}function fun4(){ alert(p1.lastChild.nodeType);}</script></html>更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
