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));

 

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

posted @ 2016-04-15 16:10  8932809  阅读(442)  评论(0编辑  收藏  举报