2017-06-05 107 views
1

我試圖通過其與該DOM的其他關係來選擇一個元素:更改DOM內容通過.firstChild財產

<div id="dad"> 
    <p>son</p> 
    <p>son</p> 
</div> 

正如在這裏看到:

let daddy = document.getElementById('dad'); 
daddy.firstChild.textContent = "Im first"; 

JS做什麼,而不是改變其內部的HTML,插入字符串作爲'爸爸'<div>的第一個元素。

這是有道理的,但是,我怎樣才能利用這個屬性來選擇這個第一個孩子,並取代它的內容?而不是插入內容作爲元素的第一個孩子。

回答

0

#dad的第一個孩子是文本節點,因爲<div id="dad"><p>之間有空格。如果刪除空格,它工作正常:

let daddy = document.getElementById('dad'); 
 
daddy.firstChild.textContent = "Im first";
<div id="dad"><p>son</p><p>son</p></div>

或者你可以使用firstElementChild屬性:

let daddy = document.getElementById('dad'); 
 
daddy.firstElementChild.textContent = "Im first";
<div id="dad"> 
 
    <p>son</p> 
 
    <p>son</p> 
 
</div>

0

孩子()方法返回所有直接選擇元素的子項。

此方法只遍歷DOM樹中的單個級別。

$("#dad").children(":first").text("Im first"); 
+0

謝謝,但需要純JS。已經解決了。 – Biomehanika

0

另外,遍歷子節點,直到找到第一:

let daddy = document.getElementById('dad'); 
 
var child = daddy.firstChild; 
 
while(child && child.nodeType !== 1) child = child.nextSibling; 
 
child.textContent = "Im first";
<div id="dad"> 
 
    <p>son</p> 
 
    <p>son</p> 
 
</div>

0

你們看到的預計。這是因爲文本節點比其他元素稍微不明顯。看着你的html:

<div id="dad"> 
    <p>son</p> 
    <p>son</p> 
</div> 

你有你的#dad格,在其內部的3個文本節點和2元紙幣。你現在可以發現文字節點嗎? (提示,新行和標籤是文本)。由於這個原因,現在很多瀏覽器都實現了firstElementChild

您也可以在修改之前確認nodeType === 1。你可以閱讀有關不同的node types here。您也可以刪除所有的空白區域,但這會造成難以讀取的代碼:

<div id="dad"><p>son</p><p>son</p></div>