JavaScript如何获取子节点

介绍

在前端开发中，经常需要通过JavaScript来操作DOM（文档对象模型），其中获取子节点是一个常见的操作。本文将详细介绍使用JavaScript来获取子节点的几种方法，并给出相应的示例代码和运行结果。

1. getElementById

getElementById是Document对象提供的一个方法，用于通过元素的id属性获取指定的子节点。具体示例代码如下：

<!DOCTYPE html>
<html>
<body>

<div id="myDiv">
  <p>第一个<p>
  <p>第二个</p>
</div>

<script>
var element = document.getElementById("myDiv");
var childNodes = element.childNodes;

console.log(childNodes);
</script>

</body>
</html>

运行结果如下：

NodeList(5) [text, p, text, p, text]

结果说明了getElementById方法成功获取了指定id的子节点，并将子节点以NodeList的形式返回。

2. getElementsByTagName

getElementsByTagName是Element对象提供的一个方法，用于通过元素的标签名获取其所有的子节点。具体示例代码如下：

<!DOCTYPE html>
<html>
<body>

<ul id="myList">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

<script>
var element = document.getElementById("myList");
var childNodes = element.getElementsByTagName("li");

console.log(childNodes);
</script>

</body>
</html>

运行结果如下：

HTMLCollection(3) [li, li, li]

结果说明了getElementsByTagName方法成功获取了指定标签名的子节点，并将子节点以HTMLCollection的形式返回。

3. getElementsByClassName

getElementsByClassName是Element对象提供的一个方法，用于通过元素的class属性获取指定的子节点。具体示例代码如下：

<!DOCTYPE html>
<html>
<body>

<div id="myDiv">
  <p class="myPara">第一个</p>
  <p class="myPara">第二个</p>
</div>

<script>
var element = document.getElementById("myDiv");
var childNodes = element.getElementsByClassName("myPara");

console.log(childNodes);
</script>

</body>
</html>

运行结果如下：

HTMLCollection(2) [p.myPara, p.myPara]

结果说明了getElementsByClassName方法成功获取了指定class的子节点，并将子节点以HTMLCollection的形式返回。

4. children

children是Element对象提供的一个属性，用于获取指定元素的所有子元素。具体示例代码如下：

<!DOCTYPE html>
<html>
<body>

<div id="myDiv">
  <p>第一个</p>
  <p>第二个</p>
</div>

<script>
var element = document.getElementById("myDiv");
var childNodes = element.children;

console.log(childNodes);
</script>

</body>
</html>

运行结果如下：

HTMLCollection(2) [p, p]

结果说明了children属性成功获取了指定元素的所有子元素，并将子元素以HTMLCollection的形式返回。

5. querySelectorAll

querySelectorAll是Document对象提供的一个方法，用于通过指定的CSS选择器来获取所有符合条件的子节点。具体示例代码如下：

<!DOCTYPE html>
<html>
<body>

<ul id="myList">
  <li class="fruits">苹果</li>
  <li class="fruits">香蕉</li>
  <li class="vegetables">胡萝卜</li>
</ul>

<script>
var childNodes = document.querySelectorAll("#myList .fruits");

console.log(childNodes);
</script>

</body>
</html>

运行结果如下：