【掌握HTML DOM屬性操作】輕鬆獲取與設置網頁元素屬性

概述

HTML DOM（文檔東西模型）是操縱網頁元素的基石。經由過程DOM，開辟者可能輕鬆地拜訪跟修改網頁中的元素屬性。本文將具體介紹怎樣獲取跟設置網頁元素的屬性，幫助妳疾速控制DOM屬性操縱。

獲取元素屬性

1. 利用 getElementById 獲取屬性

// 獲取id為"myElement"的元素
var element = document.getElementById("myElement");

// 獲取屬性值
var value = element.getAttribute("attributeName");

2. 利用 getElementsByClassName 獲取屬性

// 獲取class為"myClass"的全部元素
var elements = document.getElementsByClassName("myClass");

// 獲取第一個元素的屬性值
var value = elements[0].getAttribute("attributeName");

3. 利用 getElementsByTagName 獲取屬性

// 獲取全部div元素
var elements = document.getElementsByTagName("div");

// 獲取第一個元素的屬性值
var value = elements[0].getAttribute("attributeName");

4. 利用 querySelector 獲取屬性

// 獲取第一個符合前提的元素
var element = document.querySelector("selector");

// 獲取屬性值
var value = element.getAttribute("attributeName");

5. 利用 querySelectorAll 獲取屬性

// 獲取全部符合前提的元素
var elements = document.querySelectorAll("selector");

// 獲取第一個元素的屬性值
var value = elements[0].getAttribute("attributeName");

設置元素屬性

1. 利用 setAttribute 設置屬性

// 設置id為"myElement"的元素的屬性
var element = document.getElementById("myElement");
element.setAttribute("attributeName", "newValue");

2. 直接修改屬性

// 直接修改id為"myElement"的元素的屬性
var element = document.getElementById("myElement");
element.attributeName = "newValue";

常用屬性示例

1. id 屬性

獲取：

var idValue = document.getElementById("myElement").getAttribute("id");

設置：

document.getElementById("myElement").setAttribute("id", "newId");

2. class 屬性

獲取：

var classValue = document.getElementById("myElement").getAttribute("class");

設置：

document.getElementById("myElement").setAttribute("class", "newClass");

3. style 屬性

獲取：

var styleValue = document.getElementById("myElement").getAttribute("style");

設置：

document.getElementById("myElement").style.color = "red";

總結

經由過程本文的進修，妳應當曾經控制了HTML DOM屬性操縱的基本方法。在現實開辟中，純熟應用DOM操縱可能幫助妳疾速實現各種網頁元素屬性的修改。壹直練習跟摸索，信賴妳會成為DOM操縱的妙手！