Javascript: Текстовый узел

Question

Я использую следующий фрагмент с сайта W3school. Когда я использовал элемент LI по прямой линии, он работает нормально. Автобус, как я выразился в формате, не работает. У кого-то есть ключ?

Это не работает:

<ul id="myList"> 
    <li>Coffee</li> 
    <li>Tea</li> 
    <li>Milk</li> 
</ul> 
<p>Click the button to replace the first item in the the list.</p> 
<button onclick="myFunction()">Try it</button> 

<script> 
function myFunction() { 
    var textnode = document.createTextNode("Water"); 
    var item = document.getElementById("myList").childNodes[0]; 
    item.replaceChild(textnode, item.childNodes[0]); 
} 
</script> 

Это работает:

<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul> 

<p>Click the button to replace the first item in the the list.</p> 

<button onclick="myFunction()">Try it</button> 

<script> 
function myFunction() { 
    var textnode = document.createTextNode("Water"); 
    var item = document.getElementById("myList").childNodes[0]; 
    item.replaceChild(textnode, item.childNodes[0]); 
} 
</script> 

Answer 1

1) childNodes является проблематичным, так как он не только сосчитать узлы визуально видеть, но и пробельные узлы и комментарии узлы. В следующем примере:

<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul> 

childNodes.length вернется 3 (для 3 элемента li узлов), но в этом примере (который производит тот же самый вывод HTML на экране!):

<ul id="myList2"> 
    <!-- a comment node --> 
    <li>Coffee</li> 
    <li>Tea</li> 
    <li>Milk</li> 
</ul> 

childNodes.length вернется 9! (5 пробельных узлов (тип: TEXT_NODE), 1 узел комментариев и 3 элемента). Вот почему элемент Node имеет атрибут nodeType, который вы можете проверить, чтобы определить тип. Но вы, вероятно, захотите использовать children вместо childNodes.

2) Простые решения иногда являются лучшими. Я бы прямо вперед подход:

document.querySelector("#myList li:first-of-type").innerHTML = "Water" 

Смотрите example fiddle (смотрите консольный вывод).

3) Инлайн-события обескуражены, лучше привязывать события к узлам, связывая их в js через addEventListener.

Вместо

<button onclick="myFunction()">Try it</button> 

использования

<button id="some-id">Try it</button> 

<script> 
    document.getElementById("some-id").addEventListener(myFunction); 
<script> 

4) Несмотря на то, что название будет означать, W3Schools не связан с w3c, а также из-за большой негативный опыт в прошлом , не рассматривается как очень авторитетный источник информации о веб-разработке. В последнее время они улучшились, но я по-прежнему не буду выбирать его в качестве основного источника информации. См. Также http://www.w3fools.com/