js中的節點關係

2021-10-23 21:55:26 字數 1646 閱讀 2660

<

!doctype html>

"en"

>

"utf-8"

>

"viewport" content=

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

>

document<

/title>

<

/head>

"father"

>

="child1"

>

1<

/li>

="child2"

>

2<

/li>

="child3"

>

3<

/li>

="child4"

>

4<

/li>

="child5"

>

5<

/li>

<

/ul>

var father = document.

queryselector

('#father');

var child1 = document.

queryselector

('.child1'

) console.

log(father.childnodes)

;//得到ul的全部子元素 包括文字節點

console.

log(father.children)

;//得到ul的全部子元素節點 得到的結果是個陣列 可以通過下標獲取對應的資料

console.

log(father.children[0]

);//得到ul中的第乙個元素節點

console.

log(father.firstchild)

;//得到第乙個子節點 包括文字節點

console.

log(father.firstelementchild)

;//得到第乙個子元素節點

console.

log(father.lastchild)

;//得到最後乙個節點 包括文字節點

console.

log(father.lastelementchild)

;//得到最後乙個元素節點

console.

log(child1.parentnode)

;//得到符節點

console.

log(child1.nextsibling)

;//得到下乙個兄弟節點 包括文字節點

console.

log(child1.nextelementsibling)

;//得到下乙個兄弟元素節點

console.

log(child1.previoussibling)

;//得到上乙個兄弟節點 包括文字節點

console.

log(child1.previouselementsibling)

;//得到上乙個兄弟元素節點

<

/script>

<

/body>

<

/html>

js 中的dom節點的關係操作

用來表示文件中物件的標準模型就稱為dom 節點 頁面中的所有內容都是節點 節點型別 元素節點 node.element 屬性節點 node.attribute 文字節點 node.text 注釋節點 node.comment 節點型別的屬性 nodetype 可以通過節點元素的nodetype屬性得...

JS中的節點

var tab document.getelementbyid tab var box document.getelementbyid box console.dir tab 節點型別 nodetype nodename nodevalue 元素節點 1大寫的標籤名 null 文字節點 3 text...

js中的節點操作

網頁中所有的內容都是節點 標籤,屬性,文字,注釋等 每乙個節點都有nodetype屬性,nodename屬性和nodevalue屬性 常用的節點 元素節點 nodetype 1 nodename 大寫的標籤名 nodevalue null 屬性節點 nodetype 2 nodename 屬性名稱 ...