首頁 > web前端 > js教程 > js常見dom節點操作使用方法總結

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

php中世界最好的语言
發布: 2018-05-21 14:58:40
原創
2375 人瀏覽過

這次帶給大家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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板