HTML5扩展

ClassList

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

div.classList.add("newClass");

div.classList.remove("newClass");

div.classList.contains("newClass");//判断是否包含class类

div.classList.toggle("newClass"); //如果存在则删除该类，如果没有则添加

activeElement方法-当前页面获取焦点的对象

用于返回当前页面中获取焦点的对象。

var btn = document.getElementById("btn");

btn.focus();

document.activeElement == btn;//trun

hasFocus方法

判断文档是否获取焦点

document.hasFocus() 返回true和false

readyState –文档加载状态

这个属性有两个值loading正在加载文档和complete已经加载完文档。

if (document.readyState == "complete")

            {

                alert("页面已经加载完成")

            }

alert(document.characterSet);

document.characterSet = "GBK";

自定义属性-dataset

使用自定义属性可以在标签内部用data-的形式复制，在用js代码取值的时候，用元素对象的dataset属性找出即可。

<div id="div1" data-value="val1" class="triangle">

        <p>内部文字1</p>

        <p>内部文字2</p>

</div>

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

alert(div.dataset.value);

insertAdjcentHTML方法-插入标记

方法接收两个参数，都是字符串类型，第一个参数代表插入的位置，第二个参数代表html字符串

位置的四个属性分别是：

1、  beforebegin:在元素之前插入一个紧邻的元素。

2、  afterbegin：作为第一个元素插入。

3、  beforeend：作为最后一个元素插入。

4、  afterend：在元素之后插入一个元素

div.insertAdjacentElement("beforebegin", "<p>hello</p>");

div.insertAdjacentElement("afterbegin", "<p>hello</p>");

div.insertAdjacentElement("beforeend", "<p>hello</p>");

div.insertAdjacentElement("afterend", "<p>hello</p>");

特别注意的是，不要使用类似循环的方式多次对页面元素进行添加，这样会导致效率低下，因为每次在添加元素的时候，会先读取这个元素，然后在添加某个元素对象，这样添加一次就会对元素操作两次（读和赋值），所以应该采用拼接好字符串，统一进行添加

文档模式

在IE中，常常会碰到样式不兼容的情况，这一般是因为浏览器的文档模式过低的原因，所以在head里加一个转换文档模式的标签，强制转换为最新的文档模式来渲染页面，以达到兼容目的。

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

获取文档模式代码

var mode = document.documentMode; //只在IE中有效

alert(mode);

children属性

children与childNodes没有什么区别，都是返回元素的子节点。

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

var childCount = div.children.length;

var firstChild = div.children[0];

compareDocumentPosition方法-判断某元素和比较元素的位置

compareDocumentPosition方法返回值为掩码，分别是：

1 无关，不在当前文档中

2 居前 在参考节点之前。

4 居后 在参考节点之后。

8 包含 给定的节点是参考节点的祖先元素。

16 被包含 给定的节点是参考节点后代元素。

 

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

var p=document.getElementById("p1");

var result = div.compareDocumentPosition(p);

alert(!!(result&16));

 

返回的结果因为是掩码的值，所以运算一下，得到正常布尔值。