HTML5 新增了哪些内容或 API
1.document.querySelector()和 document.querySelectorAll()
document.querySelector()：根据 css 选择器返回第一个匹配的元素，如果没有匹配返回 null; 返回 HTMLElement 对象
复杂一点的选择器
document.querySelector("div.user-panel.main input[name='login']");
document.querySelectorAll()：querySelectorAll 和 querySelector 作用一样的，只是 querySelectorAll 返回的是元素数组，querySelector 返回的是一个元素。如果 querySelectorAll 没有匹配的内容返回的是一个空数组。
2.document.getElementsByClassName(names)
getElementsByClassName(names)方法接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的 NodeList。传入多个类名时，类名的先后顺序不重要。返回的是以当前元素为根节点，所有指定类名的子元素。
names 是一个字符串，表示要匹配的类名列表；类名通过空格分隔
获取所有 class 同时包括 'red' 和 'test' 的元素.
document.getElementsByClassName('red test');
querySelectorAll/querySelector 方法相比 getElementsBy 系列方法有什么区别
大部分人都知道，querySelectorAll 返回的是一个 Static Node List，而 getElementsBy 系列的返回的是一个 Live HTMLCollection。
NodeList 对象会包含文档中的所有节点，如 Element、Text 和 Comment 等。HTMLCollection 对象只会包含文档中的 Element 节点。另外，HTMLCollection 对象比 NodeList 对象 多提供了一个 namedItem 方法。所以在现代浏览器中，querySelectorAll 的返回值是一个静态的 NodeList 对象，而 getElementsBy 系列的返回值实际上是一个 HTMLCollection 对象 。
document.querySelectorAll('a').toString(); // return "[object NodeList]"
document.getElementsByTagName('a').toString(); // return "[object HTMLCollection]"
3.classList 属性
-
add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
-
contains(value)：表示列表中是否存在给定的值，如果存在则返回 true，否则返回 false。
-
remove(value)：从列表中删除给定的字符串。
-
toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它
4.自定义数据属性
HTML5 规定可以为元素添加非标准的属性，但要添加前缀 data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以 data-开头即可。来看一个例子。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>dataset</title>
</head>
<body>
<input type="button" value="按钮" index="10" data-index="10" data-index-color="red">
<script>
var oBtn=document.querySelector('input');
console.log(oBtn.dataset); //DOMStringMap对象
console.log(oBtn.dataset.index); //10
console.log(oBtn.dataset.indexColor); //red
console.log(oBtn.index); //undefined
console.log('name' in oBtn.dataset); //false
oBtn.dataset.name='zpf';
console.log('name' in oBtn.dataset); //true
oBtn.dataset.index=100;
console.log(oBtn.dataset.index); //100
oBtn.index=20;
console.log(oBtn.index); //20
</script>
</body>
</html>
5.insertAdjacentHTML(),insertAdjacentText(),insertAdjacentElement()
insertAdjacentHTML() 方法将指定的文本解析为 Element 元素，并将结果节点插入到 DOM 树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接使用 innerHTML 操作更快。
element.insertAdjacentHTML(position, text);
position
表示插入内容相对于元素的位置，并且必须是以下字符串之一：
-
'beforebegin'：元素自身的前面。
-
'afterbegin'：插入元素内部的第一个子节点之前。
-
'beforeend'：插入元素内部的最后一个子节点之后。
-
'afterend'：元素自身的后面。
beforebegin 和 afterend 位置，仅在节点在树中且节点具有一个 parent 元素时工作。
// 原为 <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
// 此时，新结构变成：
// <div id="one">one</div><div id="two">two</div>
6.FullScreen API
// 找到支持的方法, 使用需要全屏的 element 调用
function launchFullScreen(element) {
var element = element || document.documentElement;
console.log(element);
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
//请注意: exitFullscreen 只能通过 document 对象调用 —— 而不是使用普通的 DOM element.
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozExitFullScreen) {
document.mozExitFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
7.页面可见性（Page Visibility）
所谓页面可见性就是当前页面是处于显示状态还是隐藏状态，页面可见性对于网站的统计非常有用。有的时候我们会统计用户停留在每个页面的时间，这个时间就是：用户打开网页到网页关闭或者最小化之间的时间。
有的时候在视频播放的时候，当用户离开视频播放页面自动暂停视频播放，我们有时候也对那些定期刷新内容的页面进行控制，当该页面不可见则不刷新，可见则刷新。这些都是页面可见性的具体应用。
(function() {
var hidden = "hidden";
// Standards:
if (hidden in document)
document.addEventListener("visibilitychange", onchange);
else if ((hidden = "mozHidden") in document)
document.addEventListener("mozvisibilitychange", onchange);
else if ((hidden = "webkitHidden") in document)
document.addEventListener("webkitvisibilitychange", onchange);
else if ((hidden = "msHidden") in document)
document.addEventListener("msvisibilitychange", onchange);
// IE 9 and lower:
else if ("onfocusin" in document)
document.onfocusin = document.onfocusout = onchange;
// All others:
else
window.onpageshow = window.onpagehide = window.onfocus = window.onblur = onchange;
function onchange(evt) {
var v = "visible",
h = "hidden",
evtMap = {
focus: v,
focusin: v,
pageshow: v,
blur: h,
focusout: h,
pagehide: h
};
evt = evt || window.event;
if (evt.type in evtMap) document.body.className = evtMap[evt.type];
else document.body.className = this[hidden] ? "hidden" : "visible";
}
// set the initial state (but only if browser supports the Page Visibility API)
if (document[hidden] !== undefined)
onchange({ type: document[hidden] ? "blur" : "focus" });
})();
8.预加载（prefetch）
9.内容可编辑（contenteditable）
<!DOCTYPE HTML>
<html>
<body>
<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>
</body>
</html>
网友评论