原生js的dom操作 常用的整理

父節點parentnode

第乙個子節點 只會獲取到元素節點

firstelementchild ★★★★★    ​

第乙個子節點 (如果有文字節點將會獲取到文字節點)

firstchild

​ 最後乙個節點 只會獲取到元素節點

lastelementchild ★★★★★

最後乙個子節點 (如果有文字節點將會獲取到文字節點)

lastchild    ​ 

當前節點的後乙個（下乙個）節點 注：只會獲取到元素節點(dom操作推薦使用這種方法,ie9測試相容,ie8未測試)

nextelementsibling ★★★★★

​ ​ 當前節點的後乙個（下乙個）節點 (如果下乙個節點是文字節點的話將獲取到檔案節點)

nextsibling

​ 當前節點的前乙個（上乙個）節點 注：只會獲取到元素節點(dom操作推薦使用這種方法,ie9測試相容,ie8未測試)

previouselementsibling ★★★★★

previoussibling

當前節點的子節點 注：只會獲取到元素節點(ie9測試相容,ie8未測試)

children ★★★★★

當前節點的子節點 注：子節點中如果有文字節點，那麼也會同時獲取到

childnodes

​ 節點（元素）的屬性

attributes

li.attributes

//將會輸出li節點的所有屬性值     注：是屬性和值
li.attributes.id
//將會輸出li節點的id屬性值    注：是屬性和值

​ 把指定屬性設定或修改為指定的值。

setattribute()

li.setattribute("要修改的屬性","修改的值")

document.createelement("div")

insertbefore()

"父元素".insertbefore("要插入的節點","父元素.children[0]");//將元素插入到父元素的第乙個子元素

刪除子節點

removechild(node)

ul.removechild(li) 刪除ul的子節點中的li節點

remove()

//父元素.replacechild (新元素,舊元素 ) 

node.replacechild (newnode,oldnode )

innerhtml && innertext

h1.innerhtml

='插入的標籤'
//可以插入帶標籤
h1.innertext
='文字'
//只能插入文字

td&&tr 獲取到自己所在的索引

td.cellindex

//返回td所在tr的索引
tr.rowindex
//返回tr所在tbody的索引

'要獲取自定義屬性的物件'.getattribute ( 'data-name' )

js原生dom操作

1.建立元素 var a document.createelement a var node1 document.createelement div var node2 document.createtextnode hello world 2.新增子元素 刪除子元素 document.body.r...

原生JS操作DOM

複製 var one document.queryselector one one.style.color blue 複製 1.getelementsbyclassname 2.queryselectorall 複製 因為js獲得的節點中返回所有類是乙個陣列，所以要對其進行迴圈控制 用迴圈長度的方式...

原生JS實現的DOM操作筆記（草稿整理）

原生js實現的dom一系列操作參考 如下 var dom 功能說明 給指定dom元素新增class param el 指定的dom元素 param classname 新增的class名 addclass function el,classname return el 功能說明 給指定dom元素移除...