js根据属性获取元素(JS获取元素属性-精简写法)

什么是JS获取元素属性

在网页中，每个元素都有一些属性，比如说高度、宽度、颜色等等。JS获取元素属性就是指在JS中获取这些属性值。通常情况下，我们需要获取元素的属性值才能进行一些操作，比如说修改样式、进行动画效果、绑定事件等等。

JS获取元素属性的精简写法

通常情况下，我们可以使用getElementById()、getElementsByClassName()、getElementsByTagName()等方法获取元素属性。但是，这些方法可能比较繁琐且代码量比较大，不太方便。因此，我们可以使用一些精简的写法来获取元素属性。

使用querySelector()方法

querySelector()方法是一种新式的方法，可以通过CSS选择器来获取元素。使用这种方法可以大大减少代码量。例如，我们要获取id为"test"的元素的文本内容，可以使用下面的代码：

var element = document.querySelector("#test").innerHTML;

同样的，我们也可以使用querySelector()来获取元素的其他属性，比如说class、name等等。

getAttribute()方法获取

getAttribute()是获取指定元素属性的值。该方法接受一个参数——属性名，返回该属性的值。例如，我们要获取id为"test"的元素的class属性，可以使用下面的代码：

var element = document.getElementById("test").getAttribute("class");

当然，getAttribute()方法也可以用来获取元素的其他属性，只需要将属性名替换即可。

直接使用属性名获取

在HTML中，我们可以直接通过元素名.属性名来获取元素属性的值，JS中也是同样的。例如，我们要获取id为"test"的元素的class属性，可以使用下面的代码：

var element = document.getElementById("test").class;

虽然直接使用属性名获取元素属性的值比较方便，但是这种方法并不适用于所有的属性。比如class属性可以直接使用，但是其他属性，比如style属性、innerHTML属性等等都不能通过这种方式获取。

总结

上面就是JS获取元素属性的精简写法，包括querySelector()方法、getAttribute()方法和直接使用属性名获取。这些方法都可以帮助我们简化代码，提高开发效率。不同的方法适用于不同的场景，选择正确的方法可以使我们的代码更简洁和易读。