《JavaScript 高级程序设计》第十六章 DOM2和DOM3 学习记录-一一网

1、DOM的演进

1、XML命名空间

在一个格式规范的文档中混用不同的XML语言，不必担心元素命名冲突

1、Node的变化

localName，不包含命名空间前缀的节点名
namespaceURI，节点的命名空间URL，未指定则为null
prefix，命名空间前缀，没有则为null
isDefaultNamespace(namespaceURI)，返回布尔值，表示namespaceURI是否为节点的默认命名空间
lookupNamespaceURI(prefix)，返回给指定prefix的命名空间URI
lookupPrefix(namespaceURI)，返回给定namespaceURI前缀

2、Document变化

createElementNS(namespaceURI, tagName)，以给定的标签名tagName创建指定命名空间namespaceURI的一个新元素
createAttributeNS(namespaceURI, attributeName)，以给定的属性名attributeName创建指定命名空间namespceURI的一个新属性
getElementsByTagNameNS(namespaceURI, tagName)，返回指定命名空间namespaceURI中所有标签名为tagName的元素的NodeList

3、Element变化

getAttributeNS(namespaceURI, localName)
- 取得指定命名空间namespaceURI中名为localName的属性
getAttributeNodeNS(namespaceURI, localName)
- 取得指定命名空间namespaceURI中名为localName的属性节点
getElementsByTagNameNS(namespaceURI, tagName)
- 取得指定命名空间namespaceURI中标签名为tagName的元素的NodeList
hasAttributeNS(namespaceURI, localName)
- 返回布尔值，表示元素中是否有命名括号namespaceURI下名为localName的属性
removeAttributeNS(namespaceURI, localName)
- 删除指定命名空间namespaceURI中名为localName的属性
setAttributeNS(namespaceURI, qualifiedName, value)
- 设置指定命名空间namespaceURI中名为qualifiedName的属性为value
setAttributeNodeNS(attNode)
- 为元素设置包含命名空间信息的属性节点attNode

4、NamedNodeMap变化

getNamedItemNS(namespaceURI, localName)，取得指定命名空间namespaceURI中名为localName的项
removeNamedItemNS(namespaceURI, localName)，删除指定命名空间namespaceURI中名为localName的项
setNamedItemNS(node)，为元素设置（添加）包含命名空间信息节点。

2、其他变化

1、DocumentType的变化

2、Document的变化

~~importNode()从其他文档获取一个节点并导入到新文档，以便将其插入新文档~~
- ~~与cloneNode()方法类似，同时接收两个参数：要复制的节点和表示是否同时复制子树的布尔值，返回结果是适合在当前文档中使用的新节点。~~
~~defaultView，是一个指向当前文档的窗口的指针。~~
~~document.implementation.createDocumentType()~~
~~document.implementation.createDocument()~~

3、Node的变化

isSameNode()，isEqualNode()，接收一个节点参数，如果这个节点与参考节点相同或相等则返回true
- 节点相同，意味着引用同一个对象
- 节点相等，意味着节点类型相同，拥有相等的属性，而且attributes和childNode也相等。
setUserData() 用于给节点追加参数，参数：键、值、处理函数

4、内嵌窗格的变化

2、样式

三种样式定义方式：外部样式表、文档样式表、元素特定样式

1、存取元素样式

在JavaScript中对应的style属性是CSSStyleDeclaration类型的实例。
包含通过HTML style属性为元素设置的所有样式信息，但不包含通过层叠机制从文档样式或外部样式中继承来的样式。
CSS属性名使用连字符，对应JavaScript中使用小驼峰形式
大多数可以直接转换，除了float，因为是保留字，所以使用cssFloat
style属性设置的值可以通过style对象获取

1、DOM样式属性和方法

style对象上的一些属性和方法
- cssText，包含style属性中的CSS代码
  - 读取时，返回style属性中的CSS代码
  - 写入时，重写整个style属性的值
- length，应用给元素的CSS属性数量
- parentRule，表示CSS信息的CSSRule对象
- getPropertyPriority(propertyName)，如果CSS属性propertyName使用了!important，则返回“important”，否则返回空字符串
- getPropertyValue(propertyName)，返回属性propertyName的字符串值
- item(index)，返回索引名为index的CSS属性名
- removeProperty(propertyName)，从样式中删除CSS属性propertyName
  - 删除后应用该属性默认样式
