0320JS_DOM

0320JS_DOM

DOM 结构

Document object model 文档对象模型；DOM把一个网页看成树的结构。

JS如何做特效：布局->特效 找元素，对其控制样式；

DOM相关概念

• 节点：一切皆有节点

• 节点的结构层次

  • 父节点 parentNode
  • 兄弟节点
    
    • 下一个节点：nextSibling(IE678识别),nextElementSibling;
    • 上一个节点：previousSibling(IE678识别),previousElementSibling;
  • 子节点 firstChild,firstElementChild/lastChild,lastElementChild,lastChild

  • 孩子节点：

    • childNodes:选出全部的孩子，得到的是类似数组的变量。包括标签节点，文本节点(w3c推荐，但不建议使用),如下1个ul下面6个li,但var chlids=ul.chlidNodes得到的是13个元素的数组。

    <ul>1
        <li>2</li>
        3<li>4</li>
        5<li>6</li>
        7<li>8</li>
        9<li>10</li>
        11<li>12</li>13
    </ul>

    • children 只选出标签节点的所有孩子，但在IE678会将注释看成节点，所以要避免将注释写在需要查找的范围内。
• 节点的操作
  
  • 创建节点：document.createElment()
  • 插入节点：
    
    • 父亲节点.appendChild(子元素) //放在末尾
    • 父亲节点.insertBefore(子元素,参考元素) //放在参考元素前
  • 删除节点：父亲节点.removeChild()
  • 复制节点：
    
    • cloneNode() 浅层复制，只复制父亲，不复制孩子；
    • cloneNode(true) 复制父亲的同时，复制孩子；

兼容问题：先写正常的，再写不正常的。用逻辑||将多个代码赋值到一个变量。

pre = previousElementSibling || previousSibling