概述

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操作的高手！