原生DOM操作彙總

節點型別

attr

document

element

text

……其他

父節點：parentnode

子節點：childnodes

前乙個兄弟節點：nextsibling

後乙個兄弟節點：previoussibling

第乙個子節點：firstchild

最後乙個子節點：lastchild

children:返回所有元素子節點

nextelementsibling:返回元素的下乙個兄弟元素節點；

previouselementsibling:返回元素的上乙個兄弟元素節點；

建立元素：document.createelement(『div』);

建立文字節點：document.createtextnode(『文字內容』);

element.clonenode(true/false);

insertbefore()

replacechild()

刪除

removechild()

replacechild()

document.getelementbyid();

document.getelementsbytagname();

document.getelementsbyname(「div2」);

document.document.getelementsbyclassname(「one」);

document.getelementsbyclassname(「one two」);

document.queryselector()

document.queryselectorall()

attributes

setattribute()

getattribute()

hasattributes()

removeattribute()

原生DOM 操作

dom.nodetype 檢視元素節點型別 dom.childnodes 檢視所有元素下面的所有子節點 空白節點也會獲取到 dom.children 檢視所有元素下面的所有子節點 只獲取元素節點 dom.firstchild 獲取第乙個子節點 dom.lastchild 獲取最後乙個子節點 dom....

js原生dom操作

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

再談DOM原生操作！

前面已經有一篇博文總結了一些dom的原生操作方法了，今天進個階吧 給乙個場景，其html結構如下 假設頁面中只有乙個ul標籤 現在，我們要對其做如下幾個操作 1 在第三個li下方增加乙個值為6的li 2 刪除第二個li 3 修改第四個li，更新其值為7 4 為第二個li設定屬性class為 aa 5...