操作属性

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

innerHTML

获取元素内部HTML结构

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

例:

<div id="box">
        <p>
            <span>我是一个嵌套结构</span>
        </p>
</div>
<script>
var oDiv = document.querySelector('#box')//获取到id名为box的元素

//获取元素内部HTML结构
console.log(oDiv)//打印oDiv的内容
console.log(oDiv.innerHTML)

//属性重新赋值
oDiv.innerHTML = '<p><span>我是通过js的innerHTML修改的内容</span></p>'
</script>

innerText

获取元素内部的文本(只能获取到文本,获取不到html标签)

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

<div id="box">
        <p>
            <span>我是一个嵌套结构</span>
        </p>
</div>
<script>
    console.log(oDiv.innerText)//打印内容为  我是一个嵌套结构
    
    //属性重新赋值(只能修改文本内容)
    oDiv.innerText = '<p><span>我是通过js的innerText设置的</span></p>' </script>

h5自定义属性

data-

表示是一个自定义属性,后面的才是属性名

= 后是属性值

例

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

其中 data- 表示为自定义属性 后面的 a 才是这个元素的属性名

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

访问元素的dataset属性

查询

语法

元素.dataset.属性名

var a = document.querySelector('div')

console.log(a.dataset.a) //查询元素a里属性a的属性值

增加h5自定义属性

语法

元素.dataset.新增属性名 = 属性值

var a = document.querySelector('div')

a.dataset.b = 12306 //在元素a里新增一个属性b并赋值为12306

删除一个h5自定义属性

语法

delete 元素.dataset.删除的属性名

var a = document.querySelector('div')
delete a.dataset.a  //删除元素a中的属性a

修改h5自定义属性

语法

元素.dataset.修改属性名 = 修改的属性值

var a = document.querySelector('div')
a.dataset.a = 'qf001' //把元素a里属性a的属性值修改为qf001

获取元素的某些属性

语法

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

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

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

<script>

var a = document.querySelector('.box')

console.log(a.getAttribute('a'))//查询class名为box元素的a属性的属性值

console.log(a.getAttribute('b'))//因为元素a里没有b属性所以返回null

</script>

修改元素的某些属性

语法

元素.setAttribute('想要修改的属性名','修改的的属性值')

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

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

<script>

var a = document.querySelector('.box')

a.setAttribute('a','1234')//修改元素a里的a属性的属性值为1234

a.setAttribute('b','0000')//因为元素a中没有属性b所以相当于在元素a中新增一个属性b并赋值

</script>

删除元素的某些属性

语法

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

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

<script>

var a = document.querySelector('.box')

a.removeAttribute('a')//删除元素a中的属性a  

</script>