這次帶給大家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>元素
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尋找最後一個子節點。此存在
瀏覽器相容問題
var removeChild = document.body.removeChild(p1);//移除document对象的方法p1
相容性問題。
var replaceChild= document.body.replaceChild(p1,p2); //将p1替换p2
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中文網其它相關文章!
推薦閱讀JS有哪些常用數學函數?
如何操作vue在自訂元件內啟用用v-model
以上是JS對於DOM節點進行增刪改查的詳細內容。更多資訊請關注PHP中文網其他相關文章!