改變parentNode.innerHTML後，不能訪問parentNode

Question

說我有以下DOM結構和腳本

var test = document.getElementById('test'); 
 
test.parentNode.innerHTML += 'hello'; 
 
console.log(test.parentNode); // null 
 
console.log(document.getElementById('test').parentNode); // normal result

<div> 
 
<div id="test"></div> 
 
</div>

如上腳本說，第一輸出null，而第二輸出實際節點，有誰知道爲什麼第一個輸出null而不是正常節點？

Answer 1

重置innerHTML屬性後，瀏覽器解析設置的內容並創建新的元素。 test變量不引用也具有test id的新元素。原始的test元素從DOM分離並且沒有父元素。 test和document.getElementById('test')指的是不同的DOM元素對象。

使用createTextNode和appendChild方法代替，看到了差距：

var test = document.getElementById('test'); 
test.parentNode.appendChild(document.createTextNode('hello')); 
console.log(test.parentNode); 

Answer 2

在使用test.parentNode.innerHTML += 'hello';（等於test.parentNode.innerHTML = test.parentNode.innerHTML + 'hello';）追加HTML，它實際上是重新創建元左右，test（這是參考元素）在dom中不再可用。

使用createTextNode方法相反創建textNode和使用appendChild方法，其保持在其它元件追加。

var test = document.getElementById('test'); 
 
test.parentNode.appendChild(document.createTextNode('hello')); 
 
console.log(test.parentNode); 
 
console.log(document.getElementById('test').parentNode);

<div> 
 
    <div id="test"></div> 
 
</div>

Answer 3

VAL + = B實際上是相同VAL VAL = + B。用這種方式編寫時，應該更明顯地重新創建父代中的所有元素。

如果您想在不破壞現有元素的情況下追加，請使用appendChild而不是innerhtml。

Answer 4

下面的行：

test.parentNode.innerHTML += 'hello'; 

爲快捷方式：

test.parentNode.innerHTML = test.parentNode.innerHTML + 'hello'; 

這意味着，測試被移除並且由相同的標記+字符串"hello"替換。但是您的測試參考不再在文檔中。

您可以嘗試

test.parentNode.appendChild(document.createTextNode('hello')); 

Answer 5

你在英語的代碼會說：

• 給我用ID「測試」的一個引用DOM節點
• 現在採取DOM節點出來的DOM樹並將其替換爲文本爲<div id="test"></div>Hello的新節點（不是拼寫錯誤，它將正好放入該字符串）。
• 現在向我展示您從樹中取出的DOM節點的父節點（aha！但它不再在DOM中！）
• 現在，獲取對ID爲「test」的DOM節點的引用（它發現，在兩個步驟中插入的東西。
• 告訴我該節點的父（沒問題）

原來的DOM節點「測試」仍然是在內存中，但不再在文檔中。您可以通過查看test.innerHTML來看到，您將看到它仍然只是原始文本，因爲您正在查看內存中的DOM節點。

個

var test = document.getElementById('test'); 
 
test.parentNode.innerHTML += 'additional text'; 
 
console.log(test.parentNode); // null 
 
console.log(test.innerHTML); 
 
console.log(document.getElementById('test').parentNode); // normal result

<div> 
 
<div id="test">Original text</div> 
 
</div>