JavaScript DOM元素常見操作詳解【添加、刪除、修改等】

更新時(shí)間：2018年05月09日 11:14:12 作者：LDH-

這篇文章主要介紹了JavaScript DOM元素常見操作,包括針對(duì)dom元素的添加、刪除、修改等相關(guān)操作實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了JavaScript DOM元素常見操作。分享給大家供大家參考，具體如下：

DOM概念

DOM（Document Object Model）：文檔對(duì)象模型。

通過開發(fā)者工具的Elements標(biāo)簽頁可以查看

通過開發(fā)者工具的Sources標(biāo)簽頁也可以觀察到整個(gè)文檔是有一系列節(jié)點(diǎn)

整個(gè)文檔是由一系列節(jié)點(diǎn)對(duì)象組成的一棵樹。

節(jié)點(diǎn)（Node）包括元素節(jié)點(diǎn)（1）、屬性節(jié)點(diǎn)（2）、文本節(jié)點(diǎn)（3）(1..2..3..代表節(jié)點(diǎn)類型)_

var th1= document.getElementById("th1");
alert(th1.nodeType);
alert(th1.nodeName);
alert(th1.nodeValue);

th1代表一個(gè)元素節(jié)點(diǎn)（nodeType=1），nodeName就是標(biāo)簽名（th），元素節(jié)點(diǎn)的nodeValue=null。

var attr1=th1.getAttributeNode("name");
alert(attr1.nodeType);
alert(attr1.nodeName);
alert(attr1.nodeValue);

getAttributeNode方法是獲取元素的屬性節(jié)點(diǎn)，此時(shí)輸出的節(jié)點(diǎn)類型為屬性節(jié)點(diǎn)（2），節(jié)點(diǎn)名稱就是屬性名（name），節(jié)點(diǎn)值就是屬性值（sex）

var txtl = th1.firstChild；
alert(txtl.nodeType);
alert(txtl.nodeName);
alert(txtl.nodeValue)

txt1是一個(gè)文本節(jié)點(diǎn)（3），節(jié)點(diǎn)名稱固定就是#text，節(jié)點(diǎn)值就是文本內(nèi)容。

獲取元素

（1）getElementByid

根據(jù)元素的id屬性來獲取元素，獲取到的是一個(gè)元素。

（2）getElementsByTagName

根據(jù)標(biāo)簽名來獲取元素，結(jié)果是一個(gè)元素集合。

（3）getElementsByClassName

根據(jù)class屬性來獲取元素，結(jié)果是一個(gè)元素集合。

（4）getElementsByName

根據(jù)name屬性來獲取元素，結(jié)果是一個(gè)元素集合。

總結(jié)：獲取元素可以根據(jù)標(biāo)簽名獲取、也可以根據(jù)id、name、class屬性來獲取。根據(jù)id屬性獲取的結(jié)果是一個(gè)元素，而其它的獲取的是一個(gè)集合。

document對(duì)象支持以上四種，而element對(duì)象僅支持getElementsByTagName和getElementsByClassName。

修改元素

（1）修改內(nèi)容

function fun(){
  //獲取到指定元素
  var p1 = document.getElementById("p1");
  p1.innerText = "我被單擊了！";
}

通過.innerText屬性可讀取或設(shè)置標(biāo)簽的內(nèi)容文本

function fun(){
  //獲取到指定元素
  var p1 = document.getElementById("p1");
  p1.innerHTML = "我被單擊了！<br>換行了";
}

也可以通過innerHTML屬性獲取或設(shè)置內(nèi)容文本

倆者的區(qū)別：innerHTML會(huì)按照HTML規(guī)則解析文本，而innerText只是當(dāng)做普通文本內(nèi)容。

（1）修改樣式

A．xxx．style.屬性名=“值”

