JavaScript lastChild
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 lastChild 属性。此属性对于 DOM 遍历至关重要，它允许开发人员访问元素的最后一个子节点。
基本定义
lastChild 属性返回指定元素的最后一个子节点。这包括所有节点类型，而不仅仅是元素节点。需要注意的是，空格和文本节点也被考虑在内。
如果元素没有子节点，lastChild 返回 null。对于仅遍历元素节点，请考虑改用 lastElementChild。
基本的 lastChild 示例
此示例演示了如何访问父元素的最后一个子节点。
<!DOCTYPE html>
<html>
<head>
<title>Basic lastChild</title>
</head>
<body>
<ul id="list">
<li>First item</li>
<li>Second item</li>
<li>Last item</li>
</ul>
<script>
const list = document.getElementById('list');
const lastItem = list.lastChild;
console.log(lastItem); // Might be text node due to whitespace
</script>
</body>
</html>
在这个基本示例中，我们有一个带有三个 li 子元素的 ul 元素。JavaScript 代码使用 lastChild 检索最后一个子节点。
请注意，由于可能存在空格，这可能会返回一个文本节点而不是最后一个 li 元素。这展示了 lastChild 如何考虑所有节点类型。
使用 lastElementChild
此示例展示了如何使用 lastElementChild 来专门获取最后一个元素子节点。
<!DOCTYPE html>
<html>
<head>
<title>lastElementChild</title>
</head>
<body>
<div id="container">
<p>First paragraph</p>
<p>Middle paragraph</p>
<p>Last paragraph</p>
</div>
<script>
const container = document.getElementById('container');
const lastPara = container.lastElementChild;
lastPara.style.color = 'red';
</script>
</body>
</html>
这里我们有一个带有三个段落元素的 div。代码使用 lastElementChild 来专门定位最后一个元素子节点。
此属性会忽略文本节点和注释节点，当您只想处理元素节点时，它会更加可预测。然后我们将最后一个段落的颜色更改为红色。
检查子节点
此示例演示了在访问 lastChild 之前如何检查元素是否具有子节点。
<!DOCTYPE html>
<html>
<head>
<title>Checking for Children</title>
</head>
<body>
<div id="parent"></div>
<button onclick="checkChildren()">Check Children</button>
<script>
function checkChildren() {
const parent = document.getElementById('parent');
if (parent.hasChildNodes()) {
console.log('Last child:', parent.lastChild);
} else {
console.log('No children found');
}
}
</script>
</body>
</html>
在此示例中，我们有一个空的 div 和一个按钮。点击时，该函数在尝试访问 lastChild 之前会检查 div 是否有任何子节点。
这是在处理子节点可能不确定的动态内容时避免错误的良好实践。hasChildNodes 方法有助于确保安全访问。
删除最后一个子节点
此示例展示了如何使用 lastChild 删除元素的最后一个子节点。
<!DOCTYPE html>
<html>
<head>
<title>Removing Last Child</title>
</head>
<body>
<ul id="items">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<button onclick="removeLast()">Remove Last</button>
<script>
function removeLast() {
const list = document.getElementById('items');
if (list.lastChild) {
list.removeChild(list.lastChild);
}
}
</script>
</body>
</html>
这里我们有一个带有三个项目的列表和一个按钮。点击时，该函数使用 removeChild 和 lastChild 作为参数来删除列表的最后一个子节点。
这演示了 lastChild 在动态列表操作中的常见用法。条件检查可确保我们不会在不存在子节点时尝试删除子节点。
比较 firstChild 和 lastChild
此示例在一个父元素中比较了 firstChild 和 lastChild。
<!DOCTYPE html>
<html>
<head>
<title>firstChild vs lastChild</title>
</head>
<body>
<div id="comparison">
<span>First span</span>
Some text
<span>Last span</span>
</div>
<button onclick="compare()">Compare</button>
<script>
function compare() {
const div = document.getElementById('comparison');
console.log('First child:', div.firstChild);
console.log('Last child:', div.lastChild);
}
</script>
</body>
</html>
在此示例中，我们有一个包含两个 span 元素和一个夹在中间的文本的 div。点击按钮时，该函数会记录第一个和最后一个子节点。
这演示了这两个属性在相同上下文中的工作方式，以及它们如何根据 DOM 结构返回不同类型的节点（元素节点与文本节点）。
来源
在本文中，我们展示了如何在 JavaScript 中使用 lastChild 属性。此属性对于 Web 开发中的 DOM 遍历和操作至关重要。
作者
列出 所有 JS DOM 教程。