一、操作属性

我们获取到元素以后，可以直接操作DOM的属性，然后直接把效果展示在页面

1.innerHTML

获取元素内部的 HTML 结构

我们也可以直接给这个属性直接赋值，达到修改页面的效果

2.innerText

获取元素内部的文本（只能获取到文本，获取不到HTML标签）

我们也可以直接给这个属性直接赋值，达到修改页面的效果

二、获取元素的一些属性

1.获取元素的某些属性

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

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

2.修改元素的某些属性

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

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

3.删除元素的某些属性

语法：元素.removeAttribute('要删除的属性名')

三、h5 自定义属性

<div data-a="100"></div>
<script>
    // 0.获取标签
    var oDiv = document.querySelector('div')
    
    // 1.访问元素的dataset属性   查询
   console.log(oDiv.dataset.a) //100
   
   // 2.增加一个h5自定义属性
    oDiv.dataset.age = 18  //标签中没有自定义属性，所以是新增
    oDiv.dataset.a = 'QF666' //标签中有这个自定义属性，相当于做了修改操作
    
    // 3.删除
    // delete oDiv.dataset.a
</script>

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

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

= 后边的内容为属性值

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

四、获取元素样式与类名

获取元素样式

语法：元素.style.某个属性

注意：

• 1.我们也可以给这个语法重新赋值达到修改元素样式的效果（修改的是行内的样式）

• 2.这种语法获取到的元素样式，只能获取到行内样式

设置元素样式

     oDiv.style.width = 666 + 'px'
     oDiv.style.backgroundColor = 'yellow'

获取非行内样式

语法：window.getComputedStyle(元素).要查询的css属性

注意：这种方式获取到的属性是只读的

只读：能获取到，但是不允许修改

className

专门用来操作元素的类名

语法：元素.className

我们也可以给它重新赋值，达到修改元素的类名

2.classList

获取

新增

删除

// 0.获取元素
    var oDiv = document.querySelector('.box')
    // console.log(oDiv.className)
    // oDiv.className = 'qwer'

    // 2.1获取
    // console.log(oDiv.classList)

    // 2.2 新增
    // oDiv.classList.add('qwer')

    // 2.3 删除
    oDiv.classList.remove('new_box')