js常見dom節點操作使用方法總結-js教程-PHP中文網

js常見dom節點操作使用方法總結

php中世界最好的语言

發布： 2018-05-21 14:58:40

原創

2316 人瀏覽過

這次帶給大家js常見dom節點操作使用方法總結，js常見dom節點操作方法總結的注意事項有哪些，以下就是實戰案例，一起來看一下。

DOM意義：DOM是文件物件模型(Document Object Model，是基於瀏覽器程式設計的一套API接口，是W3C出台的推薦標準。其賦予了JS操作節點的能力。

1、整個文件時一個文件節點。 #4、每個HTML屬性是屬性節點。稱為節點樹。追加節點

1、createElement（標籤名）
建立一個元素節點（具體的一個元素）。
追加一個節點。 #1、
appendChild（節點）

也是插入節點的方式，也可以加入已經存在的元素，會將其元素從原來的位置移到新的位置。 ##2、

insertBefore（a,b）

是參考節點，意思是a節點會插入b節點的前面。節點

1、removeChild(節點)

刪除一個節點，用於移除刪除一個參數（節點）。移除的節點仍在文件中，只是文件中已沒有其位置了。 ##replaceChild(插入的節點，被替換的節點)

，用於替換節點，接受兩個參數，第一參數是要插入的節點，第二個是要被替換的節點。被替換的節點。節點。包括IE6-8B、
parentNode：取得父節點

var op = document.createElement("p");//创建一个p元素，因为是document对象的方法。
var opText = document.createTextNode("666");//创建一个文本节点内容是“666”，因为是document对象的方法。
op.appendChild(opText);//父级.appendChild(子节点);在p元素中添加“666”
document.body.appendChild(op);//父级.appendChild(子节点);;document.body是指向<body>元素
document.documentElement.appendChild(createNode);//父级.appendChild(子节点);;document.documentElement是指向<html>元素

登入後複製

3、A、firstChild

; firstElementChild尋找第一個子節點。此存在瀏覽器相容問題：firstChild是IE相容，firstElementChild是非IE相容。

var op = document.createElement("p");//创建一个p元素，因为是document对象的方法。
var op1 = document.getElementById("p1");
document.body.insertBefore(op,op1);//在op1节点前插入新创建的元素节点
ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾

登入後複製

B、lastChild ;
lastElementChild尋找最後一個子節點。此存在瀏覽器相容問題

：lastChild 是IE相容，lastElementChild是非IE相容。

var removeChild = document.body.removeChild(p1);//移除document对象的方法p1

登入後複製

C、nextSibling ; nextElementSibling找出下一個兄弟節點。也是存在

相容性問題。

var replaceChild= document.body.replaceChild(p1,p2); //将p1替换p2

登入後複製

D、

previousSibling ; previousElementSibling尋找上一個兄弟節點。也是存在相容性問題

。

for (var i = 0; i < oList.childNodes.length; i++) {//oList是做的ul的对象。
//nodeType是节点的类型，利用nodeType来判断节点类型，再去控制子节点
//nodeType==1 是元素节点
//nodeType==3 是文本节点
  if (oList.childNodes[i].nodeType == 1) {//查找到oList内的元素节点
    console.log(oList.childNodes[i]);//在控制器日志中显示找到的元素节点
  }
}

登入後複製

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ 推薦閱讀：

Vue中scoped使用步驟解析

#vue在自訂元件中使用v-model步驟詳解

以上是js常見dom節點操作使用方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！