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对象中。

1
2
3
4
5
6
7
8
9
10
11
12
13
//将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<len;i++){
array.push(nodes[i]);
}
}
return array;
}

Document

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

document常见属性:

  • documentElement:指向<html>元素
  • body:指向<body>元素
  • doctype:访问<!DOCTYPE>信息,支持情况不一
  • title:设置文档标题。设置它不会修改<title>标签
  • URL:获得url,不可设置
  • domain:获取域名,只可设置为URL包含的域
  • referrer:取得来源页面的url,不可设置

特殊集合,这些集合都是HTMLCollection对象

  • forms 文档中所有的form元素
  • images 文档中所有的img元素
  • links 所有带href的a元素

HTMLCollection具有namedItem方法,可以根据name属性获得值

1
2
3
4
var imgs = document.getElementsByTagName("img");
imgs.namedItem("firstImg");
//获得name属性值为firstImg的元素(只返回一个),等价于
imgs["firstImg"];

document常见方法:

  • getElementById()取得元素通过ID
  • getElementsByTagName():取得元素通过标签名
  • getElementsByName():返回所有name属性为参数的HTMLCollection集合。
  • implementation.hasFeature(‘HTML’,’1.0’) 检测浏览器是否支持,DOM的功能和版本
  • createElement()创建Element
  • createAttribute()创建属性节点
  • createTextNode()创建文本节点
  • createDocumentFragement() 创建文档片段
  • write/writeln():输出内容到html文档中,页面加载期间不会重写内容,页面加载后会重写内容

将domain设置为相同,内外两个页面就可以相互操作。设置domain只能设置为更简短,不能设置为更长。例如:将www.xwork.com和p2p.xwork.com 都设置为 xwork.com 两个页面就能互相操作。

Element类型

Element类型用于表现XML或HTML元素,提供了对元素标签名、子节点及特性的访问。所有HTML元素都由HTMLElement类型表示,不是直接通过这个类型,也是通过它的子类型来表示。

每个HTML元素都存在的标准特性

  • id,元素在文档中的唯一标识符
  • title,有关元素的附加说明信息
  • className,与元素class对应
  • clientWidth/clientHeight 内部宽高
  • clientLeft/clientTop 距离左边/上边的长度
  • innerHTML 这个元素内容的文本
  • attributes属性包含一系列节点,每个节点的nodeName是特性的名称,而节点的nodeValue是特性的值。
    • getNamedItem(name) 返回nodeName属性等于name的节点
    • removeNamedItem(name) 移除nodeName属性等于name的节点
    • setNamedItem(node) 向列表中添加节点(参数需要是Attr类型),节点的nodeName属性为索引
    • item(pos) 返回数字pos位置处的节点
    • specified 每个属性节点具有该属性用于判断元素是否设置了该属性

常见方法:

  • addEventListener()/removeEventListener() 添加/移除事件处理函数
  • getAttribute()/hasAttribute()/setAttribute() 获取/含有/设置属性
  • getElementsByTagName() 通过标签获取元素
  • setAttributeNode()/getAttributeNode() 设置/获取属性节点
  • querySelector()/querySelectorAll() 根据条件查询一个/全部节点
  • 元素遍历API
    • childElementCount 子元素个数
    • firstElementChild 第一个子元素
    • lastElementChild 最后一个子元素
    • previousElementSibling 前一个同辈元素
    • nextElementSibling 后一个同辈元素

Text

文本节点由Text类型标识,包含的是可以照字面解释的纯文本内容。文本节点中保存的字符会经过编码,像><&字符会被转义。

常见方法:

  • appendData(text) 将text添加到节点的末尾
  • deleteData(offset,count) 从offset指定的位置开始删除count个字符
  • insertData(offset,text) 在offset指定的位置插入text
  • replaceData(offset,count,text) 用text替换offset指定的位置开始到offset+count为止处的文本
  • splitText(offset) 从offset指定的位置将当前文本节点分成两个文本节点。
  • substringData(offset,count) 提取从offset指定的位置到offset+count为止的字符

Comment

Comment代表注释节点,可以通过nodeValue或data取得值。拥有Text相同的字符串操作方法,除了splitText之外。

CDATASection

CDATASection只针对XML文档,表示的是CDATA区域。继承自Text,也是具有除splitText()之外的所有字符串操作方法。

DocumentType

DOM1级中,DocumentType对象不能动态创建,只能通过解析文档代码的方式来创建。支持的浏览器会把它保存在document.doctype中。

  • name 表示文档类型名称
  • entities 文档类型描述的实体的NamedNodeMap对象(通常为空)
  • notations 文档类型描述的符号的NamedNodeMap对象(通常为空)

