知识点总结
- 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）
offsetLeftoffsetTop
没有定位父级，是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都可以操作动态创建出来的节点，也可以操作已有的节点，都是剪切操作