nodeValue возвращает ноль (глубокое понимание)

Question

Идея заключалась в том, чтобы консоль журнала значение узла. Но вместо имен он возвращает ноль. Я не понимаю почему, потому что код мне кажется нормальным. Итак, я хочу понять, что происходит. Я нашел, как заставить это работать, но я не понимаю, почему мой код не работает. Код и результаты:

HTML

 <div>Users:</div>
  <ul id="myList">
    <li>John</li>
    <li>Doe</li>
  </ul> 

JavaScript

let listNode = document.body.children[1].children[1]

console.log(listNode)

// Why not return node value?
let value = listNode.nodeValue
console.log(value)

Результаты: ссылка

Answer 1

При представлении элементов HTML (объектов DOM) в JavaScript все является узлом - даже текстом внутри элемента. Но не все узлы являются элементами. Поэтому, когда вы получили ссылку на <li>, тот <li> не был узел, который содержал имя, это был дочерний текстовый узел этого <li>, Еще один способ сказать, что узлы элементов никогда не имеют своих собственных значений, их дети имеют, и именно поэтому вы получаете null когда вы пытались получить nodeValue из <li>

Чтобы получить этот контент, вы должны пройти до этого узла:

// Get a node list of all the <li> child elements in the #myList list:
let listNodes = document.querySelectorAll("#myList > li");

// Go to the first <li> in the node list and then navigate the the text node contained within that node
let value = listNodes[0].firstChild.nodeValue;
console.log("The <li>.firstChild node value is: " + value);
console.log("The <li> node type is: " + listNodes[0].nodeType + " (1 = element node)");
console.log("The <li>.firstChild node type is: " + listNodes[0].firstChild.nodeType + " (3 = text node)");

<div>Users:</div>
 <ul id="myList">
    <li>John</li>
    <li>Doe</li>
 </ul>

Но DOM также предоставляет другие способы перехода к контенту внутри элемента через .textContent а также .innerHTML:

// Get a node list of all the <li> child elements in the #myList list:
let listNodes = document.querySelectorAll("#myList > li");

// .textContent allows you to extract the text of an element without navigating 
// into its text node
let value = listNodes[1].textContent;
console.log(value);

// While .innerHTML allows you to acces the HTML within an element:
value = listNodes[1].innerHTML;
console.log(value);

<div>Users:</div>
 <ul id="myList">
    <li>John</li>
    <li><a href="">Doe</a></li>
 </ul>

Answer 2

Так как Done в вашем li это узел, тексты это узлы также не только HTML теги

Ваш код после обновления:

let listNode = document.body.children[1].children[1]

console.log(listNode)

// Why not return node value?
let value = listNode.childNodes[0].nodeValue;
console.log(value)

<div>Users:</div>
  <ul id="myList">
    <li>John</li>
    <li>Doe</li>
  </ul>