Question

这不是代码中的问题，但我无法理解我的问题背后的原因。首先，请看一下代码：

HTML：

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>Head First : Javascript</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css.css">
        <script type="text/javascript" src="cookie.js"></script>
    </head>
    <body>
        <div id="row1">
            <p>False</p>
            <p>False</p>
            <p>True</p>
            <p>True</p>
            <p>False</p>
        </div>
        <div id="row2">
            <p>False</p>
            <p>False</p>
            <p>True</p>
            <p>False</p>
            <p>False</p>
        </div>
        <div id="row3">
            <p>False</p>
            <p>True</p>
            <p>True</p>
            <p>True</p>
            <p>True</p>
        </div>
        <div id="row4">
            <p>True</p>
            <p>False</p>
            <p>False</p>
            <p>True</p>
            <p>False</p>
        </div>
        <script type="text/javascript" src="javascript.js"></script>
    </body>
</html>

CSS：

p{
    display:inline-block;
    width:50px;
    margin:30px;
    text-align:center;
}

JS：

function setElementColor(){
    var numberRows = parseInt(window.prompt("Enter total number of rows that you are seeing on the screen."));

    for(var i = 1; i <= numberRows; i++){
        var firstElement = document.getElementById('row' + i).firstElementChild;
        var counterElement;
        //For now, total elements in 1 row = 5
        for(var q = 1; q <= 5; q++){
            if(q == 1){
                firstElement.style.backgroundColor = "red";
                counterElement = firstElement.nextSibling;
            }
            else{
                counterElement.style.backgroundColor = "green";
            }
            counterElement = counterElement.nextElementSibling;
        }
    }
}
setElementColor();

现在，这可能是一个愚蠢的问题，但它会有意义（我相信）。您看到的代码是正确的，毫无疑问是有效的。但是，您能在第一个nextSibling声明中看到if属性吗？这让我很困惑。

现在，所有段落之间都有空格，因此这意味着所有浏览器都会将这些空格视为textNode（IE除外）。现在，通过逻辑的方式，那里应该有一个nextElementSibling属性，以便代码期待下一个Element，忽略comments / textNodes，但我尝试了，但这不起作用。

有人可以给我一个令人满意的理由吗？

Answer 1

在你的第一个if中，counterElement设置为nextSibling，为textnode

if
{
   counterElement = firstElement.nextSibling; //now counterElement is the textnode
}
else
{
}
counterElement = counterElement.nextElementSibling; //no matter if the counterElement is a textnode or a <p> the next element in the sibling tree is a <p>

但是无论q和if..else分支如何，在if..else块之后立即将counterElement设置为下一个Element兄弟，这样无论起始点是textnode还是包含段落，下一个元素将是兄弟段落。如果您在q == 1块

中设置counterElement = firstElement，代码的行为将相同

顺便说一下，为了摆脱固定的上限（列）并同时松开if..else，你也可以使用像

这样的东西

for(var i = 1; i <= numberRows; i++){
    var el = document.getElementById('row' + i).firstElementChild;
    var q = 1;
    while (el!=null){
        el.style.backgroundColor = q++ == 1 ? "red" : "green";
        el = el.nextElementSibling;
    }
}

nextSibling而不是nextElementSibling？

1 个答案: