[妙味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都可以操作动态创建出来的节点，也可以操作已有的节点，都是剪切操作