DOM模型

DOM模型

DOM(文档对象模型)是针对HTML和XML的一个API，DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面某一部分。

IE中的所有DOM对象都是以COM对象(Component Object Model,组件对象模型)的形式实现的。因此,IE中的DOM对象与原生JavaScript对象的行为或活动特点并不一致。

Node

DOM1级规定了Node接口，12种节点类型都继承自该接口。但是在IE中无法访问到Node类型。

节点类型

Node常见的属性：

• nodeType:1代表元素节点,2属性节点,3文本节点(保证兼容性,使用数值进行比较。)
• nodeName:元素节点为标签名,
• nodeValue:元素节点值为null
• childNodes:保存着NodeList对象
• parentNode:父节点
• previousSibling和nextSibling:前一个和后一个兄弟节点
• firstChild和lastChild:指向第一和最后一个孩子节点
• ownerDocument:指向表示整个文档的文档节点

Node常见的方法：

• hasChildNodes():查询是否存在子节点
• appendChild():如果传入的节点在文档流中存在,则从一个位置移向另一个位置。返回移动的节点
• insertBefore():第一个参数为要插入的节点,第二个参数为参照的节点。如果参照节点为空,则执行效果与appendChild()相同
• replaceChild():第一个参数为替换的节点,第二个参数为被替换节点。
• removeChild():移除的节点任然在文档流中,但没有位置。
• cloneNode():用于创建调用这个方法的节点的一个完全相同的副本。若参数为true,则复制该节点的整个节点树。不会复制事件处理程序,IE下会复制事件处理程序。
• normalize():去掉空的文本节点，合并非空的文本节点为一个文本节点。

注意NodeList对象可以通过下标访问,也具有length属性,但并非Array的实例。DOM结构的变化能自动反映在NodeList对象中。

//将NodeList转换为数组
function convertToArray(nodes){
    var array = null;
    try{
        array = Array.prototype.slice.call(nodes,0);
    }catch(ex){
        array = new Array();
        for(var i=0,len=nodes.length;i

Document

document对象是HTMLDocument继承自Document类型)的一个实例,表示整个HTML页面,是window对象的一个属性

document常见属性：

• documentElement:指向元素
• body:指向元素
• doctype:访问信息,支持情况不一
• title:设置文档标题。设置它不会修改