1. getElementById()

用法：

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

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

返回值：

返回一個匹配的元素對象，如果沒有找到，則返回 null。

適用場景：

適合在頁面中唯一標識的元素。由于 id 必須是唯一的，因此返回的總是一個單一元素。

2. getElementsByClassName()

用法：

通過類名獲取元素集合（HTMLCollection）。

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

返回值：

返回一個 HTMLCollection 對象，可以通過索引訪問各個元素。如果沒有找到任何匹配的元素，返回的集合為空。

適用場景：

適用于需要獲取同一類名的多個元素，比如一組按鈕或列表項。

3. getElementsByTagName()

用法：

通過標簽名獲取元素集合。

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

返回值：

返回一個 HTMLCollection，包含所有匹配的元素。如果沒有找到任何匹配的元素，返回的集合為空。

適用場景：

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

4. querySelector()

用法：

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

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

返回值：

返回一個元素對象，如果沒有找到匹配的元素，則返回 null。

適用場景：

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

5. querySelectorAll()

用法：

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

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

返回值：

返回一個 NodeList，包含所有匹配的元素。如果沒有找到任何匹配的元素，返回的集合為空。

適用場景：

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

6. children

用法：

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

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

返回值：

返回一個 HTMLCollection，包含所有子元素。如果沒有子元素，返回的集合為空。

適用場景：

當需要獲取某個元素的直接子元素時使用，方便進行 DOM 操作。

7. firstChild 和 lastChild

用法：

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

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

返回值：

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

適用場景：

當需要快速訪問某個元素的第一個或最后一個子節(jié)點時使用。

8. parentNode

用法：

獲取某個元素的父節(jié)點。

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

返回值：

返回父節(jié)點，如果當前元素沒有父節(jié)點（例如，它是根元素），則返回 null。

適用場景：

當需要獲取某個元素的直接父元素時使用，適用于 DOM 操作。

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

最新評論