JavaScript獲取DOM元素的方法

DOM概述

DOM=DocumentObjectModel，文檔對(duì)象模型，DOM可以以一種獨(dú)立于平臺(tái)和語(yǔ)言的方式訪問(wèn)和修改一個(gè)文檔的內(nèi)容和結(jié)構(gòu)。換句話說(shuō)，這是表示和處理一個(gè)HTML或XML文檔的常用方法。有一點(diǎn)很重要，DOM的設(shè)計(jì)是以對(duì)象管理組織（OMG）的規(guī)約為基礎(chǔ)的，因此可以用于任何編程語(yǔ)言。最初人們把它認(rèn)為是一種讓JavaScript在瀏覽器間可移植的方法，不過(guò)DOM的應(yīng)用已經(jīng)遠(yuǎn)遠(yuǎn)超出這個(gè)范圍。Dom技術(shù)使得用戶頁(yè)面可以動(dòng)態(tài)地變化，如可以動(dòng)態(tài)地顯示或隱藏一個(gè)元素，改變它們的屬性，增加一個(gè)元素等，Dom技術(shù)使得頁(yè)面的交互性大大地增強(qiáng)。

1. 根據(jù)id屬性的值獲取元素,返回來(lái)的是一個(gè)元素對(duì)象

document.getElementById("id屬性的值");
document.getElementById("btn");

2. 根據(jù)標(biāo)簽名字獲取元素,返回來(lái)的是一個(gè)偽數(shù)組,里面保存了多個(gè)的DOM對(duì)象

document.getElementsByTagName("標(biāo)簽名字");
document.getElementsByTagName("li");

下面的幾個(gè),有的瀏覽器不支持

3. 根據(jù)name屬性的值獲取元素,返回來(lái)的是一個(gè)偽數(shù)組,里面保存了多個(gè)的DOM對(duì)象

document.getElementsByName("name屬性的值")
document.getElementsByName("name1")

4. 根據(jù)類樣式的名字來(lái)獲取元素,返回來(lái)的是一個(gè)偽數(shù)組,里面保存了多個(gè)的DOM對(duì)象

document.getElementsByClassName("類樣式的名字")
document.getElementsByClassName("cls")

5. 根據(jù)選擇器獲取元素,返回來(lái)的是一個(gè)元素對(duì)象

document.querySelector("選擇器的名字");
document.querySelector("#btn"); //id，類，標(biāo)簽等選擇器用的比較多

6. 根據(jù)選擇器獲取元素,返回來(lái)的是一個(gè)偽數(shù)組,里面保存了多個(gè)的DOM對(duì)象

document.querySelectorAll("選擇器的名字")

以上就是js獲取DOM元素的方式總結(jié)的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注億速云其它相關(guān)文章！