- setProperty(propertyName, value, priority)，设置CSS属性propertyName的值为value，priority的值是”important”或空字符串

2、计算样式

document.defaultView.getComputedStyle(element, null)
- 两个参数：要取得计算样式的元素和伪元素字符串
- 如果不需要查询伪元素，则可以传null
- 返回一个CSSStyleDeclaration对象，包含元素的计算样式。
- 只读，不可修改。
- 不同浏览器的默认值不一定相同。

2、操作样式表

CSSStyleSheet类型表示CSS样式表，CSSStyleSheet类型继承StyleSheet，后者可作为非CSS样式表基类。
继承StyleSheet的属性：
- disabled，布尔值样式是否禁用
- herf，使用<link>包含的样式表，返回样式表URL，否则返回null
- media，样式表支持的媒体类型集合
- ownerNode，指向拥有当前样式表的节点（<link>或<style>元素）
- parentStyleSheet，当前样式表通过@import被包含在另一个样式表中，则这个属性指向倒入它的样式表。
- title， ownerNode的title属性
- type，字符串表示样式表的类型。对CSS样式表，是text/css
额外方法
- cssRules，当前样式表包含的样式规则集合
- ownerRule，@import的规则
- deleteRule(index)，指定位置删除cssRules中的规则
- insertRule(rule, index)，指定位置插入cssRules中的规则

1、CSS规则

cssText，整条规则文本
parentRule，指向此规则被包含的规则
parentStyleSheet，包含当前规则的样式表
selectorText，返回规则的选择符文本。
style，返回CSSStyleDeclaration对象
type，数值常量，对于样式规则返回1

2、创建规则

insertRule() 添加新规则

3、删除规则

deleteRule() 删除规则

3、元素尺寸

1、偏移尺寸

元素在屏幕上占用的所有视觉空间。元素在页面上的视觉空间由其高度和宽度决定，含内边距、滚动条和边框（不含外边距）
- offsetHeight，元素在垂直方向上占用的像素尺寸，含它的高度、水平滚动条高度（可见）和上下边框高度
- offsetLeft，元素左边框外侧距离包含元素左边框内侧的像素数
- offsetTop，元素上边框外侧距离包含元素上边框内侧的像素数
- offsetWidth，元素在水平方向上占用的像素尺寸，含它的宽度、垂直滚动条宽度（可见）和左、右边框的宽度。
- 其中offsetLeft和offsetTop是相对包含元素的，包含元素保存在offsetParent属性中。offsetParent不一定是parentNode，如<td>的offsetParent是作为祖先的<table>元素。

确定元素在页面中的偏移量，可以吧offsetLeft属性和offsetTop属性分别与offsetParent的相同属性相加，一直加到根元素。

function getElementLeft(element) {
  let actualLeft = element.offsetLeft;
  let current = element.offsetParent;
  while(current !== null) {
    actualLeft += current.offsetLeft
    current = current.offsetParent
  }
  return actualLeft
}
复制代码

getElementTop() 和 getElementLeft() 返回值与offsetLeft和offsetTop相同
只读，每次访问都会重新计算

2、客户端尺寸

包含元素内容及其内边距所占用的空间。
- clientWidth 是内容区宽度加左、右内边距宽度
- clientHeight是内容区高度加上、下内边距高度

客户端尺寸实际就是元素内部空间，不包含滚动条占用的空间，最常用于确定浏览器视口尺寸（document.documentElement的这两个属性）
只读，每次访问都会重新计算

3、滚动尺寸

提供了元素内容滚动距离的信息。
有些元素如<html>无须任何代码就可以自由滚动，其他元素需要CSS的overflow属性令其滚动。
- scrollHeight，没有滚动条出现时，元素内容的总高度
- scrollLeft，内容区左侧隐藏的像素数，设置这个属性可以改变元素的滚动位置。
- scrollLeft，内容区顶部隐藏的像素数，设置这个属性可以改变元素的滚动位置。
- scrollWidth，没有滚动条出现时，元素内容的总宽度。

scrollWidth 和 scrollHeight 可以用来确定给定元素内容的实际尺寸。
不需要滚动的文档上，scrollWidth 和 scrollHeight 与 clientWidth和clientHeight是分不清的。如果文档尺寸超过视口尺寸，则
- scrollWidth 和 scrollHeight等于文档内容的宽高
- clientWidth和clientHeight等于视口的大小
scrollLeft 和 scrollTop 用于确定当前元素滚动的位置，或用于设置他们的滚动位置。

