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