js获取元素属性

JavaScript中可以使用`getAttribute()`方法获取元素的属性值，也可以使用点语法直接获取元素属性。

**使用`getAttribute()`方法获取元素属性值** `getAttribute()`方法是用于获取元素的指定属性的值。语法如下： ```javascript element.getAttribute(attributeName) ``` 其中，`element`为要获取属性值的元素节点，`attributeName`为要获取的属性名。

示例： ```html ``` ```javascript var divElement = document.getElementById("myDiv"); var classValue = divElement.getAttribute("class"); console.log(classValue); // 输出："container" ```

**使用点语法获取元素属性值** 除了使用`getAttribute()`方法，我们还可以使用点语法直接获取元素的属性值。点语法的格式如下： ```javascript element.attributeName ``` 其中，`element`为要获取属性值的元素节点，`attributeName`为要获取的属性名。

示例： ```html ``` ```javascript var divElement = document.getElementById("myDiv"); var classValue = divElement.class; console.log(classValue); // 输出："container" ```

需要注意的是，使用点语法只能获取不以数字或特殊字符开头且不包含特殊字符的属性，否则会报错。此时应该使用`getAttribute()`方法。

**如何获取自定义属性** 在HTML标签中，我们可以定义自己的属性，并赋予值。在JavaScript中，我们可以通过`getAttribute()`方法或点语法来获取自定义属性的值。

示例： ```html ``` ```javascript var divElement = document.getElementById("myDiv"); var dataValue = divElement.getAttribute("data-info"); console.log(dataValue); // 输出："This is a custom attribute" ``` ```javascript var divElement = document.getElementById("myDiv"); var dataValue = divElement.dataset.info; console.log(dataValue); // 输出："This is a custom attribute" ```

**获取元素的多个属性值** 如果需要同时获取一个元素的多个属性值，可以通过多次调用`getAttribute()`方法或使用多个点语法来实现。

示例： ```html ``` ```javascript var divElement = document.getElementById("myDiv");

var idValue = divElement.getAttribute("id"); console.log(idValue); // 输出："myDiv"

var classValue = divElement.getAttribute("class"); console.log(classValue); // 输出："container"

var dataValue = divElement.getAttribute("data-info"); console.log(dataValue); // 输出："This is a custom attribute"

// 或者

var idValue = divElement.id; console.log(idValue); // 输出："myDiv"

var classValue = divElement.class; console.log(classValue); // 输出：undefined

var dataValue = divElement.dataset.info; console.log(dataValue); // 输出："This is a custom attribute" ```

以上是关于JavaScript获取元素属性的介绍，希望能够帮助到你。如果有任何疑问，请随时追问。