快捷導(dǎo)航

JavaScript獲取元素節(jié)點(diǎn)及屬性的方法

更新時(shí)間：2025年04月29日 10:58:34 作者：盛夏綻放

JavaScript DOM是Web開發(fā)中用于操作HTML或XML文檔的一種標(biāo)準(zhǔn)接口,它將文檔結(jié)構(gòu)轉(zhuǎn)換為一個(gè)樹形結(jié)構(gòu),使得我們可以通過JavaScript來訪問和修改文檔中的各個(gè)部分,本文給大家介紹了JavaScript獲取元素節(jié)點(diǎn)及屬性的方法,需要的朋友可以參考下

一.獲取元素節(jié)點(diǎn)的方法

1.通過ID獲取

使用 document.getElementById(“元素ID”) 方法，通過元素的ID獲取單個(gè)元素。這是最常用的方法之一，因?yàn)镮D在頁面中是唯一的，可以直接定位到具體元素。

<div id="box"></div>
<script>
	//通過元素的ID獲取元素
	let box = document.getElementById("box")
</script>

2.通過標(biāo)簽名獲取

使用 document.getElementsByTagName(“標(biāo)簽名”) 方法，通過標(biāo)簽名獲取一組元素。這個(gè)方法返回一個(gè)偽數(shù)組，包含所有匹配指定標(biāo)簽名的元素。

<p></p>
<p></p>
<script>
	//通過元素的標(biāo)簽名獲取元素
	let label = document.getElementsByTagName("p")
</script>

3.通過類名獲取

使用 document.getElementsByClassName(“類名”) 方法，通過類名獲取一組元素。同樣返回一個(gè)偽數(shù)組，包含所有具有指定類名的元素。

<div class="box"></div>
<script>
	//通過元素的類名獲取元素
	let box = document.getElementsByClassName("box")
</script>

4.通過name屬性獲取

使用 document.getElementsByName(“name屬性的值”) 方法，通過name屬性獲取一組元素。此方法通常用于獲取表單元素，比如單選按鈕或復(fù)選框組。

<input type="text" name="example"/>
<script>
	//通過name屬性獲取元素
	let example = document.getElementsByName("example")
</script>

5.通過CSS選擇器獲取

使用 document.querySelector(“CSS選擇器”)方法

獲取的元素只有一個(gè)的時(shí)候

<div class="box"></div>
<script>
	//通過CSS選擇器獲取元素
	let box = document.querySelector("box")
</script>

使用 document.querySelectorAll(“CSS選擇器”)方法

獲取的元素有很多個(gè)的時(shí)候

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script>
	//通過CSS選擇器獲取元素
	let boxs = document.querySelectorAll("box")
</script>

6.獲取特殊元素

獲取body元素

document.body直接獲取body元素

// 使用document.body獲取body元素
var bodyElement = document.body;

// 輸出獲取到的元素
console.log(bodyElement); // 輸出：<body>...</body>

獲取html元素

document.documentElement獲取html元素

二.獲取元素屬性的方法

1.通過點(diǎn)符號(.)獲取屬性：

使用element.attributeName語法獲取元素的屬性值，其中element是獲取到的DOM元素對象，attributeName是要獲取的屬性名稱。

2.通過getAttribute()方法獲取屬性：

使用 element.getAttribute(“attributeName”) 方法獲取元素的屬性值，其中element是獲取到的DOM元素對象，"attributeName"是要獲取的屬性名稱。

3.通過dataset獲取自定義數(shù)據(jù)屬性：

使用 element.dataset.attributeName 語法獲取元素上的自定義數(shù)據(jù)屬性值，其中element是獲取到的DOM元素對象，attributeName是自定義數(shù)據(jù)屬性的名稱。

// 假設(shè)HTML文檔中有以下元素：
// <div id="myDiv" class="container" data-info="example">Hello World</div>

// 獲取元素
var myDiv = document.getElementById("myDiv");

// 通過點(diǎn)符號(.)獲取class屬性
var className = myDiv.className;
console.log(className); // 輸出："container"

// 通過getAttribute()方法獲取id屬性
var elementId = myDiv.getAttribute("id");
console.log(elementId); // 輸出："myDiv"

// 通過dataset獲取自定義數(shù)據(jù)屬性data-info
var info = myDiv.dataset.info;
console.log(info); // 輸出："example"

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

您可能感興趣的文章: