操作属性

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

1. innerHTML

• 获取元素内部的 HTML 结构
• 我们也可以直接给这个属性重新赋值,达到修改页面的效果

2. innerText

• 获取元素内部的 文本(只能获取到文本,获取不到html标签)
• 我们也可以直接给这个属性重新赋值,达到修改页面的效果

这里先写一段标签,方便后续获取

<div id="box">
    <p>
      <span>我是span</span>
    </p>
</div>

    //获取div标签
    var oDiv = document.querySelector('#box')
    console.log(oDiv)
    //获取元素内部的 HTML 结构
    console.log(oDiv.innerHTML)
    //给获取到的HTML结构重新赋值,达到修改页面的效果
    oDiv.innerHTML = '<p><span>这个文本是通过JS来设置的</span></p>'

    //获取元素内部的 文本
    console.log(oDiv.innerText)
    //给获取到的 文本 重新赋值
    oDiv.innerText = '这个文本是通过JS来设置的'

3.操作元素属性

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

3.1 获取元素的某些属性

• 语法: 元素.getAttribute('要查询的属性名')
• 返回值:查询到属性时返回对应的属性值,没有查询到时直接返回 null

3.2 修改元素的某些属性

• 语法: 元素.setAttribute('对应的属性名','对应的属性值')
• 注意: 如果元素没有对应的属性名,那么相当于是新增一个属性

3.3 删除元素的某些属性

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

    //先获取元素
    var oDiv = document.querySelector('.box')
    console.log(oDiv) //获取到的是元素节点
    
    //3.1 获取元素的某些属性
    console.log(oDiv.getAttribute('a')) // 100
    console.log(oDiv.getAttribute('class')) //box
    console.log(oDiv.getAttribute('b'))//null
    
    //3.2 修改元素的某些属性
    oDiv.setAttribute('a','888')
    oDiv.setAttribute('b','qwer')
    oDiv.setAttribute('class','box2')
    console.log(oDiv.getAttribute('a')) //888
    console.log(oDiv.getAttribute('b')) // qwer
    console.log(oDiv.getAttribute('class')) // box2
     
    //3.3 删除元素的某些属性
    oDiv.removeAttribute('class')
    oDiv.removeAttribute('a')

3.4标签本身自带的属性,比如 id src type 之类的属性

• 获取: 元素.属性名
• 设置: 元素.属性名 = '属性值'

<div id="box">div 标签</div>

//获取元素
var box = document.querySelector('div')
//修改元素属性
box.id = 'content'

4. h5自定义属性的增(改)删查

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

• data- 表示该属性是一个自定义属性
• data- 后边的内容才是属性名,当前案例中属性名为 a,不是 data-a
• = 后边的内容是属性值
• 每一个 元素/DOM节点 天生自带一个属性叫做 dataset,是一个类似对象的数据结构

    //0.获取标签
    var oDiv = document.querySelector('div')

    //1.访问元素的dataset属性    查询
    console.log(oDiv.dataset.a) // 100

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

    //3.删除
    delete oDiv.dataset.a

5. 获取元素行内样式

<div class="box" style="background-color: blue;width="100px";height="100px" "></div>

• 语法:元素.style.某个属性
• 注意:
  1. 我们也可以给这个语法重新赋值,达到修改元素样式的效果(修改的是行内样式)
  2. 这种语法获取到的元素样式,只能获取到行内样式

    var oDiv = document.querySelector('.box')
    //1.获取元素样式
    console.log(oDiv.style.width)
    console.log(oDiv.style.height)
    // console.log(oDiv.style.background-color) //直接这样写相当于写了一个 oDiv.style.background - color,这是一个错误写法
    console.log(oDiv.style['backgroundColor']) // 中括号语法
    console.log(oDiv.style.backgroundColor) // 驼峰命名

    //2.设置元素样式
    oDiv.style.width = 666 + 'px'
    oDiv.style.backgroundColor = 'pink'

6. 获取元素 非行内样式

• 语法: window.getComputedStyle(元素).要查询的css属性
• 注意: 这种方式获取到的属性 是只读的,不允许修改

    console.log(window.getComputedStyle(oDiv).width)
    console.log(window.getComputedStyle(oDiv).backgroundColor)

7. 专门用来操作元素的 类名

7.1 className

• 语法:元素.className
• 我们也可以给她重新赋值,达到修改元素的类名

    oDiv.className = 'box1'
    console.log(oDiv.className) // box1

7.2 classList

<div class="box new_box"></div>

    //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')