DOM節點操作

節點的三個基本屬性：

節點型別nodetype

節點名稱nodename

節點值nodevalue

利用dom樹可以把節點劃分為不同的層級關係，常見的是父子兄層級關係。

node.parentnode

1.parentnode.childnodes    // 標準

注：

// 只想獲得裡面的元素節點的處理

var eg = document.queryselector('ol');
for(var i = 0;i < ol.childnodes.length;i++) 
}

2.parentnode.children    // 非標準

3.parentnode.firstchild

4.parentnode.lastchild

5.parentnode.firstelementchild

6.parentnode.lastelementchild

注：5、6方法存在相容性問題，ie9以上才支援。

由於firstchild和lastchild包含其他節點，而firstelementchild和lastelementchild又有相容性問題，所以獲取第乙個子元素節點或最後乙個子元素節點的解決方法為：

1.node.nextsibling

2.node.previoussibling

3.node.nextelementsibling

4.node.previouselementsibling

注：方法3、4存在相容性問題，ie9以上才支援。

解決相容性問題的方法：

function getnextelemrntsibling(element) 

}return null;
}

document.createelement('tagname');

該方法將乙個節點新增到指定父節點的子節點列表末尾，類似於css裡的after偽元素。

2.node.insertbefore(child, 指定元素)    // 指定元素為parentnode.children[x]

node.removechild(child)

node.clonenode()

注：document.write()

element.innerhtml()

document.createelement()

區別：

document.write()是直接將內容寫入頁面的內容流，但是文件流執行完畢，則它會導致頁面重繪。

element.innerhtml()是將內容寫入某個dom節點，不會導致頁面全部重繪。它建立多個元素時效率更高（不要拼接字串，採取陣列形式拼接），結構稍微複雜。

document,createelement()建立多個元素效率稍低一點點，但是結構更清晰。

總結：不同瀏覽器下，innerhtml效率要比createelement高。

對於element.innerhtml()的使用：

// 1.拼接字串的方法，這種方法會使建立元素時效率降低，不要使用

var eg = document.queryselector('.inner');
for (var i = 0; i <= 100; i++) 
// 2.陣列形式拼接
var arr = ;
for (var i = 0; i <= 100; i++) 
eg.innerhtml = arr.join(''); // join()方法用於把陣列中的所有元素放入乙個字串

DOM節點操作

節點型別 nodetype nodename nodevalue 含義element node 1標籤名 eg div null 元素節點 attribute node 2特性名 eg class 特性值特性節點 text node 3 text 文字的內容 文字節點 cdata section n...

操作dom節點

取到節點物件可以，我們可以建立乙個節點後動態插入到dom節點樹中 html中 1 建立乙個文字節點 第一段第二段 第三段 js var div document getelementsbytagname div 0 var textnode document createtextnode 文字節點 ...

DOM 節點操作

方法名 只能document呼叫 返回單一的值 返回動態集合 getelementbyid getelementsbytagname getelementsbyclassname queryselectorall queryselector 建立節點document.createelement ta...