html5 新增javascript api的学习

最新推荐文章于 2024-09-16 08:47:17 发布

weixin_33736832

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量67

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/ososchina/blog/350698

版权

2019独角兽企业重金招聘Python工程师标准>>>

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方法接受两个参数，第一个是插入的位置，第二个是插入的节点字符串。关于插入的位置，可以取下面四个值。