HTML5新增了哪些内容或API

作者: Aniugel | 来源:发表于2019-04-22 15:44 被阅读2次

1.document.querySelector()和document.querySelectorAll()

document.querySelector()：根据css选择器返回第一个匹配的元素，如果没有匹配返回null；

document.querySelectorAll("selector")：querySelectorAll和querySelector作用一样的，只是querySelectorAll返回的是元素数组，querySelector返回的是一个元素。如果querySelectorAll没有匹配的内容返回的是一个空数组。

image.png

2.document.getElementsByClassName()

getElementsByClassName()方法接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的NodeList。传入多个类名时，类名的先后顺序不重要。

<body>
  <div class="demo demo1 demo3">67890</div>
  <div class="demo1">67890</div>
  <div class="demo">67890</div>
  <div class="demo">67890</div>
  <div class="demo">67890</div>
</body>
<script>
  var demo = document.getElementsByClassName('demo')[0].style.color = 'red'
  console.log(document.getElementsByClassName('demo'))


</script>

image.png

3.classList属性

add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
remove(value)：从列表中删除给定的字符串。
toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它

<style>
  .demo3 {
    color: red;
  }
</style>

<body>
  <div class="demo demo1" onclick="demo()">67890</div>

</body>
<script>

  function demo() {
    var isClass = document.getElementsByClassName('demo')[0].classList.contains('demo3');
    console.log(isClass)
    document.getElementsByClassName('demo')[0].classList.toggle('demo3');
  }

</script>

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()方法。它接收两个参数：插入位置和要插入的HTML 文本。第一个参数必须是下列值之一：

"beforebegin"，在当前元素之前插入一个紧邻的同辈元素；
"afterbegin"，在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；
"beforeend"，在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素；
"afterend"，在当前元素之后插入一个紧邻的同辈元素。

--element.insertAdjacentHTML('beforebegin','<p>hello world</p>');

6.FullScreen API...

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    html:-moz-full-screen {
      background: red;
    }

    html:-webkit-full-screen {
      background: red;
    }

    html:fullscreen {
      background: red;
    }
  </style>
</head>

<body>
  <ul class="class1 class2 class3 ">
    <li onclick="launchFullScreen()">全屏</li>
    <input type="text">
  </ul>
  <button onclick="exitFullscreen()">click me</button>
  <script>
    // 找到支持的方法, 使用需要全屏的 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();
      }
    }

    element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);//全屏状态允许键盘输入

    /*有的时候为了用户友好体验，在进入全屏或者退出全屏的时候，需要给用户提示，
    这个时候我们可以使用FullScreen的screenchange事件进行监控。事件监听没作用？？？？？*/
    document.addEventListener("fullscreenchange", function () {
      fullscreenState.innerHTML = (document.fullscreen) ? "" : "not ";
    }, false);

    document.addEventListener("mozfullscreenchange", function () {
      fullscreenState.innerHTML = (document.mozFullScreen) ? "" : "not ";
    }, false);

    document.addEventListener("webkitfullscreenchange", function () {
      fullscreenState.innerHTML = (document.webkitIsFullScreen) ? "" : "not ";
    }, false);


  </script>
</body>
</html>

7.页面可见性（Page Visibility）...

所谓页面可见性就是当前页面是处于显示状态还是隐藏状态，页面可见性对于网站的统计非常有用。有的时候我们会统计用户停留在每个页面的时间，这个时间就是：用户打开网页到网页关闭或者最小化之间的时间。

有的时候在视频播放的时候，当用户离开视频播放页面自动暂停视频播放，我们有时候也对那些定期刷新内容的页面进行控制，当该页面不可见则不刷新，可见则刷新。这些都是页面可见性的具体应用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<ul class="class1 class2 class3 ">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>
<script>
  (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"});
  })();
</script>
</body>
</html>

8.预加载（prefetch）

网站优化一直是项目开发中的重点之中，常用的优化方式主要有：图片懒加载、图片sprite、css合并、js合并、数据本地存储、数据网络缓存等。这些都是项目中经常使用的，HTML5考虑到了这一点，提出了链接预加载的方法，其实，这个方案是FireFox提出的，所以它对链接预加载绝对的支持。什么是链接预加载那？我们看一下mdn的描述：
预加载是一种浏览器机制，使用浏览器空闲时间来预先下载/加载用户接下来很可能会浏览的页面/资源。页面提供给浏览器需要预加载的集合。浏览器载入当前页面完成后，将会在后台下载需要预加载的页面并添加到缓存中。当用户访问某个预加载的链接时，如果从缓存命中, 页面就得以快速呈现。
说的直接一些就是让浏览器在后台提前下载一些文件

关于链接预加载，有如下注意事项：

预加载可以跨域进行，当然，请求时cookie等信息也会被发送。
预加载可能破坏网站统计数据，而用户并没有实际访问。
浏览器兼容性不是很好

9.图形元素（The Figure Element）canvas

10.内容可编辑（contenteditable）

<!DOCTYPE HTML>
<html>
<body>

<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>

</body>
</html>

11.本地存储（Local Storage）

网友评论

HTML/HTML5

本文标题：HTML5新增了哪些内容或API

本文链接：https://www.haomeiwen.com/subject/mgpygqtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！