DOM属性操作_操作dom元素属性的方法有哪些-CSDN博客

本文链接：https://blog.csdn.net/weixin_63836026/article/details/124186606

"本文详细介绍了如何在JavaScript中获取和操作HTML元素的属性，包括使用querySelector和getAttribute方法获取内置属性，以及如何设置和移除属性值。此外，重点讲解了H5的自定义属性，强调了自定义属性需以"data-"开头，并演示了如何设置、获取自定义属性值，同时探讨了使用dataset对象获取多单词连接属性时的驼峰命名规则。"

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.获取元素属性

我们知道通过document.querySelector()等方法可以获取到元素的id或者类属性：

const box = document.querySelector('div')
console.log(box.id)

或者我们使用这个getAttribute()方法：

const box = document.querySelector('div')
console.log(box.getAttribute('id'))

tips：这俩个方法都只能获取到内置的属性值，也就是元素自身自带的属性值，那我们可不可以自定义一个属性来获取呢？

二.属性值操作

box.id = 'hello'

//或者
element.setAttribute('属性','属性值')
box.setAttribute('id','669')

//element.setAttribute('属性','属性值')方法主要用于自定义属性

element.removeAttribute('属性值')
//去除之后打印台输出，我们会发现null
//说明没有id这个值，所以我们判断为element.removeAttribute('属性值')去除的是属性以及属性值
//并不是单单去掉属性值

三.H5的自定义属性

1.设置H5自定义属性

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

*H5规定自定义属性需要data开头说属性名并赋值

当然，我们可以不再HTML页面来书写H5的自定义属性，我们可以在JS中给到指定元素一个自定义属性：

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

2.获取自定义属性

用我们之前阐述到的方法：

element.getAttribute('data-index')

不过H5又给我们新增了俩种方法：

element.dataset.data-index

element.dataset['data-index']

这时我们会发现获取到的值为undefined，为什么呢？

tips：如果自定义属性中有多个-号链接的单词，那我们在使用H5方法获取的时候，就需要使用驼峰命名法，并且不需要书写date前缀

element.dataset.index

element.dataset['index']