4、确定元素尺寸

getBoundingClientRect()，返回DOMRect对象，包含left、top、right、bottom、height和width

3、遍历

NodeIterator、TreeWalker
深度优先遍历

1、NodeIterator

通过document.createNodeIterator() 方法创建实例
- root，作为遍历根节点的节点
- whatToshow，数值代码，表示应该访问哪些节点
- filter，NodeFilter对象或函数，表示是否接收或跳过特定节点
- entityReferenceExpansion，布尔值，表示是否扩展实体引用。
acceptNode()方法
- NodeFilter.FILTER_ACCEPT
- NodeFilter.FILTER_SKIP
nextNode()和previousNode() 维护内部指针

2、TreeWalker

NodeIterator 的高级版
包含 nextNode()和previousNode() 方法
- parentNode()，遍历到当前节点的父节点
- firstChild()，遍历到当前节点的第一个子节点
- lastChild()，遍历到当前节点的最后一个子节点
- nextSibling()，遍历到当前节点的下一个同胞节点
- previousSibling()，遍历到当前节点的上一个同胞节点。
通过调用 document.createTreeWalker()方法创建
参数与document.createNodeIterator相同。
不同点：
- 新增NodeFilter.FILTER_REJECT，跳过该节点及其子节点。
- 可以在DOM结构中四处游走。
currentNode属性，表示遍历过程中上一次返回的节点。可以通过修改这个属性来影响接下来遍历的起点。

4、范围

用于在文档中选择内容，而不用考虑节点之间的界限。

1、DOM范围

createRange()，创建一个DOM范围对象

let range = document.createRange()
与创建它的文档管理，不能在其他的文档使用。
每个范围都是Range类型的实例，拥有相应的属性和方法。
- startContainer，范围起点所在的节点
- startOffset，范围起点在startContainer中的偏移量。如果startContainer是文本节点、注释节点或CData区块节点，则startOffset指范围起点之前跳过的字符数。
- endContainer，范围重点所在的节点
- endOffset，范围终点在endContainer中的偏移量
- commonAncestorContainer，文档中以startOffset和endContainer为后代的最深的节点。

2、简单选择

selectNode()
- 接收一个节点作为参数，将节点信息添加到调用它的范围
- 选择整个节点，包含其后代
selectNodeContents()
- 接收一个节点作为参数，将节点信息添加到调用它的范围
- 只选择节点的后代。
选定节点或节点后代后
- setStartBefore(refNode)，把范围的起点设置到refNode之前，从而让refNode成为选区的第一个子节点
- setStartAfter(refNode)，把范围的起点设置到refNode之后，从而让refNode排除在选区之外
- setEndBefore(refNode)`，把范围的终点设置到refNode之前，从而让refNode排除在选区之外
- setEndAfter(refNode)，把范围的终点设置到refNode之后，从而让refNode成为选区的最后一个子节点

3、复杂选择

setStart()
- 接收两个参数，参照节点和偏移量
- 参照节点（startContainer）
- 偏移量（startOffset）
setEnd()
- 接收两个参数，参照节点和偏移量
- 参照节点（endContainer）
- 偏移量（endOffset）

4、操作范围

创建范围后，浏览器会在内部创建一个文档片段节点，用于包含范围选区中的节点。
范围能够确定缺失的开始和结束标签，从而可以重构出有效的DOM结构。
deleteContents()，从文档中删除范围包含的节点
extractContents()，从文档中移除范围选区，返回范围对应的文档片段。可以把范围选中的内容插入文档的其他地方。
cloneContents()，创建一个副本，把这个副本插入到文档的其他地方

5、范围插入

insertNode()在范围选区的开始位置插入节点
surroundContents插入包含范围的内容

6、范围折叠

如果范围并没有选择文档的任何部分，则称为折叠
collapse()，参数布尔值目标是折叠到哪一端
collapsed检测是否已经折叠

7、范围比较

compareBoundaryPoints()确定范围之间是否存在公共的边界（起点或终点）。接收两个参数，要比较的范围和一个常量值，表示比较的方式。
- Range.START_TO_START（0），比较两个范围的起点
- Range.START_TO_END（1），比较第一个范围起点和第二个的终点
- Range.END_TO_END（2），比较两个范围的终点
- Range.END_TO_START（3），比较第一个范围终点和第二个的起点
第一个范围边界在第二个范围边之前返回-1，相等返回0，之后返回1