Question

<!DOCTYPE HTML>
<html lang="en">
<head>
    
</head>
<body>
<script>
    var htmlElement = document.documentElement;
    var headElement = htmlElement.firstChild;
    /*Create title and title content*/
    var titleTag = document.createElement("title");
    var titleText = document.createTextNode("my page");
    titleTag.appendChild(titleText);
    headElement.appendChild(titleTag);
    
    var bodyElement = headElement.nextSibling.nextSibling;
    /*create paragraph and content*/
    
    var count = 0;
    while (count < 5){
        var paraTag = document.createElement("p");
        var paraText = document.createTextNode("This is text");
        paraTag.appendChild(paraText);
        bodyElement.appendChild(paraTag);
        count++;
    }
    paraTag.id = "para";
    document.getElementById("para").style.color = "yellow"
    paraTag.previousSibling.style.color = "red";
    paraTag.previousSibling.previousSibling.style.color = "blue";
    paraTag.previousSibling.previousSibling.previousSibling.style.color = "green";
    
</script>
</body>
</html>

大家好。我是JS新手并使用DOM元素。

我的问题：

当我尝试按ID设置标记样式时，它只使最后一个元素变为黄色。为什么呢？
当我尝试通过引用nextSibling标记来设置标记样式时，它会给我null。为什么呢？
当我循环创建它向后构建的段落时，我需要使用previousSibling来获取元素吗？

Answer 1

您的所有问题都与1个事实相关联，即您将id分配给循环中的最后一项，一旦存在，循环paraTag将保留最后生成的<p>。

paraTag.id = "para";

当我尝试按ID设置标记样式时，它只使最后一个元素变为黄色。为什么？黄色由document.getElementById("para").style.color = "yellow"引起，因为paraTag持有最后一个

项，最后一个将为黄色
当我尝试通过引用nextSibling标记来设置标记样式时，它会给我null。为什么？ paraTag保留最后一项，没有下一项。
当我循环创建它向后构建的段落时，我需要使用previousSibling来获取元素吗？因为paraTag是您必须使用的最后一个previousSibling

我认为最好根据count在循环中为每个项目分配一个id，然后使用正确的id执行任何操作，如下所示：

 var count = 0;
    while (count < 5){
        var paraTag = document.createElement("p");
        var paraText = document.createTextNode("This is text");
        paraTag.appendChild(paraText);
        bodyElement.appendChild(paraTag);
        paraTag.id = "para_" + count;
    //you can get the item by document.getElementById("para0")
        count++;
    }

Answer 2

首先，对于每个标记，Id都应该是唯一的。因此，在这种情况下，只有最后一个元素的id为para。此外，paraTag包含最后一个<p>元素这就是为什么它只改变最后一个元素的价值。

你必须使用previousSibling，因为我提到你的paraTag包含<p>标记的最后一个元素，因此所有标记都是在此之前创建的。那就是为什么必须使用previousSibling来访问其余标记

DOM元素对象和样式

2 个答案: