HTML5 新特性API汇总

最新推荐文章于 2023-08-24 19:36:05 发布

web还不是

最新推荐文章于 2023-08-24 19:36:05 发布

阅读量855

点赞数

分类专栏： HTML5 javascript知识点记录

本文链接：https://blog.csdn.net/qq_35480270/article/details/88294413

版权

javascript知识点记录同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

HTML5

10 篇文章 0 订阅

订阅专栏

1、document.querySelector()和document.querySelectorAll()方法

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

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

2、HTML5之classList属性

classList属性没有出现之前js操作元素class都是使用className,但是在开发一个网站的时候标签的class不只是一个，有可能有很多。

<body>
  <ul class="class1 class2 class3 ">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <script>
    var ul = document.getElementsByTagName("ul")[0];
    console.log(ul.classList.item(0));
    ul.classList.add("class4");
    ul.classList.remove("class4");
    console.log(ul.classList.contains("class1"));
    //add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
    //contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
    //remove(value)：从列表中删除给定的字符串。
    //toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。
  </script>
</body>

3、HTML5之全屏

为了方便用户的阅读或者观看视频，很多的网站实现了全屏功能。FullScreen API 是一个新的JavaScript API,简单而又强大. FullScreen 让我们可以通过编程的方式来向用户请求全屏显示,如果交互完成,随时可以退出全屏状态.

<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;
    alert(element.nodeName);
    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>

4、HTML5之页面可见性(Page Visibility)

5、HTML5 之预加载

网站优化一直是项目开发中的重点之中，常用的优化方式主要有：图片懒加载、图片sprite、css合并、js合并、数据本地存储、数据网络缓存等。这些都是项目中经常使用的，HTML5考虑到了这一点，提出了链接预加载的方法

预加载是一种浏览器机制，使用浏览器空闲时间来预先下载/加载用户接下来很可能会浏览的页面/资源。页面提供给浏览器需要预加载的集合。
浏览器载入当前页面完成后，将会在后台下载需要预加载的页面并添加到缓存中。当用户访问某个预加载的链接时，如果从缓存命中,
页面就得以快速呈现。

6、自定义数据属性

HTML5 规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以data-开头即可。来看一个例子。

<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>
//本例中使用的方法仅用于演示
var div = document.getElementById("myDiv");
//取得自定义属性的值
var appId = div.dataset.appId;
var myName = div.dataset.myname;
//设置值
div.dataset.appId = 23456;
div.dataset.myname = "Michael";
//有没有"myname"值呢？
if (div.dataset.myname) {
    alert("Hello, " + div.dataset.myname);
}

7、outerHTML 属性

在读模式下，outerHTML 返回调用它的元素及所有子节点的HTML 标签。在写模式下，outerHTML会根据指定的HTML 字符串创建新的DOM 子树，然后用这个DOM子树完全替换调用元素。下面是一个例子

使用outerHTML 属性以下面这种方式设置值：
oBox.outerHTML = "<p>This is a paragraph.</p>";
这行代码完成的操作与下面这些DOM 脚本代码一样：
var p = document.createElement("p");
p.appendChild(document.createTextNode("This is a paragraph."));
oBox.parentNode.replaceChild(p, oBox);

8、insertAdjacentHTML()方法

插入标记的最后一个新增方式是insertAdjacentHTML()方法。它接收两个参数：插入位置和要插入的HTML 文本。第一个参数必须是下列值之一：

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

注意，这些值都必须是小写形式。第二个参数是一个HTML 字符串（与innerHTML 和outerHTML的值相同），如果浏览器无法解析该字符串，就会抛出错误。以下是这个方法的基本用法示例。

//作为前一个同辈元素插入
element.insertAdjacentHTML("beforebegin", "<p>Hello world!</p>");
//作为第一个子元素插入
element.insertAdjacentHTML("afterbegin", "<p>Hello world!</p>");
//作为最后一个子元素插入
element.insertAdjacentHTML("beforeend", "<p>Hello world!</p>");
//作为后一个同辈元素插入
element.insertAdjacentHTML("afterend", "<p>Hello world!</p>");