本文主要讲解如何获取父节点元素，子节点元素和兄弟节点元素。

1. 什么是节点?

节点：Node，是构成HTML文档最基本的单元。
常用节点分为四类：

  • 文档节点：整个HTML文档，document；
  • 元素节点：HTML文档中的HTML标签元素；
  • 属性节点：标签中的属性；
  • 文本节点：HTML标签中的文本内容。

节点之间的关系一般可以分为 父子兄 三种关系。

2. 获取父节点

通过子节点获取父节点: node.parentNode

注意:

  • node.parentNode只返回距离该node元素最近一级的父级节点；
  • 如果没有父节点，则返回null。
<body>
    <div class="father1">
        <div class="father2">
            <div class="son"></div>
        </div>
    </div>
</body>
<script>
    const son = document.querySelector(".son");
    console.log(son.parentNode);
</script>

结果如下：

java中document获取节点可以正则么 document获取节点内容_DOM节点

3. 获取子节点

3.1 parentNode.childNodes

注意：

  • 返回指定节点的子节点的集合，包含所有节点，比如元素节点，文本节点等。
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
<script>
    const ul = document.querySelector("ul");
    console.log(ul.childNodes);
</script>

结果如下：

java中document获取节点可以正则么 document获取节点内容_js_02


正如上面说的，childNodes会返回所有的子节点，下方图片中圈起来的部分是文本节点：

java中document获取节点可以正则么 document获取节点内容_javascript_03


如果只想要获取元素节点，就需要通过nodeType来判断，元素节点的nodeType为1，文本节点的nodeType为3：

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
<script>
    const ul = document.querySelector("ul");
    console.log(Array.from(ul.childNodes).filter(v => v.nodeType === 1));
</script>
3.2 parentNode.children(常用)

上面使用childNodes获取所有子元素节点比较繁琐，children是只获取所有子元素节点：

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
<script>
    const ul = document.querySelector("ul");
    console.log(ul.children);
</script>

结果如下：

java中document获取节点可以正则么 document获取节点内容_获取DOM节点_04

3.3 获取第一个子节点和最后一个子节点
  • parentNode.firstChild：返回第一个子节点，包含所有节点，如元素节点，文本节点等；
  • parentNode.lastChild：返回最后一个子节点，包含所有节点，如元素节点，文本节点等。
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
<script>
    const ul = document.querySelector("ul");
    console.log(ul.firstChild);
    console.log(ul.lastChild);
</script>

结果如下：

java中document获取节点可以正则么 document获取节点内容_获取DOM节点_05


和childNodes类似，ul的第一个子节点和最后一个子节点都是文本节点，所以返回上方结果。

有没有什么方法只获取元素节点呢？
当然有！！！

  • parentNode.firstElementChild：返回第一个子元素节点，有兼容问题，ie9以上才可以使用；
  • parentNode.lastElementChild：返回最后一个子元素节点，有兼容问题，ie9以上才可以使用。
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
<script>
    const ul = document.querySelector("ul");
    console.log(ul.firstElementChild);
    console.log(ul.lastElementChild);
</script>

结果如下:

java中document获取节点可以正则么 document获取节点内容_js_06

其实也可以使用children来获取第一个和最后一个子节点元素：

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
<script>
    const ul = document.querySelector("ul");
    console.log(ul.children[0]);
    console.log(ul.children[ul.children.length - 1]);
</script>

结果如下：

java中document获取节点可以正则么 document获取节点内容_javascript_07

4. 获取兄弟节点

  • node.nextSibling：返回当前元素的下一个节点，找不到则返回null，同样，也是包含所有节点；
  • node.previousSibling: 返回当前元素的上一个节点，找不到则返回null，同样，也是包含所有节点。
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>
<script>
    const box2 = document.querySelector(".box2");
    console.log(box2.nextSibling);
    console.log(box2.previousSibling);
</script>

结果如下：

java中document获取节点可以正则么 document获取节点内容_DOM节点_08


当然也有只返回节点元素的方法：

  • node.nextElemntSibling：返回当前元素的下一个元素节点，有兼容问题，ie9以上才可以使用；
  • node.previousElementSibling: 返回当前元素的上一个元素节点，有兼容问题，ie9以上才可以使用。
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>
<script>
    const box2 = document.querySelector(".box2");
    console.log(box2.nextElementSibling);
    console.log(box2.previousElementSibling);
</script>

结果如下：

java中document获取节点可以正则么 document获取节点内容_javascript_09