3 1 節點導航 父 子 兄

2022-06-08 20:09:30 字數 1774 閱讀 9438

一  節點概述

1)概念

//

. 網頁中所有內容都是節點

// . 文件節點 元素節點 屬性節點 文字節點 注釋節點

//. 節點用node表示

//. dom樹的所有節點都可以通過js訪問

//4 所有元素節點都可以建立 修改 刪除

2)節點屬性

//

節點至少有以下三個屬性

//1 節點型別 [ nodetype ]

//2 節點名稱 [ nodename ]

//3 節點值 [nodevalue ]

元素節點 nodetype 為 1

屬性節點 nodetype 為 2

文字節點 nodetype 為 3 [ 包含 文字、空格、換行等 ]

//我們實際開發中,主要操作的是 元素節點

二 節點層級導航[ 父 子 兄 ]

1)父節點

node.parentnode

//1 返回離自己最近的父級節點

//2 指點的節點沒有父節點則返回null

var p = document.getelementsbytagname('p'

);console.log(p);

console.log(p[

0].parentnode);//

獲取到父節點

2)子節點

1 返回所有子節點 

parentnode.childnodes

返回了子節點集合 [ 包含 元素節點 和 文字節點 ]

想要使用元素節點 需要專門處理 [ 一般不提倡使用childnodes ]

2 返回第乙個子節點

parentnode.firstnode [ 包含文字節點 ]

3 返回最後乙個子節點

parentnode.lastnode [ 包含文字節點 ]

4 返回第乙個元素節點

[ 有相容性問題,ie9 以上才支援 ]

firstelementnode;

5 返回最後乙個元素節點

[ 有相容性問題,ie9 以上才支援 ]

lastelementnode;

上面五個有兩個有相容性問題 有三個包含文字節點

重點學習:parentnode.children

//非標準 [ 但是得到了各個瀏覽器的支援 放心使用 ]

//只返回元素節點 不返回其他節點

//是乙個唯讀屬性

ul.children[0]//返回第乙個元素

ul.children[ul.children.length - 1]//獲取最後乙個元素

3)兄弟節點

上乙個  previoussibling  下乙個  nextsibling

返回的節點包含 文字節點 和 元素節點

沒有找到返回 null

上乙個元素節點 previouselementsibling

下乙個元素節點 nextelementsibling

//這兩個有相容問題 ie9才支援

2019 9 26節點遍歷

遍歷屬性 div container ul.list li.item p 結構 container list item 1 p li item 2 p li item vip 3 p li item 4 p li item 5 p li ul div jquery庫 jquery 3.4.1 20....

3 4 節點操作

一。元素節點的建立,新增,插入 替換,刪除 轉殖 建立節點有三種形式 1 document.createelement 元素 2 document.createtextnode 文字 3 document.createdocumentfragment document.createdocumentf...

2020 4 20 節點操作

一,建立節點 createlement 格式 document.createlement 標籤名 返回值 建立好的這個節點 二,插入節點三,建立文字節點 純文字,不解析標籤 格式 document.createtextnode 文字 四,替換節點 replacechild 格式 box1.paren...