JavaScript DOM扩展——“专有扩展”的注意要点

时间 2019-12-05

标签 javascript dom 扩展专有注意要点栏目 JavaScript 繁體版

原文原文链接

文档模式

页面的文档模式是由IE8引入的，文档模式决定了可使用的CSS级别、JS中的API以及如何对待文档类型（doctype）；在IE9，提供了4中文档模式：html

IE5：混杂模式；chrome
IE7：IE7标准模式渲染页面；浏览器
IE8：IE8标准模式渲染页面，可使用Selectors API、更多CSS2级选择符和某些CSS3功能、HTML5的一些功能；测试
IE9：IE9标准模式渲染页面，这个文档模式是最高级的模式；ui

要强制浏览器以某种模式渲染页面，可使用HTTP头部信息X-UA-Compatible，或经过等价的meta标签来设置：code

<meta http-equiv="X-UA-Compatible" content="IE-IEVersion">

其中IEVersion有如下取值：htm

Edge：始终以最新的文档模式来渲染页面；ip
EmulateIE9：若是有文档类型声明，以IE9标准模式渲染页面，不然将文档模式设置为IE5；element
EmulateIE8：若是有文档类型声明，以IE8标准模式渲染页面，不然将文档模式设置为IE5；文档
EmulateIE7：若是有文档类型声明，以IE7标准模式渲染页面，不然将文档模式设置为IE5；
9：强制以IE9标准模式渲染页面，忽略文档类型声明；
8：强制以IE8标准模式渲染页面，忽略文档类型声明；
7：强制以IE7标准模式渲染页面，忽略文档类型声明；
5：强制以IE5标准模式渲染页面，忽略文档类型声明；

如：

<meta http-equiv="X-UA-Compatible" content="IE-EmulateIE7">

或直接使用IE7模式：

<meta http-equiv="X-UA-Compatible" content="IE-7">

经过document.documentMode属性能够知道给定页面使用的是什么文档模式。

`children`属性

该属性只包含元素中一样仍是元素的子节点，除此以外，该属性与childNodes没区别；

console.log(document.body.children.length);

IE<9的浏览器有bug；

`contains()`方法和`compareDocumentPosition()`方法

前者调用的应该是祖先节点，接收一个参数即要检测的后代节点；后者则是DOM Level 3中的，会返回以下掩码：

Bits Number Meaning
000000 0 元素一致
000001 1 节点在不一样的文档（或者一个在文档以外）
000010 2 节点 B 在节点 A 以前
000100 4 节点 A 在节点 B 以前
001000 8 节点 B 包含节点 A
010000 16 节点 A 包含节点 B
100000 32 浏览器的私有使用

对于contains()方法，以下：

console.log(document.documentElement.contains(document.body)); //true

对于compareDocumentPosition()方法则：

var result = document.getElementById("divId").compareDocumentPosition(document.getElementById("pId"));
//4，给定的节点pId在参考的节点divId的后面，居后
var result = document.getElementById("pId").compareDocumentPosition(document.getElementById("divId"));
//2，给定的divId在参考的pId的前面，居前
var result = document.documentElement.compareDocumentPosition(document.body);
//20（16+4），给定的body被包含于参考的html中而且位于其以后
var result = document.body.compareDocumentPosition(document.documentElement);
//10（8+2），给定的html是参考的body的祖先而且位于其前
var result = document.body.compareDocumentPosition(document.body);
//0 元素一致；

插入文本

`innerText`属性

该属性能够操做元素中包含的全部文本内容；如下面代码示例：

<div id="content">
    <p>This is a <strong>paragraph</strong> with a list following it.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

其innerText属性会返回以下字符串：

This is a paragraph with a list following it.

Item 1
Item 2
Item 3

若是设置其innerText，则会变成这样：

document.getElementById("content").innerText = "hello there";

console.log(document.body.outerHTML);
// <body>
//     <div id="content">hello there</div>
//     <script src="testingjs.js"></script>
// </body>

若是在其中加入了html标签，则会变成这样：

document.getElementById("content").innerText = "<p>hello there</p>";

console.log(document.body.outerHTML);
// <body>
//     <div id="content">&lt;p&gt;hello there&lt;/p&gt;</div>
//     <script src="testingjs.js"></script>
// </body>

利用这一点能够用这个属性去掉全部的html标签，以下：

document.getElementById("content").innerText = document.getElementById("content").innerText;

console.log(document.body.outerHTML);
// <body>
//     <div id="content">This is a paragraph with a list following it.<br><br>Item 1<br>Item 2<br>Item 3</div>
//     <script src="testingjs.js"></script>
// </body>

值得注意的是Firefox虽然不支持innerText，但支持textContent属性。为了兼容性，应采用下面的代码：

function getInnerText(element) {
    if (typeof element.textContent == "string") {
        return element.textContent;
    } else {
        return element.innerText;
    }
}
function setInnerText(element, text) {
    if (typeof element.textContent == "string") {
        element.textContent = text;
    } else {
        element.innerText = text;
    }
}

`outerText`属性（尽可能不要用）

与innerText属性的区别：

var div = document.getElementById("content");
div.innerText = "hello there";
console.log(document.body.innerHTML); //<div id="content">hello there</div>

var div = document.getElementById("content");
div.outerText = "hello there";
console.log(document.body.innerHTML); //hello there

由于这个属性会致使调用它的元素不存在，所以这个属性并不经常使用

滚动

主要有如下几个方法：

scrollIntoView()：true的话尽可能显示在顶端，false的话则是底部；
scrollIntoViewIfNeeded(alignCenter)：若是为true，则表示尽可能将元素显示在视口中部；
scrollBy(xnum,ynum)：xnum 必需，把文档向右滚动的像素数；ynum必需，把文档向下滚动的像素数。

另外，scrollByLinew(lineCount)以及scrollByPages(pageCount)这两个方法，在chrome测试了一下，并没有反应。不知是否兼容问题。

下面是document得到焦点的时候，自动以每10毫秒的速度往下滚屏：

var x = setTimeout(focus, 10);
function focus() {
    if (document.hasFocus()) {
        window.scrollBy(0,1);
    }
var y = setTimeout(focus, 10);
}

JavaScript DOM扩展——“专有扩展”的注意要点

文档模式

children属性

contains()方法和compareDocumentPosition()方法

插入文本

innerText属性

outerText属性（尽可能不要用）

滚动

`children`属性

`contains()`方法和`compareDocumentPosition()`方法

`innerText`属性

`outerText`属性（尽可能不要用）