极客笔记JavaScript 获取节点的子元素
在JavaScript中，父节点可以有一个或多个子元素。那么如何获取节点的子元素是一个问题。
在这一节中，我们将讨论和研究如何在JavaScript中获取节点的子元素。
要访问父节点的子元素JavaScript，我们可以使用以下几种方法：
- 获取节点的第一个子元素
- 获取节点的最后一个子元素
- 获取节点的所有子元素
让我们逐个讨论每种方法。
示例
这是一个示例代码，将帮助我们理解如何获取特定节点的子元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript example to Get Child Elements</title>
</head>
<body>
<ul id="person">
<li class="class1">Category</li>
<li>Male or Female</li>
<li class="class 2">Groups</li>
<li>Young</li>
<li>Old</li>
<li>Child</li>
<li class="class3">All together</li>
</ul>
</body>
</html>
现在，使用这个示例代码，我们将了解之前描述的每种方法。
获取节点的第一个子元素
要获取节点的第一个子元素，需要使用 元素的firstChild属性 。
语法：
let firstChild = parentElement.firstChild;
在上述的语法中，变量 firstchild 将保存第一个子元素的值，而 parentElement 是我们要获取第一个子元素值的父节点。
注意事项：
- 如果 parentElement 没有任何子元素，则 firstChild 属性将返回 null 作为输出值。
- 如果属性找到父节点的第一个子节点，则它将返回该子节点，子节点可以是文本节点、元素节点或注释节点。
示例
让我们看下面的代码示例来理解如何使用firstChild属性：
let frstchild = document.getElementById('person');
console.log(frstchild.firstElementChild);
在上面的代码中，我们将 div 元素的id存储到
“` frstchild “` 变量中，然后我们获取了第一个子元素的值并将其存储到 “` frstchild “` 变量中。最后，我们输出了子元素的值。
在下面的输出中我们可以看到：
获取节点的最后一个子元素
为了获取节点的最后一个子元素，我们需要使用 lastChild 属性。
语法：
let lastChild = parentElement.lastChild;
lastChild变量将保存父节点中最后一个子元素的值。
检查示例代码的下面部分：
let lstchild = document.getElementById('person');
console.log(lstchild.lastElementChild);
所以，在上面的代码中，我们可以看到，与检索节点的第一个子元素类似，我们使用了 lastElementChild 方法来获取最后一个子元素。 但是，如果父节点中没有子元素存在，则该属性返回 null 。 否则，如果存在，它将返回最后一个子元素的值。
我们有以下输出：
需要注意的一点：
- 你可能已经注意到，在示例代码中我们没有使用节点的lastChild和firstChild属性来获取父节点的最后一个和第一个子元素。这是因为，如果我们在示例代码中使用firstChild属性和lastChild属性，那么为了保持
<ul>和<li>元素之间的空格，它会创建并输出“#text”节点。 - 因此，如果有空格（单个空格和多个空格）、回车和制表符，浏览器会为了保持它们而创建“#text”节点。
获取节点的所有子元素
要获取节点的所有子元素，请使用childNodes或children属性。这两个属性都可以用于获取父节点的所有指定子元素，但两者之间的区别在于childNodes属性会返回所有带有任何节点类型的子元素，即任何节点类型的所有子节点的动态NodeList，而children属性只会返回具有节点类型的子元素节点。
让我们看一下这两个属性的语法：
childNodes属性
let children = parentElement.childNodes;
子元素属性
let children = parentElement.children;
查看下面的示例代码部分，了解如何获取所有子元素：
let person = document.getElementById('person');
let children = person.children;
console.log(children);
在代码部分中，我们正在使用children属性来获取父节点的所有子元素，如下面的快照所示：
