template标签
<template id="hhhhold-template">
<img src="" alt="random hhhhold image">
<h3 class="title"></h3>
</template>
<script type='text/javascript'>
var template = document.querySelector('#hhhhold-template');
template.content.querySelector('img').src = 'http://hhhhold.com/350x200';
template.content.querySelector('.title').textContent = 'Random image from hhhhold.com'
document.body.appendChild(template.content.cloneNode(true));
</script>document.DocumentFragment(htmlElem)的使用
var docFrag = document.createDocumentFragment();
var li = document.createElement("li");
li.textContent = "Hello World";
docFrag.appendChild(li);
document.queryselector('ul').appendChild(docFrag);选区Range.createContextualFragment(htmlText);(IE浏览器支持不好)
var fragment = null;
if(!isIE)
{
fragment = range.createContextualFragment(htmlText);
}matchesSelector方法
该方法返回一个布尔值，表示Element对象是否符合某个CSS选择器。
document.querySelector('li').matchesSelector('li:first-child')
scrollIntoView方法
该方法用于将一个可滚动元素滚动到可见区域。
document.querySelector('content').children[4].scrollIntoView();
scrollIntoView方法接受一个布尔值作为参数，默认值为true，表示滚动到HTML元素的上方边缘，如果该值为false，表示滚动到下方边缘。
insertAdjacentHTML方法
insertAdjacentHTML方法可以将一段字符串，作为HTML或XML对象，插入DOM。比如，原来的DOM结构如下：
<div id="box1"> <p>Some example text</p> </div> <div id="box2"> <p>Some example text</p> </div>
insertAdjacentHTML方法可以轻而易举地在上面两个div节点之间，再插入一个div节点。
var box2 = document.getElementById("box2"); box2.insertAdjacentHTML('beforebegin', '<div><p>This gets inserted.</p></div>');
插入以后的DOM结构变成下面这样：
<div id="box1">
<p>Some example text</p>
</div>
<div><p>This gets inserted.</p></div>
<div id="box2">
<p>Some example text</p>
</div>
insertAdjacentHTML方法接受两个参数，第一个是插入的位置，第二个是插入的节点字符串。关于插入的位置，可以取下面四个值。
beforebegin：在指定元素之前插入，变成它的同级元素。
afterbegin：在指定元素的开始标签之后插入，变成它的第一个子元素。
beforeend：在指定元素的结束标签之前插入，变成它的最后一个子元素。
afterend：在指定元素之后插入，变成它的同级元素。
