1. getElementById()

用法：

根據(jù)元素的 id 屬性獲取單個(gè)元素。

const element = document.getElementById('myId');

返回值：

返回一個(gè)匹配的元素對(duì)象，如果沒(méi)有找到，則返回 null。

適用場(chǎng)景：

適合在頁(yè)面中唯一標(biāo)識(shí)的元素。由于 id 必須是唯一的，因此返回的總是一個(gè)單一元素。

2. getElementsByClassName()

用法：

通過(guò)類(lèi)名獲取元素集合（HTMLCollection）。

const elements = document.getElementsByClassName('myClass');

返回值：

返回一個(gè) HTMLCollection 對(duì)象，可以通過(guò)索引訪問(wèn)各個(gè)元素。如果沒(méi)有找到任何匹配的元素，返回的集合為空。

適用場(chǎng)景：

適用于需要獲取同一類(lèi)名的多個(gè)元素，比如一組按鈕或列表項(xiàng)。

3. getElementsByTagName()

用法：

通過(guò)標(biāo)簽名獲取元素集合。

const elements = document.getElementsByTagName('div');

返回值：

返回一個(gè) HTMLCollection，包含所有匹配的元素。如果沒(méi)有找到任何匹配的元素，返回的集合為空。

適用場(chǎng)景：

適用于需要獲取特定標(biāo)簽的所有元素，比如所有的或元素。

4. querySelector()

用法：

使用 CSS 選擇器獲取第一個(gè)匹配的元素。

const element = document.querySelector('.myClass'); // 類(lèi)選擇器
const elementById = document.querySelector('#myId'); // ID 選擇器
const elementByTag = document.querySelector('div'); // 標(biāo)簽選擇器

返回值：

返回一個(gè)元素對(duì)象，如果沒(méi)有找到匹配的元素，則返回 null。

適用場(chǎng)景：

非常靈活，適用于根據(jù)復(fù)雜選擇器獲取單個(gè)元素，如組合選擇器、屬性選擇器等。

5. querySelectorAll()

用法：

使用 CSS 選擇器獲取所有匹配的元素集合。

const elements = document.querySelectorAll('.myClass');

返回值：

返回一個(gè) NodeList，包含所有匹配的元素。如果沒(méi)有找到任何匹配的元素，返回的集合為空。

適用場(chǎng)景：

適合獲取多個(gè)元素，并且可以使用復(fù)雜的選擇器。

6. children

用法：

獲取某個(gè)元素的所有子元素（不包括文本節(jié)點(diǎn)）。

const parentElement = document.getElementById('parentId');
const children = parentElement.children;

返回值：

返回一個(gè) HTMLCollection，包含所有子元素。如果沒(méi)有子元素，返回的集合為空。

適用場(chǎng)景：

當(dāng)需要獲取某個(gè)元素的直接子元素時(shí)使用，方便進(jìn)行 DOM 操作。

7. firstChild 和 lastChild

用法：

獲取某個(gè)元素的第一個(gè)或最后一個(gè)子節(jié)點(diǎn)。

const parentElement = document.getElementById('parentId');
const firstChild = parentElement.firstChild;
const lastChild = parentElement.lastChild;

返回值：

返回第一個(gè)或最后一個(gè)子節(jié)點(diǎn)，可能是元素節(jié)點(diǎn)或文本節(jié)點(diǎn)。如果沒(méi)有子節(jié)點(diǎn)，返回 null。

適用場(chǎng)景：

當(dāng)需要快速訪問(wèn)某個(gè)元素的第一個(gè)或最后一個(gè)子節(jié)點(diǎn)時(shí)使用。

8. parentNode

用法：

獲取某個(gè)元素的父節(jié)點(diǎn)。

const element = document.getElementById('myId');
const parent = element.parentNode;

返回值：

返回父節(jié)點(diǎn)，如果當(dāng)前元素沒(méi)有父節(jié)點(diǎn)（例如，它是根元素），則返回 null。

適用場(chǎng)景：

當(dāng)需要獲取某個(gè)元素的直接父元素時(shí)使用，適用于 DOM 操作。

到此這篇關(guān)于JavaScript中獲取DOM元素的方法小結(jié)的文章就介紹到這了,更多相關(guān)JavaScript獲取DOM元素內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論