html5关于DOM的扩展

1. readyState 属性

有两个可能的值： loading，正在加载文档； complete，已经加载完文档；

通过它来实现一个指示文档已经加载完成的指示器，可用来替代window.onload

if (document.readyState == "complete") {
        //执行操作
}

2. 兼容模式

为了区分渲染页面的模式是标准的还是混杂的，compatMode属性就是为了告诉开发人员浏览器采用了哪种渲染模式。

在标准模式下，document.compatMode 的值等于"CSS1Compat"，而在混杂模式下，document.compatMode 的值等于"BackCompat"。

if (document.compatMode == "CSS1Compat"){     
      alert("Standards mode");
 } else {     
        alert("Quirks mode"); 
  }

3.head属性

作为对 document.body 引用文档的<body>元素的补充，HTML5新增了 document.head 属性，引用文档的<head>元素。为确保取得head元素，可使用如下方法：

var head = document.head || document.getElementsByTagName("head")[0];

4.字符集属性

charset 属性表示文档中实际使用的字符集， defaultCharset，表示根据默认浏览器及操作系统的设置

5.HTML5规定可以为元素添加非标准的属性，但要添加前缀 data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以 data-开头即可。

<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>

添加了自定义属性之后，可以通过元素的 dataset 属性来访问自定义属性的值。dataset 属性的值是 DOMStringMap 的一个实例，也就是一个名值对儿的映射。在这个映射中，每个 data-name 形式的属性都会有一个对应的属性，只不过属性名没有 data-前缀（比如，自定义属性是 data-myname，那映射中对应的属性就是 myname）

var div = document.getElementById("myDiv");

    //取得自定义属性的值 
    var appId = div.dataset.appId;
    var myName = div.dataset.myname;

    //设置值
    div.dataset.appId = 23456;
    div.dataset.myname = "Michael";

    //有没有"myname"值呢？ 
    if (div.dataset.myname) {
        alert("Hello, " + div.dataset.myname);
    }

6.插入标记

a、innerHTML属性，包括读模式和写模式。

使用 innerHTML 属性也有一些限制。比如，在大多数浏览器中，通过 innerHTML 插入<script> 元素并不会执行其中的脚本。

b、 outerHTML 属性

在读模式下，outerHTML 返回调用它的元素及所有子节点的 HTML标签。在写模式下，outerHTML 会根据指定的 HTML字符串创建新的 DOM子树，然后用这个 DOM子树完全替换调用元素。

读模式：

<!DOCTYPE>

<html> <head></head> <body> <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> </body> <script> var div = document.getElementById("content"); console.log(div.outerHTML,'\n~~~~~~~~~~~~~~~~~\n',div.innerHTML) </script> </html>

运行结果截图：

写模式：

<!DOCTYPE>
<html>

<head></head>

<body>
    <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>
</body>
<script>
    var div = document.getElementById("content");
    div.outerHTML = "<p>This is a paragraph.</p>"; 
</script>

</html>

运行结果：

c、insertAdjacentHTML()方法

<!DOCTYPE> <html> <head></head> <body> <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> </body> <script> var div = document.getElementById("content");

    // 在当前元素之前插入一个紧邻的同辈元素 div.insertAdjacentHTML('beforebegin','<p>beforebegin</p>')

    //在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素 div.insertAdjacentHTML('afterbegin','<p>afterbegin</p>')

    //在当前元素之下插入一个新的子元素或在后一个子元素之后再插入新的子元素 div.insertAdjacentHTML('beforeend','<p>beforeend</p>')

    //在当前元素之后插入一个紧邻的同辈元素 div.insertAdjacentHTML('afterend','<p>afterend</p>') </script> </html>


运行结果：

7、scrollIntoView()方法

scrollIntoView()可以在所有 HTML 元素上调用，通过滚动浏览器窗口或某个容器元素，调用 元素就可以出现在视口中。如果给这个方法传入 true 作为参数，或者不传入任何参数，那么窗口滚动 之后会让调用元素的顶部与视口顶部尽可能平齐。如果传入 false 作为参数，调用元素会尽可能全部 出现在视口中，（可能的话，调用元素的底部会与视口顶部平齐。）不过顶部不一定平齐，例如： 
 
//让元素可见

document.forms[0].scrollIntoView();

实际上，为某个元素设置焦点也会导致浏览器滚动并显示出获得焦点的元素。

html5关于DOM的扩展

猜你喜欢