這篇文章主要介紹JavaScript DOM元素常見操作的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
具體如下：
DOM概念
DOM（Document Object Model）：文檔對象模型。
通過開發者工具的Elements標簽頁可以查看
通過開發者工具的Sources標簽頁也可以觀察到整個文檔是有一系列節點
整個文檔是由一系列節點對象組成的一棵樹。
節點（Node）包括元素節點（1）、屬性節點（2）、文本節點（3）(1..2..3..代表節點類型)_
var th2= document.getElementById("th2");
alert(th2.nodeType);
alert(th2.nodeName);
alert(th2.nodeValue);th2代表一個元素節點（nodeType=1），nodeName就是標簽名（th），元素節點的nodeValue=null。
var attr1=th2.getAttributeNode("name");
alert(attr1.nodeType);
alert(attr1.nodeName);
alert(attr1.nodeValue);getAttributeNode方法是獲取元素的屬性節點，此時輸出的節點類型為屬性節點（2），節點名稱就是屬性名（name），節點值就是屬性值（sex）
var txtl = th2.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 DOM元素常見操作的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
