DOM编程

一 JS如何操作DOM树

1. Document Object Model，文档对象模型
2. window.document,JS用document操作网页

二 获取元素(标签)

1. API

  window.idxxx或者直接idxxx;
  document.getElementById('idxxx');
  document.getElementsByTagName('div');
  document.getElementsByClassName('red');
  document.querySelector('#idxxx');
  document.querySelectorAll('.red');
  //一般推荐用后两个API，除非需要兼容IE才用前面的。

2. 获取特定元素

  //获取html元素
  document.documentElement
  //获取head元素
  document.head
  //获取body元素
  document.body
  //获取窗口（窗口不是元素）
  window
  //获取所有元素
  document.all

3. 获取的元素是一个对象，以div元素为例，它的原型链分为以下六层：

  HTMLDivElement.prototype
  HTMLElement.prototype
  Element.prototype
  Node.prototype
  EventTarget.prototype
  Object.prototype

4. 节点

   节点包含元素（Element，也叫标签Tag），文本（Text），注释（Comment），文档（Document）等。

三 节点的增加操作

1. 创建一个标签节点

document.createElement('div')

2. 创建一个文本节点

document.createTextNode('你好')

3. 插入节点

//创建的标签默认处于JS线程中，必须把它插入到head或body里面，它才会生效。
document.body.appendChild()
已在页面中的元素.appendChild()

4. 执行以下代码

test1.appendChild(div)
test2.appendChild(div)
//div最后会出现在test2里面，因为一个元素不能出现在两个地方，除非复制一份

四 节点的删除操作

旧方法parentNode.removeChild()
新方法childNode.remove()

五 节点的修改操作

1. 该标准属性

改class:div.className
改class:div.classList.add
改style:div.style='width:100px;color:blue;'
改style的一部分:div.style.backGroundColor
改data-*属性:div.dataset.x

2. 读标准属性

div.classList/a.href
div.getAttribute('class')/a.getAttribute('href')

3. 改事件处理函数

div.onclick默认为null
//如果给div绑定了事件监听函数，那么点击div的时候，会调用这个函数，fn.call(div,event)，div会被当做this，event则包含了点击事件的所有信息，如坐标

4. 改内容

div.innerText
div.textContent

5. 改html内容

div.innerHTML

6. 改标签

div.innerHTML=''//先清空
div.appendChild(newdiv)//再加内容

7. 改父级元素

newParent.appendChild(div)

六 节点的查询操作

//查父代
node.parentNode
node.parentElement
//查子代
node.childNodes
node.children
//查兄弟姐妹
node.parentNode.childNodes
node.parentNode.children
//查看老大
node.firstChild
//查看最后一个孩子
node.lastChild
//查看上一个兄弟
node.previousSibling
//查看下一个兄弟
node.nextSibling
//遍历一个div里面的所有元素
travel=(node,fn)=>{
   fn(node)
   if(node.children){
      for(let i=0;i<node.children.length;i++){
         travel(node.children[i],fn)
      }
   }
}