JavaScript基础——DOM2和DOM3

来源：互联网发布：linux服务器监听端口编辑：程序博客网时间：2024/05/19 02:23

DOM2级规范定义了一些模块，用于增强DOM1级。"DOM2级核心"为不同的DOM类别引入了一些与XML命名空间有关的方法。

这些变化只在使用XML或XHTML文档时才有用；对于HTML文档没有实际意义。除了与XML命名空间有关的方法外，

"DOM2级核心"还定义了以编程方式创建Document实例的方法，也支持了创建DocumentType对象。

"DOM2级样式"模块主要针对操作元素的样式信息而开发，其特性简要总结如下。

1）每个元素都有一个关联的style对象，可以用来确定和修改行内的样式。

2）要确定每个元素的计算样式(包括应用给它的所有CSS规则)，可以使用getComputedStyle()方法。

3）IE不支持getComputedStyle()方法，但为所有元素都提供了能够返回相同信息currentStyle属性。

4）可以通过document.styleSheets集合访问样式表。

5）除IE之外的所有浏览器都支持针对样式表的这个接口，IE也为几乎所有相应的DOM功能提供了自己的一套属性和方法

"DOM2级遍历和范围"模块提供了与DOM结构交互的不同方式，简要总结如下：

1）遍历即使用NodeIterator或TreeWalker对DOM执行深度优先的遍历。

2）NodeIterator是一个简单的接口，只允许以一个节点的步幅前后移动。而TreeWalker在提供相同功能的同时，

还支持在DOM结构的各个方向上移动，包括父节点、同辈节点和子节点等方向。

3）范围是选择DOM结构中特定部分，然后再执行相应操作的一种手段。

4）使用范围选区可以在删除文档中某些部分的同时，保持文档结构的格式良好，或者复制文档中的相应部分。

5）IE8及更早版本不支持"DOM2级遍历和范围"模块，但它提供了一个专有的文本范围对象，可以用来完成简单的基于

文本的范围操作。IE9完全支持DOM遍历。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>DOM2和DOM3</title>    <style>    </style></head><body><div id="myDiv" style="padding-right: 10px"></div><script src="l12.js"></script></body></html>

/* * DOM2和DOM3 */function cl(x){    console.log(x);}/** * 12.1 DOM变化 *///12.1.1 针对XML命名空间的变化//12.1.1.1 Node类型的变化//12.1.1.2 Document类型的变化//12.1.1.3 Element类型的变化//12.1.1.4 NameNodeMap类型的变化//12.1.2 其他方面的变化//12.1.2.1 DocumentType类型的变化//12.1.2.2 Document类型的变化//12.1.2.3 Node类型的变化//12.1.2.4 框架的变化/** * 12.2 样式 *///12.2.1 访问元素的样式var myDiv=document.getElementById("myDiv");myDiv.style.backgroundColor="red";myDiv.style.width="100px";myDiv.style.height="200px";myDiv.style.border="1px solid black";cl(myDiv.style.paddingRight);//=>10px//12.2.1.1 DOM样式属性和方法//cssText、length、parentRule、getPropertyCSSValue(propertyName)//getPropertyPriority(propertyName)、getPropertyValue(propertyName)//item(index)、removeProperty(propertyName)、setProperty(propertyName,value,priority)myDiv.style.cssText="width:25px;height:100px;background-color:green";cl(myDiv.style.cssText);//=>width: 25px; height: 100px; background-color: green;for(var i= 0,len=myDiv.style.length;i<len;i++){    cl(myDiv.style[i]);//=>width height background-color}var prop,value, i,len;for(i=0,len=myDiv.style.length;i<len;i++){    prop=myDiv.style[i];    value=myDiv.style.getPropertyValue(prop);    cl(prop+":"+value);//width:25px height:100px background-color:green}//12.2.1.2 计算的样式//document.defaultView.getComputedStyle(); (W3C)//document.getElementById("myDiv").currentStyle;    (IE)//12.2.2 操作样式表//12.2.2.1 CSS规则//12.2.2.2 创建规则//12.2.2.3 删除规则//12.2.3 元素大小//12.2.3.1 偏移量//offsetWidth、offsetHeight、offsetLeft、offsetTop//12.2.3.2 客户区大小//clientHeight、clientWidth//12.2.3.3 滚动大小//scrollHeight、scrollWidth、scrollLeft、scrollTop//12.2.3.4 确定元素大小//getBoundingClientRect()方法/** * 12.3 遍历 *///12.3.1 NodeIterator//12.3.2 TreeWalker/** * 12.4 范围 *///12.4.1 DOM中的范围//12.4.1.1 用DOM范围实现简单选择//12.4.1.2 用DOM范围实现复杂选择//12.4.1.3 操作DOM范围中的内容//12.4.1.4 插入DOM范围中的内容//12.4.1.5 折叠DOM范围//12.4.1.6 比较DOM范围//12.4.1.7 复制DOM范围//12.4.1.8 清理DOM范围//12.4.2 IE8及更早版本中的范围//12.4.2.1 用IE范围实现简单的选择//12.4.2.2 使用IE范围实现复杂的选择//12.4.2.3 操作IE范围中的内容//12.4.2.4 折叠IE范围//12.4.2.5 比较IE范围//12.4.2.6 复制IE范围

0 0