资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用

首页/文章专栏/JavaScript DOM扩展——“专有扩展”的注意要点

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

wudengzan 发布于2019-08-19 17:15 / 2697人阅读

摘要：另外，以及这两个方法，在测试了一下，并无反应。不知是否兼容问题。下面是获得焦点的时候，自动以每毫秒的速度往下滚屏

文档模式

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

IE5：混杂模式；

IE7：IE7标准模式渲染页面；

IE8：IE8标准模式渲染页面，可以使用Selectors API、更多CSS2级选择符和某些CSS3功能、HTML5的一些功能；

IE9：IE9标准模式渲染页面，这个文档模式是最高级的模式；

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

其中IEVersion有以下取值：

Edge：始终以最新的文档模式来渲染页面；

EmulateIE9：如果有文档类型声明，以IE9标准模式渲染页面，否则将文档模式设置为IE5；

EmulateIE8：如果有文档类型声明，以IE8标准模式渲染页面，否则将文档模式设置为IE5；

EmulateIE7：如果有文档类型声明，以IE7标准模式渲染页面，否则将文档模式设置为IE5；

9：强制以IE9标准模式渲染页面，忽略文档类型声明；

8：强制以IE8标准模式渲染页面，忽略文档类型声明；

7：强制以IE7标准模式渲染页面，忽略文档类型声明；

5：强制以IE5标准模式渲染页面，忽略文档类型声明；

如：

或直接使用IE7模式：

通过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属性

该属性可以操作元素中包含的所有文本内容；以下面代码示例：


    This is a paragraph with a list following it.
    
        Item 1
        Item 2
        Item 3

其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);
// 
//     hello there
//     
//

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

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

console.log(document.body.outerHTML);
// 
//     hello there
//     
//

利用这一点可以用这个属性去掉所有的html标签，如下：

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

console.log(document.body.outerHTML);
// 
//     This is a paragraph with a list following it.

Item 1
Item 2
Item 3
//     
//

值得注意的是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); //hello there

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对象 javascript的dom编程 javascript dom javascript dom 编程艺术

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78342.html

JavaScript DOM扩展——“选择符API和元素遍历”的注意要点

摘要：实际上，的核心就是通过选择符查询文档取得元素的引用。方法该方法接收一个选择符，返回的是所有匹配的元素而不仅仅是一个元素。而其底层实现则类似于一组元素的快照，而非不断对文档进行搜索的动态查询。选择符API Selector API Level1 的核心就是两个方法：querySelector()和querySelectorAll()。实际上，jQuery的核心就是通过CSS选择符查询D...

justCoding 2019-08-19 17:13 评论0 收藏0
JavaScript DOM扩展——“HTML5”的注意要点

摘要：如他返回的对象是。方法，这个方法用于确定文档是否获得了焦点。另外，需要注意的是，该属性插入元素并不会执行其中的脚本。在中，方法接收一个字符串，返回一个经过无害处理后的版本。属性同样的，在读模式下返回调用它的元素及所有子节点的标签。与类相关的扩充 getElementsByClassName()方法接收一个参数，即一个或多个类名的字符串。如： console.log(documen...

cppowboy 2019-08-19 17:14 评论0 收藏0
JavaScript DOM扩展——“HTML5”的注意要点

摘要：如他返回的对象是。方法，这个方法用于确定文档是否获得了焦点。另外，需要注意的是，该属性插入元素并不会执行其中的脚本。在中，方法接收一个字符串，返回一个经过无害处理后的版本。属性同样的，在读模式下返回调用它的元素及所有子节点的标签。与类相关的扩充 getElementsByClassName()方法接收一个参数，即一个或多个类名的字符串。如： console.log(documen...

Donald 2019-08-02 18:25 评论0 收藏0
JavaScript DOM2和DOM3——“DOM的变化”的注意要点

摘要：和级分为许多模块，分别描述了的某个非常具体的子集。这些模块主要有核心视图事件样式遍历和范围以及。另外还有方法和方法框架的变化框架和内嵌框架分别用和表示，它们在级中都有一个新属性这个属性包含一个指针，指向表示框架内容的文档对象。 DOM2和DOM3级分为许多模块，分别描述了DOM的某个非常具体的子集。这些模块主要有核心（Core）、视图（Views）、事件（Events）、样式（Styl...

骞讳护 2019-08-19 17:14 评论0 收藏0
JavaScript DOM2和DOM3——“遍历”的注意要点

摘要：级遍历和范围模块定义了两个用于辅助完成顺序遍历结构的类型和这两个类型能够基于给定的起点对结构执行深度优先的遍历操作。其中的属性，表示任何遍历方法在上一次遍历中返回的接待你。通过设置这个属性也可以修改遍历继续进行的节点。 DOM2级遍历和范围模块定义了两个用于辅助完成顺序遍历DOM结构的类型：NodeIterator和TreeWalker；这两个类型能够基于给定的起点对DOM结构执行深度...

antz 2019-08-19 17:17 评论0 收藏0