js：firstChild和lastChild弹出的是undefined？？求助！

2024-12-21 13:21:50 JS 1601

firstChild和lastChild是JavaScript中的DOM属性，用于获取某个元素的第一个和最后一个子节点。出现undefined的情况，可能是因为以下几个原因：

元素没有子节点：如果元素没有子节点，那么firstChild和lastChild将返回null。
获取元素的方式不正确：确保你正确地获取了元素。
脚本运行时机问题：脚本可能在DOM完全加载之前执行，导致无法正确获取子节点。

下面是详细的解释和解决方法：

示例代码

html
<!DOCTYPE html>
<html>
<head>
    <title>firstChild and lastChild Example</title>
</head>
<body>
    <div id="parent">
        <p>First child</p>
        <p>Last child</p>
    </div>
    <script>
        // 获取父元素
        var parent = document.getElementById("parent");

        // 获取第一个子节点
        var firstChild = parent.firstChild;
        console.log("First child:", firstChild);

        // 获取最后一个子节点
        var lastChild = parent.lastChild;
        console.log("Last child:", lastChild);
    </script>
</body>
</html>

注意事项

文本节点：
- firstChild和lastChild返回的是第一个和最后一个子节点，可以是元素节点、文本节点或注释节点。如果有空白或换行符，firstChild和lastChild可能返回文本节点。
- 可以使用firstElementChild和lastElementChild，它们只返回元素节点。
```
javascript
var firstElementChild = parent.firstElementChild;
console.log("First element child:", firstElementChild);

var lastElementChild = parent.lastElementChild;
console.log("Last element child:", lastElementChild);
```

确保DOM加载完成：

确保脚本在DOM完全加载后执行，可以将脚本放在</body>之前，或使用DOMContentLoaded事件。

javascript
document.addEventListener("DOMContentLoaded", function() {
    var parent = document.getElementById("parent");
    var firstChild = parent.firstElementChild;
    console.log("First element child:", firstChild);

    var lastChild = parent.lastElementChild;
    console.log("Last element child:", lastChild);
});

获取正确的元素：
- 确保getElementById等方法返回的是正确的元素。

示例修改

html
<!DOCTYPE html>
<html>
<head>
    <title>firstChild and lastChild Example</title>
</head>
<body>
    <div id="parent">
        <p>First child</p>
        <p>Last child</p>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var parent = document.getElementById("parent");
            var firstElementChild = parent.firstElementChild;
            console.log("First element child:", firstElementChild);

            var lastElementChild = parent.lastElementChild;
            console.log("Last element child:", lastElementChild);
        });
    </script>
</body>
</html>

通过以上方法，可以确保正确获取元素的第一个和最后一个子节点，并避免出现undefined的情况。