DOM 元素获取属性 - JavaScript

在 JavaScript 中，我们可以使用 DOM（文档对象模型）来获取 HTML 元素的属性。获取元素属性的方法主要有两种：

1. 使用 getAttribute() 方法
2. 使用点号（.）来访问属性

使用 getAttribute() 方法

getAttribute() 方法可以获取任意属性的值。它的语法如下：

element.getAttribute(attributeName);

其中，element 是要获取属性的 HTML 元素对象，attributeName 是要获取的属性名。

例如，假设我们有如下 HTML 代码：

<p id="myParagraph" class="important">Hello, world!</p>

要获取该段落元素的 id 属性和 class 属性的值，可以使用如下 JavaScript 代码：

const myParagraph = document.getElementById("myParagraph");
const idValue = myParagraph.getAttribute("id"); // "myParagraph"
const classValue = myParagraph.getAttribute("class"); // "important"

使用点号（.）访问属性

另一种获取属性的方式是使用点号（.）来访问属性。这种方式适用于 HTML 中内置的一些属性，例如 id、class、value 等。

例如，我们可以使用如下代码来获取一个文本框（input）的值：

const myInput = document.getElementById("myInput");
const inputValue = myInput.value;

以上代码中，myInput.value 表示获取 myInput 元素的值属性。

需要注意的是，使用点号访问属性只能获取内置属性的值。如果要获取自定义属性的值，仍然需要使用 getAttribute() 方法。

以上是 DOM 元素获取属性的介绍。掌握这些方法可以方便我们在 JavaScript 中操作 HTML 元素的属性，进而实现更多的功能。