获取属性值 - 前端学习教程_ 前端_前端开发

在DOM对象中可以使用“element.属性”的方式来获取内置的属性值，但是DOM对象并不能直接使用点语法获取到自定义属性的值，那么如何获取自定义属性值呢？在DOM中，可以使用getAttribute('属性')方法来返回指定元素的属性值。

下面我们通过案例演示如何获取属性值，示例代码如下。

 1  <body>

 2   <div id="demo" index="1" class="nav"></div>

 3   <script>

 4    var div = document.querySelector('div');

 5    console.log(div.id);             // 结果为：demo

 6    console.log(div.getAttribute('id'));   // 结果为：demo

 7    console.log(div.getAttribute('index')); // 结果为：1

 8   </script>

 9  </body>

上述代码中，第5、6行分别使用element.属性和element.getAttribute()两种方式获取div元素的内置属性id，输出结果为demo。虽然以上两种方式都可以获取内置属性值，但是在实际运用中推荐使用“element.属性”这种较为简洁的方式。第7行使用getAttribute('index')方式来获取开发者自定义的index属性，输出结果为1。