第16章 DOM2 和 DOM3-KeepStudy

第16章 DOM2 和 DOM3

>DOM1主要定义了 HTML 和 XML 文档的底层结构。DOM2和DOM3在这些结构之上加入更多交互能力，提供了更高级的 XML 特性。实际上，DOM2和 DOM3 是按照模块化的思路来制定标准的，每个模块之间有一定关联，但分别针对某个 DOM 子集。

### 16.1　DOM的演进 460

##### 16.1.1 XML 命名空间

##### 16.1.2 其他变化

### 16.2　样式 467

##### 16.2.1 存取元素样式

- >```javascript
  >let myDiv = document.getElementById("myDiv"); 
  >// 设置背景颜色
  >myDiv.style.backgroundColor = "red"; 
  >// 修改大小
  >myDiv.style.width = "100px"; 
  >myDiv.style.height = "200px"; 
  >// 设置边框
  >myDiv.style.border = "1px solid black";
  >
  >myDiv.style.backgroundImage = "";
  >myDiv.style.color = "";
  >myDiv.style.display = "";
  >myDiv.style.fontFamily = "";
  >
  >//
  ><div id="myDiv" style="background-color: blue; width: 10px; height: 25px"></div>
  >console.log(myDiv.style.backgroundColor); // "blue" 
  >console.log(myDiv.style.width); // "10px" 
  >console.log(myDiv.style.height); // "25px"
  >
  >//设置 cssText 是一次性修改元素多个样式最快捷的方式，因为所有变化会同时生效
  >myDiv.style.cssText = "width: 25px; height: 100px; background-color: green"; 
  >console.log(myDiv.style.cssText);
  >
  >//length 属性是跟 item()方法一起配套迭代 CSS 属性用的
  >for (let i = 0, len = myDiv.style.length; i < len; i++) { 
  >console.log(myDiv.style[i]); // 或者用 myDiv.style.item(i) 
  >}
  >```

##### 16.2.2 操作样式表

##### 16.2.3 元素尺寸

1. 偏移尺寸

>偏移尺寸（offset dimensions），包含元素在屏幕上占用的所有视觉空间。元素在页面上的视觉空间由其高度和宽度决定，包括所有内边距、滚动条和边框（但不包含外边距）。以下 4 个属性用于取得元素的偏移尺寸
   >
   >- offsetHeight，元素在垂直方向上占用的像素尺寸，包括它的高度、水平滚动条高度（如果可
   >  见）和上、下边框的高度。
   >- offsetLeft，元素左边框外侧距离包含元素左边框内侧的像素数。
   >- offsetTop，元素上边框外侧距离包含元素上边框内侧的像素数。
   >- offsetWidth，元素在水平方向上占用的像素尺寸，包括它的宽度、垂直滚动条宽度（如果可见）和左、右边框的宽度。

2. 客户端尺寸

>元素的客户端尺寸（client dimensions）包含元素内容及其内边距所占用的空间。客户端尺寸只有两个相关属性：clientWidth 和 clientHeight。其中，clientWidth 是内容区宽度加左、右内边距宽度，clientHeight 是内容区高度加上、下内边距高度。
   >
   >客户端尺寸实际上就是元素内部的空间，因此不包含滚动条占用的空间。这两个属性最常用于确定浏览器视口尺寸，即检测 document.documentElement 的 clientWidth 和 clientHeight。这两个属性表示视口（<html>或<body>元素）的尺寸。

3. 滚动尺寸

> 滚动尺寸（scroll dimensions），提供了元素内容滚动距离的信息。相关的属性有如下 4 个：
   >
   > - scrollHeight，没有滚动条出现时，元素内容的总高度。
   > - scrollLeft，内容区左侧隐藏的像素数，设置这个属性可以改变元素的滚动位置。
   > - scrollTop，内容区顶部隐藏的像素数，设置这个属性可以改变元素的滚动位置。
   > - scrollWidth，没有滚动条出现时，元素内容的总宽度。
   >
   > scrollWidth 和 scrollHeight 可以用来确定给定元素内容的实际尺寸。
   >
   > ```javascript
   > //下面这个函数检测元素是不是位于顶部，如果不是则把它滚动回顶部：
   > function scrollToTop(element) { 
   >  if (element.scrollTop != 0) { 
   >     element.scrollTop = 0; 
   >  } 
   > }
   > ```

4. 确定元素尺寸

>浏览器在每个元素上都暴露了 getBoundingClientRect()方法，返回一个 DOMRect 对象，包含6 个属性：left、top、right、bottom、height 和 width。这些属性给出了元素在页面中相对于视口的位置。

### 16.3　遍历 476

##### 16.3.1 **NodeIterator**

##### 16.3.2 **TreeWalker**

### 16.4　范围 481

##### 16.4.1 DOM范围

- > 与节点类似，这个新创建的范围对象是与创建它的文档关联的，不能在其他文档中使用。然后可以使用这个范围在后台选择文档特定的部分。创建范围并指定它的位置之后，可以对范围的内容执行一些操作，从而实现对底层 DOM 树更精细的控制。
  >
  > ```javascript
  > //创建一个 DOM 范围对象
  > let range = document.createRange();
  > ```

##### 16.4.2 简单选择

- > 通过范围选择文档中某个部分最简单的方式，就是使用 selectNode()或 selectNodeContents()方法。这两个方法都接收一个节点作为参数，并将该节点的信息添加到调用它的范围。selectNode()方法选择整个节点，包括其后代节点，而 selectNodeContents()只选择节点的后代。
  >
  > ```javascript
  > let range1 = document.createRange(), 
  > range2 = document.createRange(), 
  > p1 = document.getElementById("p1"); 
  > range1.selectNode(p1); 
  > range2.selectNodeContents(p1);
  > ```

##### 16.4.3 复杂选择

- > 要创建复杂的范围，需要使用 setStart()和 setEnd()方法。这两个方法都接收两个参数：参照节点和偏移量。对 setStart()来说，参照节点会成为 startContainer，而偏移量会赋值给 startOffset。对 setEnd()而言，参照节点会成为 endContainer，而偏移量会赋值给 endOffset。

##### 16.4.4 操作范围

##### 16.4.5 范围插入

- > 使用 insertNode()方法可以在范围选区的开始位置插入一个节点。

##### 16,4.6 范围折叠

- > 如果范围并没有选择文档的任何部分，则称为折叠（collapsed）。折叠范围有点类似文本框：如果文本框中有文本，那么可以用鼠标选中以高亮显示全部文本。
  >
  > ```javascript
  > console.log(range.collapsed); // 输出 true
  > ```

##### 16,4.7 范围比较

- > 如果有多个范围，则可以使用 compareBoundaryPoints()方法确定范围之间是否存在公共的边界（起点或终点）。
  >
  > ```javascript
  > let range1 = document.createRange(); 
  > let range2 = document.createRange(); 
  > let p1 = document.getElementById("p1"); 
  > 
  > range1.selectNodeContents(p1); 
  > range2.selectNodeContents(p1); 
  > range2.setEndBefore(p1.lastChild); 
  > 
  > console.log(range1.compareBoundaryPoints(Range.START_TO_START, range2)); // 0 
  > console.log(range1.compareBoundaryPoints(Range.END_TO_END, range2)); // 1
  > ```

##### 16.4.8 复制范围

- > ```javascript
  > let newRange = range.cloneRange();
  > ```

##### 16.4.9 清理

- >```javascript
  >range.detach(); // 从文档中剥离范围
  >range = null; // 解除引用
  >```

顶部

JavaScript高级程序设计(4)

目录

相关推荐