DOM節點 節點概述 增刪查改

2021-10-12 12:53:49 字數 1468 閱讀 3037

一般地,節點至少擁有nodetype(節點型別)、nodename(節點名稱)和nodevalue(節點值)這三個基本屬性

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

1.父級節點 node.parentnode

2.子節點 parentnode.childnodes(標準)

parentnode.childnodes 返回包含指定節點的子節點的集合,該集合為及時更新的集合.

注意:返回值裡面包含了所有的子節點,包括元素節點,文字節點等

如果只想要獲得裡面的元素節點,則需要專門處理,所以我們一般不提倡適用childnodes

let ul=document.

queryselector

('ul');

for(

let i=

0;i)}

子節點非標準 parentnode.children(非標準)

parentnode.children是乙個唯讀屬性,返回所有的子元素節點。它只返回子元素節點,其餘節點不返回.

雖然children 是乙個非標準,但是得到了各個瀏覽器的支援,我們可以放心適用.

第乙個子元素節點 firstelementchild 找不到返回null

最後乙個元素節點 lastelementchild 找不到返回null

這兩個方法 ie9以上支援

實際開發的寫法 既沒有相容性問題又沒有返回第乙個子元素ol.children[0] 最後乙個子元素 ol.children[ol.childern.length-1]

3.兄弟節點

注意這兩個方法有相容性問題,ie9以上才支援。

//自己寫乙個相容性函式

function

getnextelementsibling

(element)

} retuen null

}

1.建立節點 createelement

3.新增節點 node.insertbefore(child,指定元素) 從頭部插入

最終我們想要在頁面新增乙個新的元素需要 先建立再插入

4.刪除節點

node.removechild(child) 從dom中刪除乙個子節點,返回刪除的子節點

轉殖節點 node.clonenode()

括號為空說著裡面為false 淺拷貝 只複製標籤,不複製裡面的內容

括號裡為true 深拷貝 複製標籤複製裡面的內容

溫故知新 DOM節點增刪查改替換複製

今天的通過下面這一段範例 展開 users class user 小a君li class user 小c君li ul 我們可以設想這樣乙個應用場景,根據上面的結構,建立兩個新的 小b君 和 小d君 按照 abcd 的順序插入到上面的列表中 那麼我們就開始吧 建立 element 節點主要依賴crea...

DOM操作 JS事件 節點增刪改查

習慣是社會的巨大的飛輪和最可貴的維護者。威 詹姆斯 day 49 value屬性操作 節點的增刪改查 一 展示 刪除節點 歡迎刪除,聖誕快樂 替換節點 p.innerhtml 深圳歡迎您 舊節點 let title document.getelementsbyclassname title 0 pe...

帶頭節點的單鏈表的增刪查改

package singlelinkedlist public class singlelinkedlistdemo 封裝節點資訊 class heronode 便於顯示,重寫tostring方法 override public string tostring 建立單鏈表 class singlel...