DOM 節點操作

2021-09-20 19:25:37 字數 1619 閱讀 9272

方法名

只能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...