3 1 節點導航 父 子 兄

一  節點概述

1）概念

//

. 網頁中所有內容都是節點
// . 文件節點 元素節點 屬性節點 文字節點 注釋節點
//. 節點用node表示
//. dom樹的所有節點都可以通過js訪問
//4 所有元素節點都可以建立 修改 刪除

//

節點至少有以下三個屬性
//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);//
獲取到父節點

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]//獲取最後乙個元素

上乙個  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...