js-8

 DOM： Document object model 文档对象模型
  DOM把一个网页看成一个树的结构（层次）


      document
        |
       html
        |
    head    body
     |        |
    title    ul
              | 
          li li li li ... 
  js如何做特效： 布局------->特效 找元素，对其控制样式或结构
 DOM的操作： 查找元素  样式设置  结构控制 
 
 DOM相关概念
   1 节点（元素） ： 一切皆节点  有标签节点（标签 标记） 文本节点 属性节点
        <div id="box">我是内容</div>
  2 节点的结构层次  属性
     父节点  parentNode  见京东广告案例
     兄弟节点 
             下一个节点
              nextSibling 
              nextElementSibling ie9+ chrome 等
             上一个节点
              previousSibling  ie 678识别 
              previousElementSibling  ie9+ ff chrome
     兼容问题要出就出在ie 678,如何处理兼容问题（先处理正常的 后处理不正常）
  
     ietester 专门测试ie


    子节点  firstChild/firstElementChild   
            lastChild/lastElementChild
    孩子节点 
         childNodes: 选出全部的孩子 
            它是一个标准属性（w3c推荐，不建议使用），
     得到的是父亲中所有的孩子 包括标签节点 文本节点...
     FF、谷歌等高级版本浏览器把换行也看成孩子，
   我们关心的是元素节点孩子，可以借助于nodeType进行
   筛选    nodeType==1 表示该节点是标签元素节点
          children 我们更喜欢 选出所有的孩子，只选出
   是标签节点的孩子 ，注意在ie6 78 中会把注释看成孩子，
   避免开注释即可


    3 DOM节点的操作   一般都是方法
          创建节点（元素） 删除节点  插入节点 复制节点
     3.1 创建节点 
        document.createElement("p") 
       含义 在文档中创建了一个p元素
     3.2 插入节点
        父节点.appendChild(子元素) ;//在父亲末尾添加孩子
        父节点.insertBefore(参数1,参数2)；
     参数1表示具体添加的子元素 参数2表示参考的元素
     参数2的值为null,也是添加到末尾
       <div>
          <div></div>

       </div>
       <p></p>

     3.3 删除节点   removeChild()


     3.4 复制节点  cloneNode() 浅层复制 只复制父亲 孩子不复制
                   cloneNode(true) 深层复制 父亲孩子一起复制