重学JS—第十二章DOM2、3

最新推荐文章于 2025-05-12 11:10:13 发布

榴乡桥北

最新推荐文章于 2025-05-12 11:10:13 发布

阅读量205

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/Lazarus_lan/article/details/109054490

本文详细探讨了DOM2的样式新属性、计算样式方法，如getComputedStyle，以及如何使用NodeIterator和TreeWalker进行DOM遍历。此外，讲解了元素的偏移量、滚动和范围操作，如createRange和selectNode。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、DOM2简介

DOM1主要定义了HTML（XML下同）文档底层结构。DOM2、3引入了交互能力（XML高级属性等）。
DOM2的主要模块：

核心：在DOM1基础上，添加更多方法和属性
视图：为document定义了基于样式的不同视图
事件：利用事件DOM交互
样式：编程式访问和改变css
遍历
DOM2级HTML：添加了更多属性、方法和接口

二、样式

2.1 DOM2样式新定义的属性和方法

cssText、getPropertyCSSValue()、item(index)等

2.2 计算样式

docuent.defaultView
window.getComputedStyle(要计算样式的元素，伪元素字符串)

<p>点击按钮计算 DIV 的背景颜色。</p>
<p><button onclick="myFunction()">点我</button></p>
<div id="test" style="height: 50px;background-color: rgb(178, 116, 230);">测试 DIV</div>
<p>计算值为: <span id="demo"></span></p>

<script>
function myFunction(){
    var elem = document.getElementById("test");
    var theCSSprop = window.getComputedStyle(elem, null).getPropertyValue("background-color");
    document.getElementById("demo").innerHTML = theCSSprop;
}
</script>

2.3 元素大小

offset

元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小（不包括外边距）。通过下列 4 个属性可以取得元素的偏移量。
 offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。
 offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。
 offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。
 offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。
在这里插入图片描述

其中，offsetLeft 和 offsetTop 属性与包含元素有关，包含元素的引用保存在 offsetParent属性中。 offsetParent 属性不一定与 parentNode 的值相等。 例如，td元素的 offsetParent 是作为其祖先元素的table元素，因为table是在 DOM 层次中距td最近的一个具有大小的元素。

client

元素内部的空间大小，滚动条占用的空间不计算在内。
在这里插入图片描述

scroll

以下是 4 个与滚动大小相关的属性。
 scrollHeight：在没有滚动条的情况下，元素内容的总高度。
 scrollWidth：在没有滚动条的情况下，元素内容的总宽度。
 scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
 scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。
在这里插入图片描述

元素位置

getBoundingClientRect()方法。这个方法返回会一个矩形对象，包含 4 个属性：left、top、right 和 bottom。

三、遍历

NodeIterator

可以使用 document.createNodeIterator()方法创建它的新实例。

var filter = function(node){ 
 return node.tagName.toLowerCase() == "p" ? 
 NodeFilter.FILTER_ACCEPT : 
 NodeFilter.FILTER_SKIP; 
}; 
var iterator = document.createNodeIterator(root, NodeFilter.SHOW_ELEMENT, 
 filter, false);

NodeIterator 类型的两个主要方法是 nextNode()和 previousNode()。
假设我们想要遍历div元素中的所有元素，那么可以使用下列代码。

var div = document.getElementById("div1"); 

var iterator = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT,  null, false); 
var node = iterator.nextNode(); 

while (node !== null) { 
 alert(node.tagName); //输出标签名
 node = iterator.nextNode(); 
}

带有fliter的，显示div中的元素

var div = document.getElementById("div1"); 
var filter = function(node){ 
 return node.tagName.toLowerCase() == "li" ? 
 NodeFilter.FILTER_ACCEPT : 
 NodeFilter.FILTER_SKIP; 
}; 

var iterator = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT,  filter, false); 
var node = iterator.nextNode(); 

while (node !== null) { 
 alert(node.tagName); //输出标签名
 node = iterator.nextNode(); 
}

TreeWalker

TreeWalker 是 NodeIterator 的一个更高级的版本。除了包括 nextNode()和 previousNode()
在内的相同的功能之外，这个类型还提供了下列用于在不同方向上遍历 DOM 结构的方法。
 parentNode()：遍历到当前节点的父节点；
 firstChild()：遍历到当前节点的第一个子节点；
 lastChild()：遍历到当前节点的最后一个子节点；
 nextSibling()：遍历到当前节点的下一个同辈节点；
 previousSibling()：遍历到当前节点的上一个同辈节点
TreeWalker 类型还有一个属性，名叫 currentNode，表示任何遍历方法在上一次遍历中返回的节点。
}

var node = walker.nextNode(); 
alert(node === walker.currentNode); //true 
walker.currentNode = document.body; //修改起点
}

四、范围

创建范围：createRange()

在兼容 DOM 的浏览器中，这个方法属于 document 对象。
可以使用 createRange()来创建 DOM 范围
新创建的范围也直接与创建它的document关联在一起，不能用于其他document

使用范围选择document的部分：selectNode()或 selectNodeContents()

selectNode() 方法选择整个节点，包括其子节点
selectNodeContents() 只选择节点的子节点。