JS DOM篇（二）Element 类型

Element 类型

1. 标签汇总（省略,在html中总结）
2. 操作属性方法

nodeName || tagName  //访问元素的标签名
getAttribute(attrName)  //获取属性
setAttribute(atrtName,attrVal) //设置属性

3. 创建元素

var odiv = document.createElement('div')
odiv.id = 'myDiv'
odiv.className = 'box'
document.body.appendChild(odiv)

4. 获取子元素

var oDiv = document.getElementById('myDiv')
for(let i=0,len = oDiv.childNodes.length;i<len;i++){
	if(oDiv.childNodes[i].nodeType == 1){
		//执行操作
	}
}

5. 元素遍历

方法	说明
childElementCount	返回子元素个数（不包括文本节点和注释），没有返回null
firstElementChild	返回第一个子元素，firstChild的元素版
lastElementChild	返回最后一个子元素，lastChild的元素版
previousElementSibling	指向前一个同辈元素，previousSibling的元素版
nextElementSibling	指向后一个同辈元素，nextSibling的元素版

6. classList 属性
   className 属性
   操作类名需要通过className 添加 删除和替换

   HMTL5 之前

  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)	如果列表中存在给定的值，删除它，如果不存在，添加它

obox.classList.remove('hidden')
obox.classList.add('active')
obox.classList.toggle('active')
if(obox.classList.contains('active')){
	obox.classList.add('active')
}

7. 自定义属性操作 dataset

var oDiv = document.getElementById('box')
var appId = oDiv.dataset.appId
var myName = oDiv.dataset.myName
oDiv.dataset.appId = 123
oDiv.dataset.myName = 'maktub'

8. 插入标记
   innerHTML 输出所有子节点（注释文本元素）
   outerHTML 输出本身以及所有子节点（注释文本元素）

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

9. children属性

let count= element.children.length
let first = element.children[0]

滚动API 后续整理