DOM的定义及DOM相关

时间:2021-04-17 02:30:55

DOM : Document Object Model 文档对象模型
文档:html页面
文档对象:页面中元素
文档对象模型:定义 为了能够让程序(js)去操作页面中的元素

DOM会把文档看作是一棵树,同时定义了很多方法来操作这棵数中的每一个元素(节点)

DOM节点

getElementById
getElementByTagName
document
document.body

元素.childNodes : 只读 属性 子节点列表集合;标准下:包含了文本和元素类型的节点,也会包含非法嵌套的子节点;非标准下:只包含元素类型的节点,ie7以下不会包含非法嵌套子节点。childNodes只包含一级子节点,不包含后辈孙级以下的节点。

DOM节点的类型有很多种 12种。

元素.nodeType : 只读 属性 当前元素的节点类型
元素节点 : 1
属性节点 : 2
文本节点 : 3

元素.attributes : 只读 属性 属性列表集合

for (var i=; i<oUl.childNodes.length; i++) {

        if ( oUl.childNodes[i].nodeType ==  ) {
oUl.childNodes[i].style.background = 'red';
} }

元素.children : 只读 属性 子节点列表集合;标准下:只包含元素类型的节点;非标准下:只包含元素类型的节点。

元素.firstChild : 只读 属性 第一个子节点;标准下:firstChild会包含文本类型的节点;非标准下:只包含元素节点。

元素.firstElementChild : 只读 属性 标准下获取第一个元素类型的子节点。

元素.lastChild || 元素.lastElementChild :最后一个子节点

元素.nextSibling || 元素.nextElementSibling: 下一个兄弟节点

元素.previousSibling || 元素.previousElementSibling :上一个兄弟节点

元素.parentNode : 只读 属性 当前节点的父级节点。

元素.offsetParent : 只读 属性 离当前元素最近的一个有定位属性的父节点;如果没有定位父级,默认是body;ie7以下,如果当前元素没有定位默认是body,如果有定位则是html;ie7以下,如果当前元素的某个父级触发了layout,那么offsetParent就会被指向到这个触发了layout特性的父节点上。

元素.offsetLeft[Top] : 只读 属性 当前元素到定位父级的距离(偏移值);到当前元素的offsetParent的距离
                                  如果没有定位父级
                                            offsetParent -> body
                                            offsetLeft -> html

如果有定位父级
                                 ie7以下:如果自己没有定位,那么offsetLeft[Top]是到body的距离
                                             如果自己有定位,那么就是到定位父级的距离
                                             其他:到定位父级的距离。

元素的宽高:width height

      style.width : 样式宽
      clientWidth : 可视区宽  = 样式宽 + padding
      offsetWidth : 占位宽 = 样式宽 + padding + border = 可视区宽 + border

元素.getAttribute(属性名称); 方法 获取指定元素的指定属性的值

元素.setAttribute(属性名称,属性值); 方法 给指定元素指定的属性设置值

元素.removeAttribute(属性名称); 方法 移除指定的元素的指定的属性

document.createElement(标签名称); 创建元素

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

父级.appendChild(要添加的元素) 方法 追加子元素

父级.insertBefore(新的元素,被插入的元素) 方法 在指定元素前面插入一个新元素;在ie下如果第二个参数的节点不存在,会报错;在其他标准浏览器下如果第二个参数的节点不存在,则会以appendChild的形式进行添加

 if ( oUl.children[] ) {
oUl.insertBefore( oLi, oUl.children[] );
} else {
oUl.appendChild( oLi );
}

父级.replaceChild(新节点,被替换节点) 替换子节点

appendChild,insertBefore,replaceChild都可以操作动态创建出来的节点,也可以操作已有节点