JavaScript基础——DOM2和DOM3

最新推荐文章于 2022-07-27 20:39:24 发布

bboyjoe

最新推荐文章于 2022-07-27 20:39:24 发布

阅读量904

点赞数

分类专栏： javascript 文章标签： javascript dom

本文链接：https://blog.csdn.net/bboyjoe/article/details/50130313

版权

javascript 专栏收录该内容

54 篇文章 2 订阅

订阅专栏

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范围

bboyjoe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础——DOM2和DOM3

DOM2级规范定义了一些模块，用于增强DOM1级。"DOM2级核心"为不同的DOM类别引入了一些与XML命名空间有关的方法。这些变化只在使用XML或XHTML文档时才有用；对于HTML文档没有实际意义。除了与XML命名空间有关的方法外，"DOM2级核心"还定义了以编程方式创建Document实例的方法，也支持了创建DocumentType对象。"DOM2级样式"模块主要针对操作元素的样
复制链接

扫一扫