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