template标签

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

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结构如下：

    
          
     
Some example text
 
    
 
    
          
     
Some example text
 
    

insertAdjacentHTML方法可以轻而易举地在上面两个div节点之间，再插入一个div节点。

var box2 = document.getElementById("box2"); box2.insertAdjacentHTML('beforebegin', '
    
     
This gets inserted.
    
');

插入以后的DOM结构变成下面这样：

    
           
     
Some example text
  
    
  
    
     
This gets inserted.
    
  
    
          
     
Some example text
  
    

insertAdjacentHTML方法接受两个参数，第一个是插入的位置，第二个是插入的节点字符串。关于插入的位置，可以取下面四个值。

• beforebegin：在指定元素之前插入，变成它的同级元素。

• afterbegin：在指定元素的开始标签之后插入，变成它的第一个子元素。

• beforeend：在指定元素的结束标签之前插入，变成它的最后一个子元素。

• afterend：在指定元素之后插入，变成它的同级元素。