原生js操做dom的方法

時間 2019-11-20

標籤原生 dom 方法欄目 JavaScript 简体版

原文原文鏈接

今天學習了原生js的dom節點的操做，就記錄下來，僅供本身之後參考。html

1)建立節點：除了可使用createElement建立元素，也可使用createTextNode建立文本節點.chrome

document.body指向的是<body>元素;document.documentElement則指向<html>元素瀏覽器

// 建立節點 app

vardom

createNode = document.createElement("div");性能

var學習

createTextNode = document.createTextNode("hello world");優化

createNode.appendChild(createTextNode);htm

document.body.appendChild(createNode);seo

document.documentElement.appendChild(createNode);

2)插入節點：可使用appendChild，insertBefore，insertBefore接收兩個參數，第一個是插入的節點，第二個是參照節點，如insertBefore(a,b)，則a會插入在b的前面

// 插入節點

var

createNode = document.createElement("div");

var

createTextNode = document.createTextNode("hello world");

createNode.appendChild(createTextNode);

var

div1 = document.getElementById("div1");

document.body.insertBefore(createNode,div1);

3)替換和刪除元素，從replaceChild和removeChild的字面意思看，就是刪除子節點，所以調用者，須要包含子節點div1，否則調用會報錯。返回的節點是替換的或刪除的元素，被替換/刪除的元素仍然存在，但document中已經沒有他們的位置了。

// 替換元素
var replaceChild = document.body.replaceChild(createNode,div1);

// 刪除元素
var removeChild = document.body.removeChild(div1);

4)節點的屬性：

firstChild:第一個子節點

lastChild:最後一個子節點

childNodes:子節點集合，獲取其中子節點能夠someNode.childNodes[index]或者someNode.childNodes.item(index)

nextSibling:下一個兄弟節點

previousSibling：上一個兄弟節點

parentNode：父節點

< ul id ="ul" >< li > sdsssssss </ li >< li > qqqq </ li >< li > wwww </ li >< li > eeee </ li></ ul >

// 節點屬性

var

ul = document.getElementById("ul");

var

firstChild = ul.firstChild;

console.log(firstChild.innerHTML);

var

lastChild = ul.lastChild;

console.log(lastChild.innerHTML);

var

length = ul.childNodes.length;

console.log(length);

var

secondChild = ul.childNodes.item(1);

console.log(secondChild.innerHTML);

var

forthChild = ul.childNodes.item(2).nextSibling;

console.log(forthChild.innerHTML);

var

thridChild = forthChild.previousSibling;

console.log(thridChild.innerHTML);

var

parentNode = forthChild.parentNode;

console.log(parentNode.innerHTML);

5) 文檔片斷，好處在於減小dom的渲染次數，能夠優化性能。

// 文本片斷

var

fragment = document.createDocumentFragment();

var

ul = document.getElementById("ul");

var li =

null

;

for (

var

i = 4; i >= 0; i--) {

li = document.createElement("li");

li.appendChild(document.createTextNode("item "+i));

fragment.appendChild(li);

}

ul.appendChild(fragment);

6）克隆元素

someNode.cloneNode(true):深度克隆，會複製節點及整個子節點

someNode.cloneNode(false):淺克隆，會複製節點，但不復制子節點

// 克隆
var clone = ul.cloneNode(

true

);

document.body.appendChild(clone);

一、childNodes.length存在跨瀏覽器的問題

能夠看到有關列表的html片斷沒有用

< ul id ="ul"

< li > sdsssssss </ li

< li > qqqq </ li

< li > wwww </ li

< li > eeee </ li

</ ul

這種書寫格式而是使用沒有換行的格式書寫，是由於在不一樣的瀏覽器中，獲取ul.childNodes.length的結果有差別：

在ie中，ul.childNodes.length不會計算li之間的換行空格，從而獲得數值爲4

在ff、chrome,safari中，會有包含li之間的空白符的5個文本節點，所以ul.childNodes.length爲9

若要解決跨瀏覽器問題，能夠將li之間的換行去掉，改爲一行書寫格式。

二、cloneNode存在跨瀏覽器的問題

在IE中，經過cloneNode方法複製的元素，會複製事件處理程序，好比，var b = a.cloneNode(true).若a存在click,mouseover等事件監聽，則b也會擁有這些事件監聽。

在ff,chrome,safari中，經過cloneNode方法複製的元素，只會複製特性，其餘一切都不會複製

所以，若要解決跨瀏覽器問題，在複製前，最好先移除事件處理程序。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。