html之DOM属性查找,操作

来源:互联网 发布:手机桌面特效软件 编辑:程序博客网 时间:2024/05/19 03:46
<div id='div0' class='div1' name='div2'></div>

DOM属性查找

定位查找

var oDiv = document.getElementById(‘div0’)
var oDiv = document.getElementsByClassName(‘div1’)
var oDiv = document.getElementsByTagName(‘div’)
var oDiv = document.getElementByName(‘div2’)

导航查找

parentElement 查找父级标签

nextElementSibling 查找下一个同级标签

previousElementSibling 查找上一个同级标签

children 查找所有的子标签

firstElementChild 查找第一个子标签

lastElementChild 查找最后一个字标签

操作

文本操作

.innerText 操作纯文本,所以不是很常用
.innerHTML操作纯文本和标签文本

属性操作

<div id='div0' class='div1' name='div2'></div>
var oDiv = document.getElementById('div0')

赋值操作

oDiv.id = ‘div10’
onDiv.id.setAttribute(‘id’,’div10’)

查找操作

console.log(oDiv.id)
console.log(oDiv.getAttribute(‘id’))

对class属性的处理!!!

className获取当前标签所有class属性的名字,类型string,所有的属性名为一个大的字符串。

classList.add()对class属性名进行添加,classList类型为object。

classList.remove()对class属性名进行移除