JS DOM元素常見增刪改查操作詳解

這次帶給大家JS DOM元素常見增刪改查操作詳解，JS 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>


<p>修改样式测试</p>
<input>
<input>

<script>
  var p1 = document.getElementById("p1");
  function style1(){
    p1.className = "style1"
  }
  function style2(){
    p1.className = "style2"
  }
</script>

以上是JS DOM元素常見增刪改查操作詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！