目录
节点之间的关系
1、父节点 parentNode
代码如下(示例):
//html代码:
<ul id="list">
<p>夜夏墨时沈</p>
<li id="li_1">1</li>
<li id="li_2">2</li>
<li id="li_3">3</li>
<li id="li_4">4</li>
<li id="li_5">5</li>
<li id="li_6">6</li>
<li id="li_7">7</li>
倔强
</ul>
//js代码:
var list = document.getElementById("ul");
var li_1 = document.getElementById("li_1");
var li_2 = document.getElementById("li_2");
var li_3 = document.getElementById("li_3");
var li_4 = document.getElementById("li_4");
var li_5 = document.getElementById("li_5");
var li_6 = document.getElementById("li_6");
var li_7 = document.getElementById("li_7");
console.log(list.parentNode.parentNode.parentNode)
2.父元素节点 parentElement
代码如下(示例):
//html代码:
<ul id="list">
<p>夜夏墨时沈</p>
<li id="li_1">1</li>
<li id="li_2">2</li>
<li id="li_3">3</li>
<li id="li_4">4</li>
<li id="li_5">5</li>
<li id="li_6">6</li>
<li id="li_7">7</li>
倔强
</ul>
//js代码:
var list = document.getElementById("ul");
var li_1 = document.getElementById("li_1");
var li_2 = document.getElementById("li_2");
var li_3 = document.getElementById("li_3");
var li_4 = document.getElementById("li_4");
var li_5 = document.getElementById("li_5");
var li_6 = document.getElementById("li_6");
var li_7 = document.getElementById("li_7");
console.log(list.parentElement.parentElement.parentElement)
父节点和父元素节点的区别:
html的父节点是#document
html的父元素节点是null
3、子节点 childNodes
代码如下(示例):
//html代码:
<ul id="list">
<p>夜夏墨时沈</p>
<li id="li_1">1</li>
<li id="li_2">2</li>
<li id="li_3">3</li>
<li id="li_4">4</li>
<li id="li_5">5</li>
<li id="li_6">6