在本篇文章中，我們將學(xué)習(xí)在 JavaScript 中提取元素的第一個(gè)子元素。

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

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

語法：

Node.firstChild

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

HTML 代碼：

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

JavaScript 代碼:

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

輸出:

"#text"

當(dāng)你在任何瀏覽器中運(yùn)行上面的代碼時(shí)，瀏覽器的控制臺(tái)都會(huì)顯示#text。 這是因?yàn)槟J(rèn)情況下會(huì)插入一個(gè)文本節(jié)點(diǎn)，以在段落結(jié)束標(biāo)記和跨度開始標(biāo)記之間保留空白。

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

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

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

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

子節(jié)點(diǎn)包含項(xiàng)目、文本和評(píng)論。

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

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

默認(rèn)情況下，ChildNodes 包括所有子節(jié)點(diǎn)，包括元素和非元素。 它返回一個(gè)包含節(jié)點(diǎn)子節(jié)點(diǎn)的活動(dòng) NodeList。

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

HTML 代碼:

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

JavaScript 代碼:

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

輸出:

"#text"

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

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

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

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

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

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

HTML 代碼：

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

JavaScript 代碼:

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

輸出:

"Hello World!"

當(dāng)你在任何瀏覽器中運(yùn)行上面的代碼時(shí)，瀏覽器的控制臺(tái)都會(huì)顯示“Hello World!”。 這是因?yàn)榇藢傩詢H返回調(diào)用節(jié)點(diǎn)的 DOM 元素。

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

最新評(píng)論