038JS 父子兄弟節點

2021-10-08 10:30:04 字數 1785 閱讀 3920

<

!doctype html>

"en"

>

"utf-8"

>

"viewport" content=

"width=device-width, initial-scale=1.0"

>

"x-ua-compatible" content=

"ie=edge"

>

document<

/title>

<

/head>

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

父子兄層級關係

<

!-- 節點的優點 --

>

1<

/div>

2<

/span>

1<

/li>

2<

/li>

3<

/li>

4<

/li>

<

/ul>

="box"

>

="erweima"

>

<

/span>

<

/div>

var box = document.

queryselector

('.box');

console.

dir(box)

;// 元素節點nodetype為1屬性節點為2文字節點為3

// 父節點 node.parentnode 離得最近的父親如果找不到返回null

var erweima = document.

queryselector

('.erweima');

// var box =document.queryselector('.box');

var box2 = erweima.parentnode;

//等同於box

if(box === box2)

// 子節點 .childnodes【不推薦會把不是元素的節點抱哈進來空格之類】

// .children 可以選出來子元素節點

// 第乙個子元素.firstelementchild 有相容問題ie9以上

// 最後乙個 last

// 可以通過.children[0]來解決

var lis = document.

queryselector

('ul'

) console.

log(lis.childnodes)

; console.

log(lis.children)

;// 兄弟節點

// .nextsibling【相容和換行不好用】下乙個ie9

// .previoussibling 上乙個

// 下乙個元素節點.nextelementsibling ie9

// 下乙個元素節點.previouselementsibling

獲取親爸爸和帶有定位的爸爸

jQuery父 子 兄弟節點

jquery.parent expr 找父親節點,可以傳入expr進行過濾,比如 span parent 或者 span parent class jquery.parents expr 類似於jquery.parents expr 但是是查詢所有祖先元素,不限於父元素 jquery.childre...

父 子 兄弟節點查詢方法

jquery.parent expr 找父元素 jquery.parents expr 找到所有祖先元素,不限於父元素 jquery.children expr 查詢所有子元素,只會找到直接的孩子節點,不會返回所有子孫 jquery.contents 查詢下面的所有內容,包括節點和文字。jquery...

js兄弟節點

nextsibling 下乙個兄弟節點 previoussibling 上乙個兄弟節點 previouselementsibling 上乙個兄弟元素節點 nextelementsibling 下乙個兄弟元素節點 box 這是乙個區域1 div 這是乙個區域2 div c3 這是乙個區域3 div 這...