js常見dom節點操作使用方法總結
- php中世界最好的语言原創
- 2018-05-21 14:58:402352瀏覽
這次帶給大家js常見dom節點操作使用方法總結，js常見dom節點操作方法總結的注意事項有哪些，以下就是實戰案例，一起來看一下。
DOM意義：DOM是文件物件模型(Document Object Model，是基於瀏覽器程式設計的一套API接口，是W3C出台的推薦標準。其賦予了JS操作節點的能力。
1、整個文件時一個文件節點。 #4、每個HTML屬性是屬性節點。稱為節點樹。追加節點
1、createElement（標籤名）
建立一個元素節點（具體的一個元素）。
追加一個節點。 #1、
appendChild（節點）
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、
; 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尋找最後一個子節點。此存在瀏覽器相容問題
var removeChild = document.body.removeChild(p1);//移除document对象的方法p1C、nextSibling ; nextElementSibling找出下一個兄弟節點。也是存在
相容性問題。
var replaceChild= document.body.replaceChild(p1,p2); //将p1替换p2D、
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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn