2015-10-15 4 views
1

Свойство JS nextSibling не работает для меня."Traversing DOM" nextSibling свойство не работает. (Javascript)

HTML:

<!DOCTYPE html> 
<html lang="en-US"> 
    <head> 
     <title>DOCUMENT OBJECT MODEL</title> 
     <meta charset="UTF-8"> 
     <link rel="stylesheet" type="text/css" href="css.css"> 
    </head> 
    <body> 
     <ul> 
      <li class="sameClass" id="one">first list item</li> 
      <li class="sameClass" id="two">second list item</li> 
      <li class="sameClass" id="three">third list item</li> 
      <li class="sameClass" id="four">fourth list item</li> 
     </ul> 
     <div id="getValues"></div> 
     <script src="javascript.js"></script> 
    </body> 
</html> 

CSS:

li.sameClass{ 
    background-color:black; 
    color:white; 
} 
li.targetClass{ 
    background-color:orange; 
    color:red; 
} 

JS:

var element = document.getElementById("one").nextSibling; 
element.className = "targetClass"; 

Этот код должен изменить внешний вид второго элемента списка с id="two", изменив его Classname на " targetClass». Это не работает, и document.querySelector("#one") тоже не работает.

В чем может быть проблема?

+0

Следующий брат узла с id 'one' является текстовым узлом. – crush

ответ

2

Вместо того, чтобы использовать nextSibling, используйте nextElementSibling.

nextSibling - Находит следующий родственный, даже если это не является элементом (то есть текстовый узел.)

nextElementSibling - Находит следующий родственный, что элемент.

+0

, который работает .... Thnx .. Но можете ли вы также объяснить? – codetalker

+0

Хорошо, понял. Thnx за помощь. – codetalker

+0

Да, конечно :) Я буду – codetalker

 Смежные вопросы

  • Нет связанных вопросов^_^