javascript - lastElementChild 返回 null-6ren

javascript - lastElementChild 返回 null

转载作者：行者123 更新时间：2023-11-30 21:17:29

我正在处理一个 Javascript 任务，它将页面拆分为两个 div 元素，然后在左侧的 div 中附加随机放置的图像，然后我使用 .cloneNode() 在右侧进行复制, 减去最后一个子图像。

这部分工作正常，但我应该向左侧 div 的最后一个元素添加一个事件处理程序，但是当我尝试这样做时，lastElementChild() 方法返回 null即使 div 具有预期的子节点。代码在下面，我已经评论了问题出在哪里。任何帮助将不胜感激!

<!DOCTYPE html>
<html>
<head>
<style>
    img {position: absolute}
    div {position: absolute; height: 500px; width: 500px}
    #right {border-left: solid black; left: 500px}
</style>

<script>

<!-- everything here works fine -->

    function generateFaces(){

        var theLeftSide = document.getElementById("left");

        var numberFaces = 5;

        for (i = 0; i < numberFaces; i++){
            var random_x = Math.random()*400;
            var random_y = Math.random()*400;
            var image = document.createElement("img")
            image.src = "smile.png";
            image.setAttribute("style","top: " + random_y + "px;" + "left: " + random_x + "px;");
            theLeftSide.appendChild(image);
        }

        var theRightSide = document.getElementById("right");

        leftSideImages = theLeftSide.cloneNode(true);
        theRightSide.appendChild(leftSideImages);
        theRightSide.lastChild.removeChild(theRightSide.lastChild.lastChild);
    }


</script>

</head>
<body onload = "generateFaces()">
    <h1> Game </h1>
    <p> Instructions </p>

    <div id = "right"></div>

    <div id = "left"> </div>

    <script>

    <!-- problem script here -->

    var temp = document.getElementById("left");
    console.log(temp); // displays <div> with its children <img>

    var temp2 = temp.lastElementChild;
    console.log(temp2); // returns null

    </script>

</body>

</html>

最佳答案

body 的onload在“问题脚本”中的 javascript 运行之前，事件不会触发。

这里的执行顺序基本上是:

h1 , p , #left , 和 #right附加到 DOM
脚本 #1 运行，记录空 #left div 和 null lastElementChild.
正文 onload事件触发并且脚本 #2 运行(generateFaces() 函数)。此时，<img>标记被插入到 DOM 中。

解决方法是确保脚本#1 在#2 之后运行:

<body onload="handleLoad()">

和 JS:

function handleLoad() {
    generateFaces()
    logStuff()
}

function logStuff() {
    var temp = document.getElementById("left");
    console.log(temp); // displays <div> with its children <img>

    var temp2 = temp.lastElementChild;
    console.log(temp2); // logs <img>
}

可能会在控制台中显示 #left在脚本 #1 运行时其中有图像。这只是控制台的一个怪癖；实际的日志记录是异步发生的，并且由于引用的变量同时发生变化，因此实际记录的值与 console.log() 时的值不同。被调用了。

您可以通过改变 setTimeout 来查看此行为generateFaces() 的持续时间函数调用:

function generateFaces() {

    var theLeftSide = document.getElementById("left");

    var numberFaces = 5;

    for (i = 0; i < numberFaces; i++) {
        var random_x = Math.random() * 400;
        var random_y = Math.random() * 400;
        var image = document.createElement("img")
        image.src = "smile.png";
        image.setAttribute("style", "top: " + random_y + "px;" + "left: " + random_x + "px;");
        theLeftSide.appendChild(image);
    }

    var theRightSide = document.getElementById("right");

    leftSideImages = theLeftSide.cloneNode(true);
    theRightSide.appendChild(leftSideImages);
    theRightSide.lastChild.removeChild(theRightSide.lastChild.lastChild);
}


var temp = document.getElementById("left");
console.log(temp); // displays <div> with its children <img>

var temp2 = temp.lastElementChild;
console.log(temp2); // returns null


setTimeout(generateFaces, 250) // play with this value

img {
    position: absolute
}

div {
    position: absolute;
    height: 500px;
    width: 500px
}

#right {
    border-left: solid black;
    left: 500px
}

<h1> Game </h1>
<p> Instructions </p>

<div id="right"></div>

<div id="left"> </div>

哦，注意你的 generateFaces()函数当前在 DOM 中创建多个具有相同 id 的元素。你会想要解决这个问题。

关于javascript - lastElementChild 返回 null，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45527546/

文章推荐： c# - 使用 LINQ 从数据集中填充对象属性

文章推荐： c - C 中指针赋值有什么区别？

文章推荐： c - 我试图制作绘制 8x8 chesstable 的 c 数组。请帮帮我吗？

文章推荐： javascript - 如何减去两倍力矩js？

javascript - lastElementChild 返回 null
我正在处理一个 Javascript 任务，它将页面拆分为两个 div 元素，然后在左侧的 div 中附加随机放置的图像，然后我使用 .cloneNode() 在右侧进行复制, 减去最后一个子图像。
javascript - lastElementChild 用于选择 ul 中的最后一个 li？
我正在尝试选择最后一个项目 Apple Orange Grape Banana Mango 所以我做了 var ul = document.getEl
javascript - 插入 div 作为 .lastElementChild 没有 'insertBefore' 没有 jQuery
好吧，我通常将 .box-4 作为 .s1 中的最后一个元素，如下所示: 并使用 JavaScript 在 .box-4 之前移动 .box-1: var box1 = docum

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - lastElementChild 返回 null