parentNode,parentElement,childNodes,children的区别

本文详细解析了DOM中parentNode与parentElement的区别,以及childNodes与children的不同,并通过具体示例展示了如何使用这些属性来操作HTML文档。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

从字面上我们可以知道一个是parent的节点,一个是parent的元素,实际上在很多时候它们的返回的内容是相同的,比如有这么一段代码:

<!DOCTYPE html>
<html>
<head>
  <title>节点</title>
</head>
<body>
  <ul>
    <li id="item1">item1
     <ul>
      <li>item i</li>
      <li>item ii</li>
      <li>item iii</li>
     </ul>
    </li>
    <li>item2</li>
    <li>item3</li>
 </ul>
 
<script>
 var item1 = document.getElementById('item1');
 console.log(item1.parentNode);
 console.log(item1.parentElement);
</script>
</body>
</html>
 
 
此时我们我们打印出来的结果是相同的

但是如果我们继续往上查找父级
<script>
 console.log(item1.parentNode.parentNode.parentNode.parentNode);   console.log(item1.parentElement.parentElement.parentElement.parentElement);
</script>

最终我们看到这样的结果

因此我们知道parentElement查找的是父级元素,如果有返回元素节点,否则返回null,而parentNode此时返回的是document节点
 
<script>
 console.log(item1.childNodes);
 console.log(item1.children);
</script>

这里的childNodes返回的是子节点,其中包括空格,换行,元素,而children则返回的是子元素

我们可以通过nodeValue更直观的查看打印的内容,注意:元素节点没有nodeValue
<script>
 console.log(item1.childNodes[0].nodeValue);   
 console.log(item1.children[0].nodeName);
</script>



我们通过选中部分可以看出这里打印包括空格和换行,而元素节点的nodeValue则为null
其中
节点树:
父子关系:
parentNode, childNode, firstChild, lastChild
 
兄弟关系:
previousSibling, nextSibling
 
元素树:
父子关系:
parentElement, children, firstElementChild, lastElementChild
 
兄弟关系:
previousElementSibling, nextElementSibling
这些规则和上述内容都是相同的
 
 

<think>好,我现在需要解释“跳转DOM”这个概念。首先,用户可能是指遍历DOM,寻找特定节点或执行某些操作。DOM是网页的节点层次结构,通过JavaScript可以访问和操作这些节点。 跳转DOM的方法通常涉及使用DOM API来访问父节点、子节点、兄弟节点等。比如,parentNodechildNodes、firstChild、nextSibling等属性。这些属性允许在节点之间移动,实现“跳转”。 接下来,我应该列举常见的方法,比如parentNode获取父节点children获取子元素,querySelector用选择器查找等。然后给出示例代码,展示如何从某个元素开始,向上找父节点,向下找子节点,或者横向找兄弟节点。 需要注意,某些属性如childNodes会包含文本节点,而children只返回元素节点。这可能是一个常见的混淆点,需要解释清楚。另外,现代方法如closest()和遍历方法如遍历所有子节点,可能也需要提到。 最后,相关问题需要围绕DOM遍历的其他方法、属性和常见问题,比如如何选择节点childNodeschildren区别,closest的用途,以及排除文本节点的方法等。确保问题覆盖用户可能进一步询问的内容。</think><< 跳转DOM是指通过JavaScript在DOM节点之间进行层级导航和定位的操作方法。以下是常见的DOM跳转方式及示例: 1. **访问父节点**: ```javascript const child = document.querySelector('#child'); const parent = child.parentNode; // 获取直接父节点 ``` 2. **访问子节点**: ```javascript const parent = document.querySelector('#parent'); const firstChild = parent.firstElementChild; // 第一个元素子节点 const allChildren = parent.children; // 所有元素子节点集合 ``` 3. **访问兄弟节点**: ```javascript const element = document.querySelector('#target'); const nextSibling = element.nextElementSibling; // 下一个元素兄弟节点 const prevSibling = element.previousElementSibling; // 上一个元素兄弟节点 ``` 4. **层级跳转选择器**: ```javascript // 查找祖先节点中最近的匹配选择器的元素 const closestElement = element.closest('.ancestor-class'); // 查找后代节点 const descendant = parent.querySelector('.descendant-class'); ``` **注意事项**: - `childNodes` 会包含文本节点和注释节点,而 `children` 仅返回元素节点 - `parentElement` 与 `parentNode` 的区别在于前者返回元素节点,后者可能返回文档片段 - 现代浏览器支持 `element.closest()` 方法进行向上选择
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值