解析dom中的children对象数组元素firstChild,lastChild的使用

当我们使用JavaScript解析DOM时，经常需要访问一个元素的子节点。在DOM树种，每个元素节点都有一个名为children的属性，它引用了该元素的所有子节点。children属性返回一个子节点的NodeList对象，可以通过它访问节点列表。在这个NodeList对象中，每个子节点都有一个firstChild和一个lastChild属性，分别是该元素的第一个子节点和最后一个子节点，在访问和操作DOM时非常有用。

下面是几个使用firstChild和lastChild的示例:

示例1：获取当前元素的第一个子元素

假设我们要获取id为"myDiv"元素的第一个子元素，我们可以使用firstChild属性来实现：

<div id="myDiv">
    <p>这是第一个子元素</p>
    <p>这是第二个子元素</p>
</div>

var div = document.getElementById("myDiv");
var firstChild = div.firstChild;
console.log(firstChild); // <p>这是第一个子元素</p>

示例2：获取当前元素的最后一个子元素

假设我们要获取id为"myDiv"元素的最后一个子元素，我们可以使用lastChild属性来实现：

<div id="myDiv">
    <p>这是第一个子元素</p>
    <p>这是第二个子元素</p>
</div>

var div = document.getElementById("myDiv");
var lastChild = div.lastChild;
console.log(lastChild); // <p>这是第二个子元素</p>

在上面的两个示例中，我们使用了firstChild和lastChild属性来获取元素的第一个子元素和最后一个子元素，实现了对DOM元素对象的深入操作，来满足开发需求。