JS获取子、父、兄节点方法小结
在JavaScript中,我们经常需要获取某个元素的子元素、父元素或者兄弟元素来执行一些特定的操作。下面我们来总结一下JS获取子、父、兄节点的常用方法。
一、获取子节点
使用childNodes
属性可以获取当前元素的所有子节点,包括文本节点、注释节点等。但是这个属性返回的是一个NodeList对象,如果想要获取指定位置的子元素,我们需要使用数组下标进行获取。
示例:
<div id="parent">
<p>这是一个段落</p>
<p>这也是一个段落</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
</div>
<script>
var parent = document.getElementById('parent');
var childNodes = parent.childNodes;
console.log(childNodes[1]); // 输出的是第1个子元素节点<p>这是一个段落</p>
console.log(childNodes[3]); // 输出的是第3个子元素节点<ul>...</ul>
</script>
二、获取父节点
使用parentNode
属性可以获取当前元素的父节点。如果要一直往上查找父节点,一直到根节点(HTML标签),那么就可以使用一个循环来实现。
示例:
<div id="parent">
<p>这是一个段落</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
</div>
<script>
var child = document.querySelector('li');
console.log(child.parentNode); // 输出的是<ul>元素
三、获取兄弟节点
使用previousSibling
和nextSibling
属性可以获取当前元素的上一个兄弟节点和下一个兄弟节点。但是需要注意的是,这两个属性返回的是包含空格和注释节点在内的所有节点,所以可能需要进一步处理才能获取到想要的节点。
示例:
<div>
<p>这是一个段落</p>
<ul>
<li>列表项1</li>
<li id="current">列表项2</li>
<li>列表项3</li>
</ul>
<p>这也是一个段落</p>
</div>
<script>
var current = document.getElementById('current');
console.log(current.previousSibling); // 输出的是上一个兄弟节点<p>这是一个段落</p>
console.log(current.nextSibling); // 输出的是下一个兄弟节点<li>列表项3</li>
</script>
四、获取指定类型的子元素
如果只想获取指定类型的子元素,可以使用children
属性来获取当前元素的所有指定类型的子元素。
示例:
<div id="parent">
<p>这是一个段落</p>
<p>这也是一个段落</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
</div>
<script>
var parent = document.getElementById('parent');
var children = parent.children; // 获取<div>元素下的所有子元素节点,但是不包括文本节点和注释节点
console.log(children); // 输出的是一个包含<p>和<ul>的HTMLCollection对象
</script>
五、总结
以上就是JS获取子、父、兄节点的常用方法的总结。通过这些方法,可以方便地获取到指定的元素及其周围的兄弟、父子元素,并进行相应的操作。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS获取子、父、兄节点方法小结 - Python技术站