B．xxx．classname=“…”(相當(dāng)于修改了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">修改樣式測(cè)試</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建一個(gè)元素節(jié)點(diǎn)

CreateElement("p")創(chuàng)建一個(gè)段落

（2）createTextNode創(chuàng)建一個(gè)文本節(jié)點(diǎn)

createTextNode("文本內(nèi)容")，創(chuàng)建一個(gè)值為“文本內(nèi)容”的文本節(jié)點(diǎn).

（3）appendChild添加子節(jié)點(diǎn)

（4）removeChild 刪除子節(jié)點(diǎn)

動(dòng)態(tài)添加

<body>
<div id="div1">
</div>
<input type="button"value="添加段落"onclick="add()">
</body>
<script>
//全局變量
  var index = 1;
  function add(){
    //創(chuàng)建一個(gè)段落標(biāo)簽
    var p = document.createElement("p");
    //創(chuàng)建文本節(jié)點(diǎn)
    var content= "第"+index+"段落";
    var txt = document.createTextNode(content);
    //創(chuàng)建文本節(jié)點(diǎn)添加的段落
    p.appendChild(txt);
    //將段落添加到div中
    var div1 = document.getElementById("div1");
    div1.appendChild(p);
    index++
  }
</script>

動(dòng)態(tài)刪除

<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(){
    //先找到父節(jié)點(diǎn)
    var div1 = document.getElementById("div1");
    //再找到要?jiǎng)h除的節(jié)點(diǎn)
    var p2 = document.getElementById("p2");
    //將要?jiǎng)h除的節(jié)點(diǎn)從父節(jié)點(diǎn)中移除
    div1.removeChild(p2);
  }
</script>
</html>

這種方法是分別找到父節(jié)點(diǎn)和要?jiǎng)h除的節(jié)點(diǎn)，然后執(zhí)行刪除操作。該方法的一個(gè)前提是知道父節(jié)點(diǎn)是誰

那么如果并不知道父節(jié)點(diǎn)是誰，該如何刪除呢

p2.parentNode.removeChild(p2);

這個(gè)方法并不需要父節(jié)點(diǎn)是誰

動(dòng)態(tài)的添加和刪除：

動(dòng)態(tài)添加和動(dòng)態(tài)刪除，刪除動(dòng)態(tài)添加的奇數(shù)段落

思路1：獲取div1 下的所以段落，遍歷所以的段落，將序號(hào)為奇數(shù)的段落刪除。

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]);
    }
  }
}

這種在初始時(shí)是可以的,但是隨著動(dòng)態(tài)添加或刪除的進(jìn)行，后面的結(jié)果就不對(duì)了。因?yàn)閯?dòng)態(tài)刪除操作就影響了原來的順序，而程序是按照序號(hào)去判斷奇偶性，所以出現(xiàn)誤判

思路2：添加通過設(shè)置class屬性，然后通過getElementsByclassName來獲取奇數(shù)行

（也可以從后往前刪）

<body>
<div id="div1">
</div>
<input type="button" value="添加段落" onclick="add()">
<input type="button" value="刪除奇數(shù)第二段" onclick="de1()">
</body>
<script>
  var index = 1;
  function add(){
    //創(chuàng)建一個(gè)段落標(biāo)簽
    var p = document.createElement("p");
    //創(chuàng)建文本節(jié)點(diǎn)
    var content = "第" + index + "段落";
    var txt = document.createTextNode(content);
    //將文本節(jié)點(diǎn)添加到段落
    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>

導(dǎo)航

Document：是根節(jié)點(diǎn)

ParentNode：獲取父節(jié)點(diǎn)

childNodes：獲取所有子節(jié)點(diǎn)

firstChild：第一個(gè)子節(jié)點(diǎn)

lastChlid：獲取最后一個(gè)子節(jié)點(diǎn)

</head>
<body>
<div name="第一章">
   <p id="p1">第一段<span>第一句</span><span>第二句</span></p>
</div>
<input type="button"value="獲取父節(jié)點(diǎn)的name屬性"onclick="fun1()">
<input type="button"value="顯示p1子節(jié)點(diǎn)的個(gè)數(shù)"onclick="fun2()">
<input type="button"value="顯示p1第一個(gè)子節(jié)點(diǎn)的類型"onclick="fun3()">
<input type="button"value="顯示p1最后一個(gè)子節(jié)點(diǎn)的類型"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>

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: