HTML5新增API

最新推荐文章于 2021-03-13 08:13:40 发布

yuan_jiazhen

最新推荐文章于 2021-03-13 08:13:40 发布

阅读量253

点赞数

分类专栏： HTML5 文章标签： HTML5 新增API 全屏 css选择器

本文链接：https://blog.csdn.net/qq_41853517/article/details/99487034

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

参考：http://www.68kejian.com/page/study/course/94/536

HTML5浏览器支持：最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

一、新CSS选择器

 // html
 <ul id="elementId" name="elementName" class="elementClass">
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

1.过去获取DOM节点的方式

function getValue(){
	var byId=document.getElementById("elementId");
	var byName=document.getElementsByName("elementName");
	var byTagName=document.getElementsByTagName("li");
	console.log(byId,"byId");//返回元素
	console.log(byName,"byName");//返回数组格式
	console.log(byTagName,"byTagName");//返回数组格式
}

运行结果：

alt

2.HTML5新增选择器获取DOM节点

2.1 document.querySelector，获取第一个匹配到的元素，没有则返回null。

function getValue(){
	var selector=document.querySelector("li");
    //var selector=document.querySelector("#elementId li");	//也支持多个选择器	
	console.log(selector,"selector");
}

运行结果：

2.2 document.querySelectorAll，获取匹配到的所有元素，返回数组格式。

function getValue(){
	var selectorAll=document.querySelectorAll("li");	
	console.log(selectorAll,"selectorAll");
}

运行结果：

2.3 document.getElementsByClassName，获取所有与类名相匹配的元素，返回数组格式。

function getValue(){
	var byClassName=document.getElementsByClassName("elementClass");
	console.log(byClassName,"byClassName");
	console.log(byClassName[0].innerHTML,"innerHTML");
}

运行结果：

alt

二、classList属性

classList返回元素的所有类名，用于元素中添加、移除、切换CSS类。

添加:add()

移除：remove()

匹配到则移除该类名，否则添加该类名：toggle()

切换:item() //element.classList.item(1) 为element的第二个类名

检测类名是否存在,存在返回true,否false：contains()

兼容性：如下图所见，不乐观，不推荐使用。

alt

// 需增加的CSS类
.mystyle {
    width: 300px;
    height: 50px;
    background-color: coral;
    color: white;
    font-size: 25px;
}

// HTML
<button onclick="myFunction()">点击增加CSS类</button>
<div id="myDIV">我是一个 DIV 元素。</div>

// js
function myFunction() {
    document.getElementById("myDIV").classList.add("mystyle");
}

运行结果：

alt

三、FullScreen全屏

常用于视频播放、文档阅读、大屏展示等需要全屏展示带给用户更好的视觉体验的场景。

兼容性：

alt

API:

（1）fullscreenElement：返回属于全屏模式的DOM元素。

（2）fullscreenEnabled：返回当前document是否进入了可请求全屏模式状态。

（3）requestFullScreen()：请求进去全屏模式的方法。

（4）exitFullScreen()：退出全屏模式。

（5）fullscreenchange：进入/退出全屏模式时触发。

（6）fullscreenerror：进入/退出全屏模式失败时触发

使用注意：由于各个浏览器对FullScreen接口实现的方式不一样，主要是因为浏览器内核的差别，所以在使用的时候要考虑浏览器的兼容性。

requestFullScreen()进入全屏

// HTML
<ul class="class1 class2 class3 ">
    <li onclick="launchFullScreen()">点击此标签，全屏显示</li>
</ul>

// JS
function launchFullScreen(element) {
        var element=element||document.documentElement;
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {//firefox
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {//safari、chrome
            element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {//ie
            element.msRequestFullscreen();
        }
    }

运行结果：

alt

exitFullScreen()退出全屏

function exitFullscreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozExitFullScreen) {
            document.mozExitFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    }

fullscreenchange检查全屏状态变化

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

full-screen设置全屏样式

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

四、Page Visibility页面可见性

概念：页面可见性为当前页面是处于显示还是隐藏状态，例如用户打开网页1又打开网页2，停留在网页2查看东西，那么对于网页1是隐藏（离开）状态，对于网页2是显示状态。

用途：网站统计。统计用户在每个网页上逗留的时间或用户离开网站时，暂停该网站的视频播放、定期刷新页面等。

1、H5之前做法：通过window.onfocus和window.onblur判断用户鼠标是否在当前窗口。从而判断用户是否与该页面交互。

window.onfocus = function(){
	console.log("进入网页")
}
window.onblur = function(){
	console.log("离开网页")
}

运行结果：

alt

缺点：如果用户打开网页，同时进行word编辑，这时焦点在word编辑器里，但页面仍可见，所以通过焦点来判断是不精确的。

2、Page Visibility的做法

属性：

（1）document.hidden 当前页面是否可见。

（2）document.visibilityState 返回当前页面的可见状态。

visible：页面内容至少部分可见.意味着该页面是一个非最小化窗口的前台标签页。

hidden：页面内容用户不可见.意味着当前浏览器窗口处于最小化模式,或者该页面是一个后台标签页。

prerender：页面内容正在被预渲染,用户不可见(这种情况document.hidden会返回true). 一个页面只有在初始化时可能为这个值, 一旦变为其他两种值,不可能再变回来。

unloaded : 当前文档已经被卸载,用户不可见(这种情况下document.hidden会返回true).

（3）visibilitychange: 当可见状态改变时候触发的事件。

简单使用（未考虑兼容）

document.addEventListener('visibilitychange', function() {
        var isHidden = document.hidden;
        if (isHidden) {
            console.log('已离开该页面')
        } else {
            console.log('已进入该页面');
        }
		console.log(document.visibilityState,"当前页面可见状态")
    });

切换标签页后运行结果：

alt

兼容写法

(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"});
})();

五、预加载

常用的网站优化方法有：图片懒加载、图片sprite、css合并、js合并、数据本地存储、数据网络缓存等。于是，H5出现了链接预加载的方式。

链接预加载：利用浏览器空闲时间在后台预先下载/加载用户可能需要的资源/页面等，当用户需要时，直接从缓存提取，使用户快速得到想要的。

1、link的prefetch属性（兼容性差）

<!-- 页面，可以使用绝对或者相对路径 -->  
<link rel="prefetch" href="page2.html" />  
  
<!-- 图片，也可以是其他类型的文件 -->  
<link rel="prefetch" href="sprite.png" />

兼容性：

alt

2、link的dns-prefetch（兼容性好些）

<link rel="dns-prefetch" href="http://example-domain.com/">

兼容性：

alt

注意：

（1）预加载可以跨域进行，当然，请求时cookie等信息也会被发送。

（2）预加载可能破坏网站统计数据，而用户并没有实际访问。

（3）浏览器兼容性不是很好。

yuan_jiazhen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5新增API

参考：http://www.68kejian.com/page/study/course/94/536HTML5浏览器支持：最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。一、新CSS选择器 // html <ul id="elementId" name...
复制链接

扫一扫