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

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

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

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

DOM概念

DOM（Document Object Model）：文檔對象模型。

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

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

整個文檔是由一系列節(jié)點對象組成的一棵樹。

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

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

th1代表一個元素節(jié)點（nodeType=1），nodeName就是標簽名（th），元素節(jié)點的nodeValue=null。

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

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

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

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

獲取元素

（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屬性獲取或設置內容文本

倆者的區(qū)別：innerHTML會按照HTML規(guī)則解析文本，而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建一個元素節(jié)點

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

（2）createTextNode創(chuàng)建一個文本節(jié)點

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

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

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

動態(tài)添加

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

動態(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é)點
    var div1 = document.getElementById("div1");
    //再找到要刪除的節(jié)點
    var p2 = document.getElementById("p2");
    //將要刪除的節(jié)點從父節(jié)點中移除
    div1.removeChild(p2);
  }
</script>
</html>

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

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

p2.parentNode.removeChild(p2);

這個方法并不需要父節(jié)點是誰

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

動態(tài)添加和動態(tài)刪除，刪除動態(tài)添加的奇數段落

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

這種在初始時是可以的,但是隨著動態(tài)添加或刪除的進行，后面的結果就不對了。因為動態(tà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(){
    //創(chuàng)建一個段落標簽
    var p = document.createElement("p");
    //創(chuàng)建文本節(jié)點
    var content = "第" + index + "段落";
    var txt = document.createTextNode(content);
    //將文本節(jié)點添加到段落
    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：是根節(jié)點

ParentNode：獲取父節(jié)點

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

firstChild：第一個子節(jié)點

lastChlid：獲取最后一個子節(jié)點

</head>
<body>
<div name="第一章">
   <p id="p1">第一段<span>第一句</span><span>第二句</span></p>
</div>
<input type="button"value="獲取父節(jié)點的name屬性"onclick="fun1()">
<input type="button"value="顯示p1子節(jié)點的個數"onclick="fun2()">
<input type="button"value="顯示p1第一個子節(jié)點的類型"onclick="fun3()">
<input type="button"value="顯示p1最后一個子節(jié)點的類型"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程序設計有所幫助。

您可能感興趣的文章:

js 調用百度地圖api并在地圖上進行打點添加標注
上邊有一個標題，下邊分成兩塊，左邊是地圖。并且地圖上有兩個點，點擊兩個點有相應的提示信息，具體實現如下
2014-05-05
關于JavaScript中URL對象的一些妙用
avaScript URL() 構造函數返回一個新創(chuàng)建的 URL 對象,表示由一組參數定義的 URL,利用該構造函數可以獲取 RL的查詢、參數等,下面這篇文章主要給大家介紹了關于JavaScript URL對象的一些妙用,需要的朋友可以參考下
2021-10-10
獲取當前月（季度/年）的最后一天（set相關操作及應用）
本文主要介紹了setset相關操作及應用，通過獲取當前月（季度/年）的最后一天具體事例來解析說明，具有一定的參考價值，下面跟著小編一起來看下吧
2016-12-12
CocosCreator實現技能冷卻效果
這篇文章主要介紹了CocosCreator實現技能冷卻效果，同學們可以跟著教程，親手試一下，代碼都是可以復用的
2021-04-04
Window.Open打開窗體和if嵌套代碼
這篇文章主要介紹了Window.Open打開窗體和if嵌套代碼的相關資料,需要的朋友可以參考下
2016-04-04
最好用的Bootstrap fileinput.js文件上傳組件
這篇文章主要為大家詳細介紹了最好用的Bootstrap fileinput.js文件上傳組件的使用方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
Javascript前端UI框架Kit使用指南之kitjs的對話框組件
本文以kitjs對話框組件為例，給我們詳細介紹了kitjs的組件目錄、默認代碼模板、構造器及初始方法、以及Kitjs繼承。講解的非常細致，對我們熟練掌握kitjs組件很有幫助。
2014-11-11
小程序rich-text組件如何改變內部img圖片樣式的方法
這篇文章主要介紹了小程序rich-text組件如何改變內部img圖片樣式的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-05-05
使用jscript實現二進制讀寫腳本代碼
Reading And Writing Binary Files Using JScript正如我剛才推什么我能做的JScript中，我想出了對問題的二進制文件。以下級的解決，這為小到中等大小的文件。我的部分包括這個職位在這里，因為我即將付諸表決，在一個職位約發(fā)送帶有附件的電郵通過JScript和它會使用這個二進制文件碼來讀取，在二進制附件檔案。
2008-06-06
用js實現的生肖查詢的代碼
用js實現的生肖查詢的代碼，原理就是以1997年為參照值，取余運算，然后通過比較，獲取相應出生年月的屬相。
2011-02-02