美文网首页
JS高程：读书摘要（九）DOM2级和DOM3级 - [part

JS高程：读书摘要（九）DOM2级和DOM3级 - [part

作者: Upcccz | 来源:发表于2019-01-15 20:25 被阅读0次

DOM1级主要定义的是HTML和XML文档的底层结构。DOM2和DOM3级则在这个结构的基础上引入了更多的交互能力，也支持了更高级的XML特性。

  • DOM2 级核心（DOM Level 2 Core）：在1 级核心基础上构建，为节点添加了更多方法和属性。
  • DOM2 级视图（DOM Level 2 Views）：为文档定义了基于样式信息的不同视图。
  • DOM2 级事件（DOM Level 2 Events）：说明了如何使用事件与DOM文档交互。
  • DOM2 级样式（DOM Level 2 Style）：定义了如何以编程方式来访问和改变CSS样式信息。
  • DOM2 级遍历和范围（DOM Level 2 Traversal and Range）：引入了遍历DOM文档和选择其特定部分的新接口。
  • DOM2 级 HTML（DOM Level 2 HTML）：在1 级HTML基础上构建，添加了更多属性、方法和新接口。

一、DOM 变化

针对XML命名空间的变化

有了XML命名空间，不同XML文档的元素就可以混合在一起，共同构成格式良好的文档，而不必担心发生命名冲突。从技术上说，HTML不支持XML命名空间，但XHTML支持XML命名空间。因此，本节给出的都是XHTML的示例。

关于XML、HTML、XHTML
XML 简介
HTML 简介
XHTML 简介
为什么要使用XHTML？
XHTML 与 HTML 之间的差异

命名空间要使用xmlns特性来指定。XHTML的命名空间是http://www.w3.org/1999/xhtml，在任格式良好XHTML页面中，都应该将其包含在<html>元素中；要想明确地为XML命名空间创建前缀，可以使用xmlns后跟冒号，再后跟前缀；有时候为了避免不同语言间的冲突也可以使用命名空间来限定特性，比如下例中的class特性

<xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <xhtml:head>
        <xhtml:title>Example XHTML page</xhtml:title>
    </xhtml:head>
    <xhtml:body xhtml:class="home">
        Hello world!
    </xhtml:body>
</xhtml:html>

在只基于一种语言编写XML文档的情况下，命名空间实际上也没有什么用。不过，在混合使用两种语言的情况下，命名空间的用处就非常大了。混合了XHTML和SVG语言的文档：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Example XHTML page</title>
    </head>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
              viewBox="0 0 100 100" style="width:100%; height:100%">
            <rect x="0" y="0" width="100" height="100" style="fill:red"/>
        </svg>
    </body>
</html>

在这个例子中，通过设置命名空间，将<svg>标识为了与包含文档无关的元素。此时，<svg>元素的所有子元素，以及这些元素的所有特性，都被认为属于http://www.w3.org/2000/svg命名空间。即使这个文档从技术上说是一个XHTML文档，但因为有了命名空间，其中的SVG代码也仍然是有效的。

SVG入门教程

1、Node 类型的变化
在DOM2级中，Node类型包含下列特定于命名空间的属性。

  • localName：不带命名空间前缀的节点名称。
  • namespaceURI：命名空间URI 或者（在未指定的情况下是）null。
  • prefix：命名空间前缀或者（在未指定的情况下是）null。
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Example XHTML page</title>
    </head>
    <body>
        <s:svg xmlns:s="http://www.w3.org/2000/svg" version="1.1"
            viewBox="0 0 100 100" style="width:100%; height:100%">
            <s:rect x="0" y="0" width="100" height="100" style="fill:red"/>
        </s:svg>
    </body>
</html>

对于<html>元素来说，它的localName和tagName是"html"，namespaceURI是"http://www.w3.org/1999/xhtml"，而prefix是null。对于<s:svg>元素而言，它的localName是"svg"，tagName是"s:svg"，namespaceURI是"http://www.w3.org/2000/svg"，而prefix是"s"。

DOM3级在此基础上更进一步，又引入了下列与命名空间有关的方法。

  • isDefaultNamespace(namespaceURI)：判断指定的namespaceURI是否是当前节点的默认命名空间，返回布尔值
  • lookupNamespaceURI(prefix)：返回给定prefix的命名空间(namespaceURI)。
  • lookupPrefix(namespaceURI)：返回给定namespaceURI的前缀(prefix)。

2、Document 类型的变化

  • createElementNS(namespaceURI, tagName)：使用给定的tagName创建一个属于命名空间namespaceURI的新元素。
  • createAttributeNS(namespaceURI, attributeName)：使用给定的attributeName创建一个属于命名空间namespaceURI的新特性。
  • getElementsByTagNameNS(namespaceURI, tagName)：返回属于命名空间namespaceURI的tagName元素的NodeList。
//创建一个新的SVG 元素
var svg = document.createElementNS("http://www.w3.org/2000/svg","svg");
//创建一个属于某个命名空间的新特性
var att = document.createAttributeNS("http://www.somewhere.com", "random");
//取得所有XHTML 元素
var elems = document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "*");

只有在文档中存在两个或多个命名空间时，这些与命名空间有关的方法才是必需的。

3、Element 类型的变化

  • getAttributeNS(namespaceURI,localName)：取得属于命名空间namespaceURI且名为localName的特性。
  • getAttributeNodeNS(namespaceURI,localName)：取得属于命名空间namespaceURI且名为localName 的特性节点。
  • getElementsByTagNameNS(namespaceURI, tagName)：返回属于命名空间namespaceURI的tagName元素的NodeList。
  • hasAttributeNS(namespaceURI,localName)：确定当前元素是否有一个名为localName的特性，而且该特性的命名空间是namespaceURI。注意，“DOM2 级核心”也增加了一个hasAttribute()方法，用于不考虑命名空间的情况。
  • removeAttriubteNS(namespaceURI,localName)：删除属于命名空间namespaceURI且名为localName 的特性。
  • setAttributeNS(namespaceURI,qualifiedName,value)：设置属于命名空间namespace-URI且名为qualifiedName的特性的值为value。
  • setAttributeNodeNS(attNode)：设置属于命名空间namespaceURI的特性节点。
其他方面的变化

1、DocumentType 类型的变化

DocumentType类型新增了3 个属性：publicId、systemId和internalSubset（内部子集）， 前两个属性表示的是文档类型声明中的两个信息段，这两个信息段在DOM1级中是没有办法访问到的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
[<!ELEMENT name (#PCDATA)>] >

publicId："-//W3C//DTD HTML 4.01//EN"
systemId："http://www.w3.org/TR/html4/strict.dtd"
实际上，很少需要在网页中访问此类信息。最后一个属性internalSubset，用于访问包含在文档类型声明中的额外定义。访问document.doctype.internalSubset将得到"<!ELEMENT name (#PCDATA)>"，这种内部子集（internal subset）在HTML中极少用到，在XML中可能会更常见一些。

2、Document 类型的变化

  • importNode()

这个方法的用途是从一个文档中取得一个节点，然后将其导入到另一个文档，使其成为这个文档结构的一部分。需要注意的是，每个节点都有一个ownerDocument属性，表示所属的文档。如果调用appendChild()时传入的节点属于不同的文档（ownerDocument属性的值不一样），则会导致错误。但在调用importNode()时传入不同文档的节点则会返回一个新节点，这个新节点的所有权归当前文档所有。

importNode()方法与Element的cloneNode()方法非常相似，它接受两个参数(要复制的节点、是否复制子节点的布尔值)，返回的结果是原来节点的副本，但能够在当前文档中使用。

var newNode = document.importNode(oldNode, true); //导入节点及其所有子节点
document.body.appendChild(newNode);
// 这个方法在HTML文档中并不常用，在XML文档中用得比较多
  • defaultView属性

保存着一个指针，指向拥有给定文档的窗口（或框架），除 IE之外的所有浏览器都支持defaultView属性。在IE中有一个等价的属性名叫parentWindow（Opera 也支持这个属性）。因此，要确定文档的归属窗口，可以使用以下代码。

var parentWindow = document.defaultView || document.parentWindow;

“DOM2 级核心”还为document.implementation对象规定了两个新方法。

  • createDocumentType()

用于创建一个新的DocumentType节点，接受3 个参数：文档类型名称、publicId、systemId

var doctype = document.implementation.createDocumentType("html",
                "-//W3C//DTD HTML 4.01//EN",
                "http://www.w3.org/TR/html4/strict.dtd");

 ---> 
会创建一个新的HTML4.01 Strict 文档类型。
由于既有文档的文档类型不能改变，因此createDocumentType()只在创建新文档时有用；
  • createDocument()方法

用于创建新文档，这个方法接受3 个参数：针对文档中元素的namespaceURI、文档元素的标签名、新文档的文档类型。要想创建一个XHTML 文档，可以使用以下代

var doctype = document.implementation.createDocumentType("html",
                " -//W3C//DTD XHTML 1.0 Strict//EN",
                "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd");
var doc = document.implementation.createDocument("http://www.w3.org/1999/xhtml","html", doctype);

不过，新文档当前只有文档元素<html>，剩下的所有元素都需要继续添加。“DOM2 级HTML”模块也为document.implementation 新增了一个方法，名叫createHTMLDocument()。这个方法的用途是创建一个完整的HTML文档，包括<html>、<head>、<title>和<body>元素。这个方法只接受一个参数，即新创建文档的标题（放在<title>元素中的字符串），返回新的HTML文档，如下所示：

var htmldoc = document.implementation.createHTMLDocument("New Doc");
alert(htmldoc.title); //"New Doc"
alert(typeof htmldoc.body); //"object"

通过调用createHTMLDocument()创建的这个文档，是HTMLDocument类型的实例，因而具有该类型的所有属性和方法，包括title和body属性

3、Node 类型的变化

DOM3级引入了两个辅助比较节点的方法：isSameNode()和isEqualNode()。这两个方法都接受一个节点参数，并在传入节点与引用的节点相同或相等时返回true。所谓相同isSameNode()，指的是两个节点引用的是同一个对象。所谓相等isEqualNode()，指的是两个节点是相同的类型，具有相等的属性（nodeName、nodeValue，等等），而且它们的attributes 和childNodes属性也相等（相同位置包含相同的值）。

var div1 = document.createElement("div");
div1.setAttribute("class", "box");
var div2 = document.createElement("div");
div2.setAttribute("class", "box");
alert(div1.isSameNode(div1)); //true
alert(div1.isEqualNode(div2)); //true
alert(div1.isSameNode(div2)); //false

4、框架的变化

框架和内嵌框架分别用HTMLFrameElement和HTMLIFrameElement表示，它们在DOM2级中都有了一个新属性，名叫contentDocument。这个属性包含一个指针，指向表示框架内容的文档对象。在此之前，无法直接通过元素取得这个文档对象（只能使用frames集合）。IE8 之前不支持框架中的contentDocument属性，但支持一个名叫contentWindow的属性，该属性返回框架的window对象，而这个window对象又有一个document属性

var iframe = document.getElementById("myIframe");
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

访问框架或内嵌框架的文档对象要受到跨域安全策略的限制。如果某个框架中的页面来自其他域或不同子域，或者使用了不同的协议，那么要访问这个框架的文档对象就会导致错误。

二、样式

访问元素的样式

任何支持style特性的HTML元素在JavaScript中都有一个对应的style属性。这个style对象是CSSStyleDeclaration的实例，包含着通过HTML的style特性(属性)指定的所有样式信息，但不包含与外部样式表或嵌入样式表经层叠而来的样式。

在style特性中指定的任何CSS属性都将表现为这个style对象的相应属性。对于使用短划线（分隔不同的词汇，例如background-image）的CSS属性名，必须将其转换成驼峰大小写形式，才能通过JavaScript来访问。

多数情况下，都可以通过简单地转换属性名的格式来实现转换。也有不能直接转换的CSS属性就是float。由于float是JavaScript中的保留字，因此不能用作属性名。“DOM2 级样式”规范规定样式对象上相应的属性名应该是cssFloat，而IE支持的则是styleFloat。还有就是class也是保留字，所以需要使用className来访问。

var myDiv = document.getElementById("myDiv");
//设置背景颜色
myDiv.style.backgroundColor = "red";
//改变大小
myDiv.style.width = "100px";
myDiv.style.height = "200px";
//指定边框
myDiv.style.border = "1px solid black";

在以这种方式改变样式时，元素的外观会自动被更新。使用JavaScript操作style对象，都是操作的行内样式，层级较高，不会被覆盖。也可以通过style对象取到相应的特性的值，如果没有为元素设置style特性，那么style对象中可能会包含一些默认的值，但这些值并不能准确地反映该元素的样式信息。

1、DOM 样式属性和方法

  • cssText：如前所述，通过它能够访问到style特性(行内属性)中的CSS代码。
  • length：应用给元素的CSS属性的数量。
  • parentRule：表示CSS信息的CSSRule对象。本节后面将讨论CSSRule类型。
  • getPropertyPriority(propertyName)：如果给定的属性使用了!important 设置，则返回"important"；否则，返回空字符串。
  • getPropertyValue(propertyName)：返回给定属性的字符串值。
  • item(index)：返回给定位置的CSS属性的名称。
  • removeProperty(propertyName)：从样式中删除给定属性。
  • setProperty(propertyName,value,priority)：将给定属性设置为相应的值，并加上优先权标志（"important"或者一个空字符串）。
<div id="myDiv" style="background-color:blue; width:10px; height:25px">123</div>

var myDiv = document.getElementById('myDiv')
alert(myDiv.style.cssText)
myDiv.style.cssText = "width: 25px; height: 100px; background-color: green";
alert(myDiv.style.cssText);
for (i = 0, len = myDiv.style.length; i < len; i++) {
    prop = myDiv.style[i]; //或者 myDiv.style.item(i)
    value = myDiv.style.getPropertyValue(prop);
    alert(prop + " : " + value);
}
myDiv.style.removeProperty('background-color')
myDiv.style.setProperty('background-color','pink')
console.log(myDiv.style.parentRule);// null

2、计算的样式

  • getComputedStyle()方法

这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例如":after"）。如果不需要伪元素信息，第二个参数可以是null。getComputedStyle()方法返回一个CSSStyleDeclaration对象（与style属性的类型相同），其中包含当前元素的所有计算的样式（最终样式)

<!DOCTYPE html>
<html>
    <head>
        <title>Computed Styles Example</title>
        <style type="text/css">
            #myDiv {
                background-color: blue;
                width: 100px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div id="myDiv" style="background-color: red; border: 1px solid black"></div>
    </body>
</html>

var myDiv = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
alert(computedStyle.backgroundColor); // "red"/ "rgb(255,0,0)" 嵌入样式会被行内样式覆盖掉 
alert(computedStyle.width); // "100px"
alert(computedStyle.height); // "200px"
alert(computedStyle.border); // 在某些浏览器中是"1px solid black" / "1px solid rgb(0,0,0)"

在设置border 时， 实际上是设置了四个边的边框宽度、颜色、样式属性（border-left-width 、border-top-color 、border-bottom-style， 等等三类属性）。因此， 即使computedStyle.border不会在所有浏览器中都返回值，但computedStyle.borderLeftWidth会返回值。

IE 不支持getComputedStyle()方法，但它有一种类似的概念。在IE 中，每个具有style属性的元素还有一个currentStyle属性。这个属性是CSSStyleDeclaration的实例，包含当前元素全部计算后的样式。取得这些样式的方式也差不多。

var myDiv = document.getElementById("myDiv");
var computedStyle = myDiv.currentStyle;
alert(computedStyle.backgroundColor); //"red"
alert(computedStyle.width); //"100px"
alert(computedStyle.height); //"200px"
alert(computedStyle.border); //undefined
// IE 也没有返回border 样式，因为这是一个综合属性
  • 所有计算的样式都是只读的
  • 计算后的样式也包含属于浏览器内部样式表的样式信息，因此任何具有默认值的CSS属性都会表现在计算后的样式中。各个浏览器内部样式的默认值未必一样，如果你需要元素具有某个特定的默认值，应该手工在样式表中指定该值。
操作样式表

CSSStyleSheet类型表示的是样式表，使用document.styleSheets可以拿到所有包括通过<link>元素包含的样式表和在<style>元素中定义的样式表。

CSSStyleSheet继承自StyleSheet，从StyleSheet接口继承而来的属性如下。

  • disabled：表示样式表是否被禁用的布尔值。将这个值设置为true可以禁用样式表。
  • href：如果样式表是通过<link>包含的，则是样式表的URL；否则，是null。<style>元素包含的样式表没有href属性
  • media：当前样式表支持的所有媒体类型的集合。与所有DOM集合一样，这个集合也有一个length 属性和一个item()方法。也可以使用方括号语法取得集合中特定的项。如果集合是空列表，表示样式表适用于所有媒体。 在IE 中，media是一个反映<link>和<style>元素media特性值的字符串。
  • ownerNode：指向拥有当前样式表的节点的指针，样式表可能是在HTML中通过<link>或<style/>引入的（在XML中可能是通过处理指令引入的）。如果当前样式表是其他样式表通过@import导入的，则这个属性值为null。IE 不支持这个属性。
  • parentStyleSheet：在当前样式表是通过@import导入的情况下，这个属性是一个指向导入它的样式表的指针。
  • title：ownerNode 中title属性的值。
  • type：表示样式表类型的字符串。对CSS样式表而言，这个字符串是"type/css"。

除了disabled属性之外，其他属性都是只读的

CSSStyleSheet类型自身的属性和方法如下，多与Rule有关

  • cssRules：样式表中包含的样式规则的集合。IE不支持这个属性，但有一个类似的rules属性。
  • ownerRule：如果样式表是通过@import导入的，这个属性就是一个指针，指向表示导入的规则；否则，值为null。IE不支持这个属性。
  • deleteRule(index)：删除cssRules集合中指定位置的规则。IE不支持这个方法，但支持一个类似的removeRule()方法。
  • insertRule(rule,index)：向cssRules集合中指定的位置插入rule字符串。IE不支持这个方法，但支持一个类似的addRule()方法。

不同浏览器的document.styleSheets返回的样式表也不同。所有浏览器都会包含<style>元素和rel特性被设置为"stylesheet"的<link>元素引入的样式表。IE和Opera也包含rel特性被设置为"alternate stylesheet"的<link>元素引入的样式表。

也可以直接通过<link>或<style>元素取得CSSStyleSheet对象。DOM 规定了<link>和<style>元素包含了一个CSSStyleSheet对象的属性，名叫sheet；除了IE，其他浏览器都支持这个属性。IE 支持的是styleSheet 属性。

function getStyleSheet(element){
    return element.sheet || element.styleSheet;
}
//取得第一个<link/>元素引入的样式表
var link = document.getElementsByTagName("link")[0];
var sheet = getStylesheet(link);
CSS规则

CSSRule对象表示样式表中的每一条规则,例如 body { background-color:"red"}，CSSRule是一个供其他多种类型继承的基类型，其中最常见的就是CSSStyleRule类型，表示样式信息（其他规则还有@import、@font-face、@page和@charset，但这些规则很少有必要通过脚本来访问）

CSSStyleRule对象包含下列属性。

  • cssText：返回整条规则对应的文本。各浏览器的返回也不尽相同，IE 不支持这个属性。
  • parentRule：如果当前规则是导入的规则，这个属性引用的就是导入规则；否则，这个值为null。IE 不支持这个属性。
  • parentStyleSheet：当前规则所属的样式表。IE 不支持这个属性。
  • selectorText：返回当前规则的选择符文本。例如"#myDiv","h1",".color"，在Firefox、Safari、Chrome 和IE 中这个属性是只读的。Opera 允许修改selectorText。
  • style：一个CSSStyleDeclaration对象，可以通过它设置和取得规则中特定的样式值。
  • type：表示规则类型的常量值。对于样式规则，这个值是1。IE 不支持这个属性。 
div.box {
    background-color: blue;
    width: 100px;
    height: 200px;
}

假设这条规则位于页面中的第一个样式表中。

var sheet = document.styleSheets[0];     // 取得样式表中的第一个
var rules = sheet.cssRules || sheet.rules;   //取得规则列表
var rule = rules[0];               //取得第一条规则
alert(rule.selectorText); //  div.box
alert(rule.style.cssText); //完整的CSS 代码
alert(rule.style.backgroundColor); //'blue'
alert(rule.style.width); //'100px'
alert(rule.style.height); //'200px'
rule.style.backgroundColor = "red"   
// 也可以通过rule 的 style设置样式 但是会应用到所有带有.box类的div上
创建规则
  • insertRule()和IE的addRule()

insertRule()接受两个参数：规则文本和表示在哪里插入规则的索引。
addRule()也接收两必选参数：选择符文本和CSS样式信息；一个可选参数：插入规则的位置。

var sheet = document.styleSheets[0];     // 取得样式表中的第一个
sheet.insertRule("body { background-color: silver }", 0); //DOM 方法
sheet.addRule("body", "background-color: silver", 0); //仅对IE 有效
删除规则
  • deleteRule()和IE的removeRule()

这两个方法接受一个参数：要删除的规则的位置。例如，要删除样式表中的第一条规则

sheet.deleteRule(0); //DOM 方法
sheet.removeRule(0); //仅对IE 有效

与添加规则相似，删除规则也不是实际Web开发中常见的做法。考虑到删除规则可能会影响CSS层叠的效果，因此请大家慎重使用。

元素大小

1、偏移量offset

  • offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。
  • offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。
  • offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。
  • offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。
    offset

要想知道某个元素在页面上的偏移量，可以通过循环至根元素累加它们的offsetLeft / offsetTop

function getElementLeft(element){
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;
    while (current !== null){
        actualLeft += current.offsetLeft;
        current = current.offsetParent;
    }
    return actualLeft;
}

所有这些偏移量属性都是只读的，而且每次访问它们都需要重新计算。因此，应该尽量避免重复访问这些属性；如果需要重复使用其中某些属性的值，可以将它们保存在局部变量中，以提高性能。

2、客户区大小
元素的客户区大小（client dimension），指的是元素内容及其内边距所占据的空间大小。有关客户区大小的属性有两个：clientWidth和clientHeight。其中，clientWidth是元素内容区宽度加上左右内边距宽度；clientHeight属性是元素内容区高度加上上下内边距高度

client
要确定浏览器视口大小，可以使用document.documentElement或document.body（在IE7 之前的版本中）的clientWidth和clientHeight。 
function getViewport(){
    if (document.compatMode == "BackCompat"){  // 判读是否是混杂模式
        return {
            width: document.body.clientWidth,
            height: document.body.clientHeight
        };
    } else {
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        };
    }
}

与偏移量相似，客户区大小也是只读的，也是每次访问都要重新计算的。

3、滚动大小
滚动大小（scroll dimension），指的是包含滚动内容的元素的大小。有些元素（例如<html>元素），即使没有执行任何代码也能自动地添加滚动条；但另外一些元素，则需要通过CSS的overflow属性进行设置才能滚动。

  • scrollHeight：在没有滚动条的情况下，元素内容的总高度。
  • scrollWidth：在没有滚动条的情况下，元素内容的总宽度。
  • scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
  • scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。

scrollWidth和scrollHeight主要用于确定元素内容的实际大小。例如，通常认为<html>元素是在Web浏览器的视口中滚动的元素（IE6 之前版本运行在混杂模式下时是<body>元素）。因此，带有垂直滚动条的页面总高度就是document.documentElement.scrollHeight。

scroll
scrollWidth和scrollHeight与clientWidth和clientHeight
  • Firefox 中这两组属性始终都是相等的，但大小代表的是文档内容区域的实际尺寸，而非视口的尺寸。
  • Opera、Safari 3.1 及更高版本、Chrome 中的这两组属性是有差别的，其中scrollWidth和scrollHeight等于视口大小，而clientWidth和clientHeight等于文档内容区域的大小。
  • IE（在标准模式）中的这两组属性不相等，其中scrollWidth和scrollHeight等于文档内容区域的大小，而clientWidth和clientHeight等于视口大小。
    在确定文档的总高度时（包括基于视口的最小高度时），必须取得scrollWidth/clientWidth和scrollHeight/clientHeight中的最大值，才能保证在跨浏览器的环境下得到精确的结果。
var docHeight = Math.max(document.documentElement.scrollHeight,
                  document.documentElement.clientHeight);
var docWidth = Math.max(document.documentElement.scrollWidth,
                    document.documentElement.clientWidth);
// 在混杂模式下的IE 需要使用document.body代替docuement.documentElement

元素尚未被滚动时，这两个属性的值都等于0。如果元素被垂直滚动了，那么scrollTop / scrollLeft的值会大于0，且表示元素 上方/ 左侧 不可见内容的像素高度。

4、确定元素大小
每个元素都提供了一个getBoundingClientRect()方法。这个方法返回会一个矩形对象，包含4 个属性：left、top、right和bottom。这些属性给出了元素在页面中相对于视口的（坐标）位置(IE8及更早的版本将左上角坐标认定为(2,2)，其他则认定为(0,0))

function myGetBoundingClientRect(element){
    if (typeof arguments.callee.offset != "number"){
        var scrollTop = document.documentElement.scrollTop;
        var temp = document.createElement("div");
         // 将临时元素坐标设置为0,0
        temp.style.cssText = "position:absolute;left:0;top:0;"; 
        document.body.appendChild(temp);
        // 获取偏移量 -temp.getBoundingClientRect().top 用负数是因为最后的坐标是要减去2或者0的
        // - scrollTop 减去滚动的距离，是为了防止调用这个函数时窗口被滚动了
        arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
        document.body.removeChild(temp);
        temp = null;
    }
    var rect = element.getBoundingClientRect();
    var offset = arguments.callee.offset;
    return {
        left: rect.left + offset,
        right: rect.right + offset,
        top: rect.top + offset,
        bottom: rect.bottom + offset
    };
}

对于不支持getBoundingClientRect()的浏览器，可以通过其他手段取得相同的信息。一般来说，坐标轴中right和left差值与offsetWidth的值相等，而坐标轴中bottom和top的差值与offsetHeight相等，left和top可以根据offsetLeft和offsetTop拿到（注意使用循环父元素，因为拿到的是距离父元素的，而不是距离文档边界的），而right和bottom就可以使用left + offsetWidth和top + offsetHeight拿到了。

相关文章

  • JS高程：读书摘要（九）DOM2级和DOM3级 - [part

    DOM1级主要定义的是HTML和XML文档的底层结构。DOM2和DOM3级则在这个结构的基础上引入了更多的交互能力...

  • JS高程：读书摘要（十）DOM2级和DOM3级 - [part2

    一、遍历 “DOM2 级遍历和范围”模块定义了两个用于辅助完成顺序遍历DOM结构的类型：NodeIterator和...

  • JavaScript 高级程序设计(第12章 DOM2和DOM3

    第12章 DOM2和DOM3 DOM2 级核心(DOM Level 2 Core):在 1 级核心基础上构建,为节...

  • 2018-12-27

    第12章 DOM2和DOM3 DOM1级主要定义的是HTML和XML文档的底层结构。DOM2和DOM3则在这个结构...

  • dom 级别和dom 事件处理

    dom级别：dom0 dom1 dom2 dom3 dom事件处理：dom0 dom2 dom3 (1级DOM标准...

  • DOM事件

    DOM级别与DOM事件 DOM级别：DOM0级，DOM1级，DOM2级和DOM3级DOM事件：DOM0级事件处理，...

  • 十一、DOM2 和DOM 3

      DOM 1 级主要定义的是 HTML 和 XML 文档的底层结构。   DOM2 和 DOM3 级则在这个结构...

  • 十八

    DOM2和DOM3DOM1级主要定义的是HTML和XML文档的低层结构。DOM2和DOM3级则在这个结构的基础上引...

  • DOM事件

    DOM级别与DOM事件 DOM级别：DOM0级、DOM1级、DOM2级、DOM3级DOM事件：DOM0级事件处理、...

  • DOM0,DOM2,DOM3的区别

    DOM级别 DOM级别一共可以分为四个级别：DOM0级、DOM1级、DOM2级和DOM3级。而DOM事件分为3个级...

网友评论

      本文标题：JS高程：读书摘要（九）DOM2级和DOM3级 - [part

      本文链接：https://www.haomeiwen.com/subject/sjgedqtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|JS高程：读书摘要（九）DOM2级和DOM3级 - [part|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！