nodeValue返回null（深入理解）

-1

這個想法是爲了控制日誌節點的值。但不是名稱，它返回null。我不明白爲什麼，因爲代碼對我來說似乎很好。所以，我想了解發生了什麼。我發現如何使它工作，但我不明白爲什麼我的代碼不起作用。代碼和結果：nodeValue返回null（深入理解）

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)

結果： link

來源

2017-05-05 BlackB0ne

當表示在JavaScript的HTML元素（DOM對象），一切是一個節點 - - 甚至一個元素中的文本。 But, not all nodes are elements.因此，當您獲得對<li>的引用時，該<li>不是包含該名稱的節點，而是該<li>的子文本節點。說這是元素節點永遠不要有自己的價值的另一種方式，他們的孩子做的，這就是爲什麼你越來越null當你試圖讓一個<li>

的nodeValue要獲得這些內容，必須導航一路下跌到該節點：

// 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中也暴露了其他的方式通過直來直去的內容元素中3210和.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>

來源

2017-05-05 16:23:48

因爲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>

來源

2017-05-05 16:22:37

nodeValue返回null（深入理解）

回答

相關問題