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

  • A+
所属分类:JavaScript

 

文档模式

页面的文档模式是由IE8引入的,文档模式决定了可以使用的CSS级别、JS中的API以及如何对待文档类型(doctype);在IE9,提供了4中文档模式:

  • IE5:混杂模式;
  • IE7:IE7标准模式渲染页面;
  • IE8:IE8标准模式渲染页面,可以使用Selectors API、更多CSS2级选择符和某些CSS3功能、HTML5的一些功能;
  • IE9:IE9标准模式渲染页面,这个文档模式是最高级的模式;

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

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

其中IEVersion有以下取值:

  • Edge:始终以最新的文档模式来渲染页面;
  • EmulateIE9:如果有文档类型声明,以IE9标准模式渲染页面,否则将文档模式设置为IE5;
  • 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 = 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);
}

 

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: