body代码

    <div class="box" a="QF001"></div>

0. 获取元素

    var oDiv = document.querySelector('.box')//获取的是一个伪数组,想要获取第一个,可以用中括号语法
    
    var oDiv = document.getElementsByClassName('box')[0]

1. 获取元素的某些属性

语法:

    元素.getAttribute('要查询的属性名')

返回值: 查询到属性时返回对应的属性值, 没有查询到时直接返回 null

    console.log(oDiv.getAttribute('a'))
    console.log(oDiv.getAttribute('class'))
    console.log(oDiv.getAttribute('b'))
    //查询到对应的属性值

2. 修改元素的某些属性

语法:

    元素.setAttribute('对应的属性名', '对应的属性值')

注意: 如果元素没有对应的属性名, 那么相当于是新增一个属性

    oDiv.setAttribute('a', 'QF999')//会更改属性值
    oDiv.setAttribute('b', 'qwer')//查询会新增b属性
    oDiv.setAttribute('class', 'new_box')//会更改属性值
    console.log(oDiv.getAttribute('a'))

3. 删除元素的某些属性

语法:

    元素.removeAttribute('要删除的属性名')
    
    
    
    
    
    oDiv.removeAttribute('class')
    oDiv.removeAttribute('a')

3.H5自定义属性

data- 表示该属性是一个自定义属性

data- 后边的内容才是属性名, 当前案例中属性名为a, 不是 data-a

= 后边的内容是属性值

每一个 元素/DOM节点 天生自带一个属性, 叫做 dataset, 是一个类似对象的数据结构

body代码

    <div data-a="100"></div>

2.0 获取标签

    var oDiv = document.querySelector('div')

2.1 访问元素的 dataset 属性 查询

    console.log(oDiv.dataset.a) // 100

2.2 增加一个 h5 自定义属性

    oDiv.dataset.age = 18  //标签中没有这个自定义属性, 所以是新增
    oDiv.dataset.a = 'QF666'  //标签中有这个自定义属性, 相当于做了修改操作
    

2.3 删除

    delete oDiv.dataset.a