DocumentFragment

DOM规定文档片段(document fragment)是一种”轻量级”的文档,可以包含和控制节点,但不会像完整的文档那样占用额外的资源,在文档中没有对应的标记。

可以将文档片段作为一个”仓库”来使用,可以将文档仓库中的文档节点一次性添加到文档的标签中,避免重复渲染。一个节点不能同时存在于文档片段和文档中。

Attr

元素的特性在DOM中以Attr类型表示。

  • name 特性名称
  • value 特性值
  • specified 用以区别特性是否为指定的

HTML5 DOM扩展

  • getElementByClassName()可以使用复数个类名作为参数,类名之间用空格作为分隔符
  • 元素的classList属性,类名的集合
    • add(clsName):添加一个类,如果已存在则不添加
    • contains(clsName):判断是否包含类名,包含返回true,否则返回false
    • remove(clsName):从列表中删除给定的字符串
    • toggle(clsName):如果列表中已经存在给定的值,删除;否则,添加
  • document.activeElement 指向当前获得焦点的元素,文档加载期间document.activeElement的值为null
  • document.hasFocus()确定文档是否获得了焦点
  • HTMLDocument的变化
  • readyState属性,document(loading正在加载,complete已经加载完成)
  • document.compatMode(标准模式”CSS1Compat”,混杂模式”BackCompat”)
  • document.head(表示文档的< head>元素)
  • document.charset文档使用的字符集,document.defaultCharset文档默认应该使用的字符集
  • 为元素添加非标准的属性,但要添加前缀data-,用于表示提供的属性信息与渲染无关;使用JS取的属性时不需要加data-前缀
  • innerHTML不同的浏览器读取/写入(标签),可能略有差别。
  • outerHTML返回调用它的元素及所有子节点的HTML标签;写入的内容替换元素节点。需要将移除的节点的事件删除减少内存占用。

专有DOM扩展

强制IE浏览器以特定的模式渲染页面<meta http-equiv=”X-UA-Compatible” content=”IE=IEVersion”>

IEVersion值

  • children只包含元素子节点
  • contains()是否包含节点
  • compareDocumentPosition()确定两个节点间的位置关系(掩码1:无关,2:居前,3:居后,8:包含,16:被包含)
  • innerText返回所有文本节点拼接的值,写入将删除所有子节点。textContent是DOM Level3规定的一个属性
  • outerText与outerHTML类似用文本节点取代元素。

各级DOM

DOM0

JavaScript在早期版本中提供了查询和操作Web文档的内容API(如:图像和表单),在JavaScript中定义了定义了’images’、’forms’等

1
2
document.images[0]
document.forms['user']

这实际上是未形成标准的试验性质的初级阶段的DOM,现在习惯上被称为DOM0,即:第0级DOM。DOM0在W3C进行标准备化之前出现,还处于未形成标准的初期阶段

DOM1

DOM1级主要定义了HTML和XML文档的底层结构。在DOM1中,DOM由两个模块组成:DOM Core(DOM核心)和DOM HTML。其中,DOM Core规定了基于XML的文档结构标准,通过这个标准简化了对文档中任意部分的访问和操作。DOM HTML则在DOM核心的基础上加以扩展,添加了针对HTML的对象和方法,如:JavaScript中的Document对象

DOM2与DOM3

在DOM1的基础上DOM2和DOM3引入了更多的交互能力,也支持了更高级的XML特性。DOM2和DOM3将DOM分为更多具有联系的模块。DOM2级在原来DOM的基础上又扩充了鼠标、用户界面事件、范围、遍历等细分模块,而且通过对象接口增加了对CSS的支持。DOM1级中的DOM核心模块也经过扩展开始支持XML命名空间。在DOM2中引入了下列模块,在模块包含了众多新类型和新接口:

  • DOM视图(DOM Views):定义了跟踪不同文档视图的接口
  • DOM事件(DOM Events):定义了事件和事件处理的接口
  • DOM样式(DOM Style):定义了基于CSS为元素应用样式的接口
  • DOM遍历和范围(DOM Traversal and Range):定义了遍历和操作文档树的接口

DOM3进一步扩展了DOM,在DOM3中引入了以下模块:

  • DOM加载和保存模块(DOM Load and Save):引入了以统一方式加载和保存文档的方法
  • DOM验证模块(DOM Validation):定义了验证文档的方法
  • DOM核心的扩展(DOM Style):支持XML 1.0规范,涉及XML Infoset、XPath和XML Base

参考文献

JS高程(第三版)
使用document.domain实现跨域
MDN HTMLCollection
MDN Element
DOM产生与发展

坚持原创技术分享,您的支持将鼓励我继续创作!