HTML DOM lastElementChild 属性

lastElementChild 属性用于返回指定元素的最后一个子元素节点。如果指定的元素没有子元素，则该属性返回 null。

语法

var lastChild = elementNodeReference.lastElementChild;

• elementNodeReference：一个表示元素节点的引用。
• lastChild：返回的值是最后一个子元素节点，如果没有子元素则返回 null。

使用场景

lastElementChild 属性常用于遍历和操作元素的子节点。例如，你可以使用这个属性来删除或修改某个元素的最后一个子元素。

示例 1：获取最后一个子元素

假设有一个 HTML 元素如下：

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

JavaScript 代码可以这样获取最后一个子元素：

var div = document.getElementById("myDiv");
var lastParagraph = div.lastElementChild;
console.log(lastParagraph); // 输出最后一个 <p> 元素

示例 2：删除最后一个子元素

继续上面的例子，我们可以删除最后一个子元素：

var div = document.getElementById("myDiv");
var lastParagraph = div.lastElementChild;
if (lastParagraph) {
    div.removeChild(lastParagraph);
}

在这个例子中，我们首先检查 lastParagraph 是否存在（即是否不为 null），然后调用 removeChild 方法将其从 div 中删除。

注意事项

• lastElementChild 属性只考虑元素节点，忽略其他类型的节点（如文本节点、注释节点等）。如果你需要包括所有类型的节点，可以使用 lastChild 属性。
• 如果元素节点没有子节点，lastElementChild 返回 null。因此，在访问其属性或方法之前，最好先进行空值检查。

兼容性

lastElementChild 属性在现代浏览器中得到了广泛支持，但在一些旧版本的浏览器中可能不被支持。如果你需要兼容旧版浏览器，可以考虑使用以下替代方案：

// www.javascriptcn.com code example
function getLastElementChild(element) {
    var child = element.lastChild;
    while (child && child.nodeType !== 1) {
        child = child.previousSibling;
    }
    return child;
}

var div = document.getElementById("myDiv");
var lastParagraph = getLastElementChild(div);
console.log(lastParagraph); // 输出最后一个 <p> 元素

这段代码通过循环遍历最后一个子节点及其之前的兄弟节点，找到最后一个元素节点。

总结

lastElementChild 是一个非常有用的属性，它可以帮助开发者轻松地获取或操作元素的最后一个子元素。通过了解它的语法和应用场景，你可以更有效地编写出更加简洁和高效的前端代码。