[妙味DOM]第一课：DOM基础概念、操作

知识点总结

• childNodes、children子节点列表集合、nodeType节点类型、nodeName、nodeValue、attributes属性列表集合

        childNodes和children都只包含子节点，不包含孙节点。
        区别：
        childNodes--
            标准下：包含元素和文本节点，也会包含非法嵌套的子节点
            非标准下：只包含元素节点，IE7以下不会包含非法嵌套的子节点（IE6）
        children--
        标准模式下和非标准模式下：只包含元素节点(推荐使用此方法)

        nodeType 为节点类型，总共有12种节点，常用是：
            元素节点 1
            属性节点 2
            文本节点 3
            注释节点 8
            文档节点 9

        attributes[i].name 属性名称   attributes[i].value  属性值

• firstChild、lastChild、nextSibling、previousSibling

        --------------------------------------------------------
        firstElementChild        firstChild
        --------------------------------------------------------
        firstElementChild : 只获取元素节点、ie6/7/8不支持
        firstChild  :  标准下包括空白文本节点、非标准下元素节点
        var oFirst = 元素.firstElementChild || 元素.firstChild
        children[0]  第一个元素节点

        同理：
        lastElementChild          lastChild
        nextElementSibling        nextSibling
        previousElementSibling    previousSibling

• parentNode offsetParent、offsetLeft offsetTop

      parentNode  获取父级

       offsetParent 表示有定位的父结点

        　　没定位到body,有定位到定位的父结点
　　　　 　　 IE6:
　　　　　　　　　自身元素定位：html
　　　　　　　　　父级触发了layout：触发的那个父级（判断是否触发：元素.currentStyle.hasLayout）

        offsetLeft\offsetTop
      　　  没有定位父级，是html
        　　有定位父级，则是到定位的那个父级
　　　　　　　IE6：
　　　　　　　　　　自身没定位，到body
　　　　　　　　　　自身定位，到定位的父级

        getPos函数的封装，用来实现不管有没有定位，都是到body

• style.width clientWidth offsetWidth、style.height clientHeight offsetHeight

        style.width 行间样式宽
        clientWidth 可视区宽（width+padding)
        offsetWidth 占位宽(width+padding+border,即可视区宽+border)

        height同样如此

• getAttribute()、setAttribute()、removeAttribute()

    []和.无法获取用户自定义属性，而getAttribute可以获取自定义属性
    getAttribute可以获取元素属性的实际值（src、href、url),IE7下还是会返回绝对路径

    getAttribute(属性名称)
    setAttribute(属性名称,属性值)
    removeAttribute(属性名称)

• createElement()、appendChild()、insertBefore()、removeChild()、replaceChild()

        document.createElement(标签)
        父级.appendChild(要添加的元素) 追加在最后
        父级.insertBefore(要添加的元素,插入到哪个元素前面)
　　　　　　 在IE下，如果第二个参数不存在，(IE8,ie7,ie6)会报错
　　　　　　 在标准浏览器下，第二个参数不存在，会以追回的方式来添加，即：父级.appendChild(要添加的元素）
　　　　　　 因此需要做兼容：
　　　　　　 if (第二个参数) {

　　　　　　　　　　父级.insertBefore(要添加的元素,插入到哪个元素前面)

　　　　　　 } else {

　　　　　　　　　　父级.appendChild(要添加的元素　　　　　　 }

        父级.removeChild(要删除的元素)

        被替换节点的父级.replaceChild(新节点，被替换的节点)，是剪切操作

        appendChild、insertBefore、replaceChild都可以操作动态创建出来的节点，也可以操作已有的节点，都是剪切操作