Element 类型
- 标签汇总（省略,在html中总结）
- 操作属性方法
js">nodeName || tagName //访问元素的标签名
getAttribute(attrName) //获取属性
setAttribute(atrtName,attrVal) //设置属性
- 创建元素
js">var odiv = document.createElement('div')
odiv.id = 'myDiv'
odiv.className = 'box'
document.body.appendChild(odiv)
- 获取子元素
js">var oDiv = document.getElementById('myDiv')
for(let i=0,len = oDiv.childNodes.length;i<len;i++){
if(oDiv.childNodes[i].nodeType == 1){
//执行操作
}
}
- 元素遍历
| 方法 | 说明 |
|---|---|
| childElementCount | 返回子元素个数（不包括文本节点和注释），没有返回null |
| firstElementChild | 返回第一个子元素，firstChild的元素版 |
| lastElementChild | 返回最后一个子元素，lastChild的元素版 |
| previousElementSibling | 指向前一个同辈元素，previousSibling的元素版 |
| nextElementSibling | 指向后一个同辈元素，nextSibling的元素版 |
-
classList 属性
className 属性
操作类名需要通过className 添加 删除和替换HMTL5 之前
js"> var oUl = document.querySelector('ul')
console.log(oUl.className);
var index,classNames = oUl.className.split(/\s+/);
for (let i = 0; i < classNames.length; i++) {
if (classNames[i] == 'aa') {
index = i
break
}
}
classNames.splice(index,1)
oUl.className = classNames.join(' ')
**HTML5 新的API**
| 方法 | 说明 |
|---|---|
| add(value) | 添加class 如果已经存在就不添加了 |
| contains(value) | classList 中是否存在 存在 true 不存在 false |
| remove(value) | 删除指定类名 |
| toggle(value) | 如果列表中存在给定的值，删除它，如果不存在，添加它 |
js">obox.classList.remove('hidden')
obox.classList.add('active')
obox.classList.toggle('active')
if(obox.classList.contains('active')){
obox.classList.add('active')
}
- 自定义属性操作 dataset
js">var oDiv = document.getElementById('box')
var appId = oDiv.dataset.appId
var myName = oDiv.dataset.myName
oDiv.dataset.appId = 123
oDiv.dataset.myName = 'maktub'
- 插入标记
innerHTML 输出所有子节点（注释文本元素）
outerHTML 输出本身以及所有子节点（注释文本元素）
js"> <div class="box">
<ul class="aa bb cc">
<li></li>
<!-- aaa -->
<li></li>
<!-- aaa -->
<li></li>
<!-- aaa -->
<li></li>
</ul>
</div>
var obox = document.querySelector('.box')
console.log(obox.innerHTML);
console.log(obox.outerHTML);
obox.innerHTML = '<div>hello<div/>'
obox.innerHTML = '<div>hello again<div/>'
- children属性
js">let count= element.children.length
let first = element.children[0]
滚动API 后续整理
