方法名
只能document呼叫
返回單一的值
返回動態集合
getelementbyid
√
√
getelementsbytagname
√
getelementsbyclassname
√
queryselectorall
queryselector
√
//建立節點document.createelement(tagname);舉個栗子: document.createelement(li); ---建立乙個 li 元素節點
//插入節點
elementparent.insertbefore(elementchild)------ 在『elementparent元素』中的『開頭位置』,插入『elementchild元素』。
舉個栗子:ul.insertbefore(li,ul.firstchild);---在 ul 中的第乙個元素之前插入 li
elementparent.removechild(elementchild) --- 在 『elementparent元素』中將 『elementchild元素』刪除。
舉個栗子: var users2=users.getelementsbyclassname(『user』)[1]; //查詢要刪除的目標user2.parentnode.removechild(user2); //刪除
其中 parentnode 指的是 父節點
element.innerhtml=』』; //清空element下的所有html元素
li.innerhtml = 』
用innerhtml時的bug:
// innerhtml 修改節點之前如果節點已經繫結事件,此時『事件』會駐留到記憶體當中,導致記憶體洩漏。
//innerhtml 內容在插入到節點時,瀏覽器會不做檢查的直接展現出來,那麼使用者就可以自己加入指令碼執行。開始做,堅持做,重複做
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 通過元素選出id選出 document.getelementsbyclassname 通過元素選出class選出 document.getelementsbytagname 通過元素的標籤名選出 document.getelem...