DOM——操作元素属性

最新推荐文章于 2024-05-01 14:49:36 发布

原创最新推荐文章于 2024-05-01 14:49:36 发布 · 690 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#大数据

Javascript 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了如何在JavaScript中获取和设置HTML元素的固有属性及自定义属性，包括使用`element.getAttribute`和`element.setAttribute`方法。同时，探讨了H5的自定义属性，以data-为前缀，并展示了如何通过`dataset`属性来操作这些自定义属性。文章通过实例代码演示了属性的获取、设置和移除过程。

1.获取元素属性

获得元素的固有属性

element.属性

获得元素的自定义属性

element.getAttribute('属性')

2.设置元素属性值

设置固有属性

element.属性='值'

设置自定义属性或固有属性

element.setAttriute('属性','值')

移除属性

element.removeAttribute('属性')

<body>
  <div id="demo" index="1"></div>
  <script>
    var div = document.querySelector('div');
    //1.获取元素属性
    console.log(div.id);
    console.log(div.getAttribute('index'))
    //2.设置元素属性
    console.log(div.id = 'id1');
    div.setAttribute('id', 2);
    console.log(div.id);
    //3.移除属性
    div.removeAttribute('index');
    console.log(div.index)
  </script>
</body>

3.H5自定义属性

H5规定自定义属性以data-开头作为属性名并赋值

<div data-index="1"></div>

或者使用JS设置

element.setAttribute('data-index',2)

获取H5自定义属性

兼容性获取

element.getAttribute('data-index')

H5新增

element.dataset.index

element.dataset['index']

<body>
  <div getTime="20" data-index="2" data-list-name="andy"></div>
  <script>
    var div = document.querySelector('div');
    console.log(div.getAttribute('getTime'));
    div.setAttribute('data-time', 20);
    console.log(div.getAttribute('data-index'));
    //h5新增的获取自定义属性的方法
    //dataset是一个集合，里面存放了所有以打data开头的自定义属性
    console.log(div.dataset);
    console.log(div.dataset.index);
    console.log(div.dataset['index']);
    //自定义属性出现很长的‘-’接词，用驼峰命名法
    console.log(div.dataset.listName);
  </script>
</body>