nextSibling而不是nextElementSibling？

這不完全是代碼中的問題，但我無法理解我的問題背後的原因。首先，請看看代碼：nextSibling而不是nextElementSibling？

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();

現在，這可能是一個愚蠢的問題，但它是有道理的（我相信）。你所看到的代碼是正確的，毫無疑問是有效的。但是，您能否在第一個if聲明中看到nextSibling屬性？這就是讓我困惑的原因。

現在，所有段落之間都有空格，所以這意味着所有瀏覽器都會將這些空格看作textNode（IE除外）。現在，通過邏輯手段，應該有一個nextElementSibling屬性，以便代碼期待下一個元素，忽略comments/textNodes，但是我嘗試了它，但這不起作用。

有人能給我一個令人滿意的理由背後呢？

來源

2015-11-10 codetalker

看看http://stackoverflow.com/questions/24226571/what-is-the-difference-between-node-nextsibling-and-childnode-nextelementsibling – vacsora

什麼進入'輸入propmt' – ozil

@ ozil，我們需要輸入總行數，在這種情況下，4 – codetalker

在你的第一個如果，配合件被設置爲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 = firstElement在Q == 1塊

順便說一句，擺脫固定的上界（列），並在同一時間鬆動的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; 
    } 
}

來源

2015-11-10 13:18:04

這真是太神奇了...... thnx很多 – codetalker

nextSibling而不是nextElementSibling？

回答

相關問題