在本篇文章中，我們將學習在 JavaScript 中提取元素的第一個子元素。

使用 Node.firstChild 在 JavaScript 中提取元素的第一個子元素

Node.firstChild 返回樹中節(jié)點的第一個子節(jié)點，如果節(jié)點沒有子節(jié)點則返回 null。 這是 Node 接口的只讀 firstChild 屬性。

語法：

Node.firstChild

例如，我們有一個顯示 Hello World! 的段落標簽。 它里面的文本在另一個 span 標簽中。

HTML 代碼：

<p id="firstPara">
    <span>Hello World!</span>
</p>

JavaScript 代碼:

const firstPara = document.getElementById('firstPara');
console.log(firstPara.firstChild);

輸出:

"#text"

當你在任何瀏覽器中運行上面的代碼時，瀏覽器的控制臺都會顯示#text。 這是因為默認情況下會插入一個文本節(jié)點，以在段落結(jié)束標記和跨度開始標記之間保留空白。

每個空白自動創(chuàng)建一個#text 節(jié)點，從單個空格到多個空格、換行符、制表符等。

為避免文本節(jié)點問題，您可以從源中刪除空格或使用 Element.firstElementChild 僅返回第一個元素節(jié)點。

使用 Node.childNodes 在 JavaScript 中提取元素的第一個子節(jié)點

Node.childNodes 返回指定元素的子節(jié)點的活動 NodeList，索引 0 分配給第一個子節(jié)點。 這是 Node 接口的只讀 childNodes 屬性。

子節(jié)點包含項目、文本和評論。

節(jié)點集合的元素是對象，而不是字符串。 要從節(jié)點對象中檢索數(shù)據(jù)，請使用它們的屬性。

例如，要獲取第一個子節(jié)點的名稱，可以使用 elementNodeReference.childNodes[0].nodeName。

默認情況下，ChildNodes 包括所有子節(jié)點，包括元素和非元素。 它返回一個包含節(jié)點子節(jié)點的活動 NodeList。

例如，我們有一個顯示 Hello World! 的段落標簽。 它里面的文本在另一個 span 標簽中。

HTML 代碼:

<p id="firstPara">
    <span>Hello World!</span>
</p>

JavaScript 代碼:

const firstPara = document.getElementById('firstPara');
console.log(firstPara.childNodes[0]);

輸出:

"#text"

與上一節(jié)類似，默認情況下，插入一個文本節(jié)點以在段落標記的末尾和 span 標記的開頭之間保留空白。

使用 Element.children 在 JavaScript 中提取元素的第一個子元素

Element.children 屬性返回一個實時 HTML 集合，其中包含調(diào)用它的元素的所有子元素。

Element.children 和 Node.childNodes 之間的唯一區(qū)別是 Element.children 僅包含元素節(jié)點，而 Node.childNodes 獲取所有子節(jié)點，包括非元素節(jié)點，如文本和注釋。

HTML 集合是節(jié)點的 DOM 元素子元素的活動的、有序的集合。 您可以使用 item() 方法訪問集合的每個子節(jié)點。

例如，我們有一個顯示 Hello World! 的段落標簽。 它里面的文本在另一個 span 標簽中。

HTML 代碼：

<p id="firstPara">
    <span>Hello World!</span>
</p>

JavaScript 代碼:

const firstPara = document.getElementById('firstPara');
console.log(firstPara.children[0]);

輸出:

"Hello World!"

當你在任何瀏覽器中運行上面的代碼時，瀏覽器的控制臺都會顯示“Hello World!”。 這是因為此屬性僅返回調(diào)用節(jié)點的 DOM 元素。

到此這篇關(guān)于JavaScript提取元素中第一個子元素的實現(xiàn)方法的文章就介紹到這了,更多相關(guān)JavaScript提取子元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論