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));
返回的结果因为是掩码的值,所以运算一下,得到正常布尔值。