HTML5新增的内容及API详解

Wesley13
• 阅读 768

querySelect()和querySelectAll()

后面都是跟一个css选择器;

前者返回符合条件的第一个匹配的元素,如果没有则返回Null;

后者返回符合筛选条件的所有元素集合(数组),如果没有符合筛选条件的则返回空数组。

document.getElementsByClassName(selector)

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

classList属性

  • add(value):将给定的字符串值添加到列表中。如果值已经存在,就不添加了。 

    <style>
        .b{border:1px solid #aaa;}
    </style>
    <div class = "a" id = "a">这是一个例子</div>
    <script type="text/javascript">
        var a = document.getElementsByClassName("a")[0];
        a.classList.add("b");
        /*
            或者:
           var a = document.getElementById("a");
            a.classList.add("b");
        */
    </script>
    
  • contains(value):表示列表中是否存在给定的value值,如果存在则返回true,不存在则返回false; 

    <div class = "a" id = "a">contains(value)判断</div>
    <script>
        document.getElementById("a").classList.contains("a");//返回true
    </script>
    
  • remove(value):移除元素中一个或多个类名。 

    <div class = "a  b" id = "a">remove掉一个元素的class类名</div>
    <script>
        document.getElementById("a").classList.remove("a");
        //结果:<div class = "b" id = "a">remove掉一个元素的class类名</div>
    </script>
    
  • item(index):返回类名在元素中的索引值,如果索引值。 

    <div class = "a  b" id = "a">remove掉一个元素的class类名</div>
    <script>
        document.getElementById("a").classList.remove("a");
        //结果:<div class = "b" id = "a">remove掉一个元素的class类名</div>
    </script>
    
  • toggle(value,true || false):将值为value的class在添加和移除之间切换.

    第一个参数为要在元素中移除的类名,并返回 false。
    如果该类名不存在则会在元素中添加类名,并返回 true。

    第二个是可选参数,是个布尔值用于设置元素是否强制添加或移除类,不管该类名是否存在。

    <div class = "a b" id = "a">toggle(value,true || false)</div>
    <script>
        var a = document.getElementById("a");
        a.classList.toggle("b");//返回false(移除)
        a.classList.toggle("b");//返回 turn(添加)
    </script>
    

自定义数据属性

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

<div id = "mtDiv" data-myname="mike"></div>
<script>
    var div = document.getElementById("myDiv");
    if(div.dataset.myname){alert(div.dataset.myname);}
</script>

insertAdjacentHtml(),insertAdjacentText()和insertAdjacentElement()

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

  • "beforeBegin":在当前元素之前插入一个紧邻的同辈元素;

  • "afterBegin":在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素;

  • "beforeEnd":在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素;

  • "afterEnd":在当前元素之后插入一个紧邻的同辈元素。

    ​element.insertAdjacentHTML("beforeBegin","<p>hello world</p>");​
    

FullScreen及其API

FullScreen API 是一个新的JavaScript API,简单而又强大. FullScreen 让我们可以通过编程的方式来向用户请求全屏显示,如果交互完成,随时可以退出全屏状态.

启动全屏模式

全屏API requestFullscreen方法在一些老的浏览器里面依然使用带前缀形式的方法名,因此可能需要进行检测判断:

<script>
    // 找到支持的方法, 使用需要全屏的 element 调用
    function launchFullScreen(element) {
        if(element.requestFullscreen) {
        element.requestFullscreen();
        } else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
        } else if(element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
        } else if(element.msRequestFullscreen) {
        element.msRequestFullscreen();
        }
    }
    // 在支持全屏的浏览器中启动全屏
    // 整个页面
    launchFullScreen(document.documentElement);
    // 某个元素
    launchFullScreen(document.getElementById("videoElement"));
</script>

将需要全屏显示的DOM元素作为参数,调用此方法即可让window进入全屏状态,有时候可能需要用户同意(浏览器自己和用户交互),假若用户拒绝,则可能出现各种不完全的全屏. 如果用户同意进入全屏,那么工具栏以及其他浏览器组件会隐藏起来,使document框架的宽度和高度横跨整个屏幕.

退出全屏模式

使用 exitFullscreen 方法可以使浏览器退出全屏,返回原先的布局. 该方法在一些老的浏览器上也是支持前缀方法.

<script>
    // 退出 fullscreen
    function exitFullscreen() {
        if(document.exitFullscreen) {
            document.exitFullscreen();
        } else if(document.mozExitFullScreen) {
            document.mozExitFullScreen();
        } else if(document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    }
// 调用退出全屏方法!
exitFullscreen();
</script>

请注意: exitFullscreen 只能通过 document 对象调用 —— 而不是使用普通的 DOM element.

Fullscreen 属性与事件

  • document.fullscreenElement:当前处于全屏状态的元素element;如果当前没有处于全屏的元素,则返回null。

    <script>
        var fullscreenElement =
            document.fullscreenElement ||
            document.mozFullScreenElement ||
            document.webkitFullscreenElement;
    </script>
    
  • documentlfullscreenEnable:返回一个Boolean值,标记fullscreen当前是否可用。 

    <script>
        var fullscreenEnable =
            document.fullscreenEnabled ||
            document.mozFullScreenEnabled ||
            document.webkitFullscreenEnabled ||
            document.msFullscreenEnabled;
        if(fullscreenEnabled){
            element.requestFullScreen();
        }else{
            console.log("当前浏览器不能全屏");
        }
    </script>
    
  • fullscreenchange事件:浏览器进入或离开全屏时触发。

    <script>
        document.addEventListener("fullscreenchange",function(event){
            if(document.fullscreenElement){
                console.log("进入全屏");
            }else{
                console.log("退出全屏");
            }
        });
    </script>
    

全屏状态下的CSS

在全屏状态下,大多数浏览器的CSS支持:full-screen伪类,只有IE11支持:fullscreen伪类。使用这个伪类,可以对全屏状态设置单独的CSS属性。

<style>
    :-webkit-full-screen {
        /* properties */
    }

    :-moz-full-screen {
        /* properties */
    }

    :-ms-fullscreen {
        /* properties */
    }

    :full-screen { /*pre-spec */
        /* properties */
    }

    :fullscreen { /* spec */
        /* properties */
    }

    /* deeper elements */
    :-webkit-full-screen video {
        width: 100%;
        height: 100%;
    }
</style>

页面可见性API

目前页面可见性API有两个属性,一个事件,如下:

  • document.hidden:Bolean值,表示当前页面是可见的还是不可见;

  • document.visibilityState:返回当前页面的可见状态。主要有:

    • hidden
    • visible
    • prerender:预渲染
    • preview:预览
  • visibilitychange:当页面的可见状态改变时触发的事件。

    <script>
        document.addEventListener("visibilitychange",function(){
            //要执行的函数
        });
    </script>
    

带前缀的Page Visibility API获取 

<script>
    var pageVisibility = (function() {
        var prefixSupport, keyWithPrefix = function(prefix, key) {
            if (prefix !== "") {//prefix:前缀的意思
                // 首字母大写
                return prefix + key.slice(0,1).toUpperCase() + key.slice(1);
            }
            return key;
        };
        //判断浏览器是否支持屏幕隐藏
        var isPageVisibilitySupport = (function() {
            var support = false;
            if (typeof window.screenX === "number") {
                ["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
                    if (support == false && document[keyWithPrefix(prefix, "hidden")] != undefined) {
                        prefixSupport = prefix;
                        support = true;
                    }
                });
            }
            return support;
        })();
        //判断是否隐藏(boolean)
        var isHidden = function() {
            if (isPageVisibilitySupport) {
                return document[keyWithPrefix(prefixSupport, "hidden")];
            }
            return undefined;
        };
        //获取可见状态
        var visibilityState = function() {
            if (isPageVisibilitySupport) {
                return document[keyWithPrefix(prefixSupport, "visibilityState")];
            }
            return undefined;
        };
        //得出最后的返回值
        return {
            hidden: isHidden(),
            visibilityState: visibilityState(),
            visibilitychange: function(fn, usecapture) {
                usecapture = undefined || false;
                if (isPageVisibilitySupport && typeof fn === "function") {
                    return document.addEventListener(prefixSupport + "visibilitychange", function(evt) {
                        this.hidden = isHidden();
                        this.visibilityState = visibilityState();
                        fn.call(this, evt);
                    }.bind(this), usecapture);
                }
                return undefined;
            }
        };
    })(undefined);

    //本质是:
    var pageVisibility = {
        hidden: Boolean
        visibilityState: String
        visibilitychange: Function
    };
</script>

与_原生属性事件_对应关系如下:

<script>
    pageVisibility.hidden === document.hidden(兼容处理)
    pageVisibility.visibilityState=== document.visibilityState(兼容处理)
    pageVisibility.visibilitychange(function() { /* this指的就是pageVisibility */ });
        === document.addEventListener("visibilitychange", function() {});(兼容处理)
</script>

要判断一个浏览器支不支持页面可见性API用如下代码就可以:

<script>
    var isSupport = typeof pageVisibility.hidden !== "undefined"
</script>

预加载(prefetch)

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

<!-- 页面,可以使用绝对或者相对路径 -->
<link rel="prefetch" href="page2.html" />

<!-- 图片,也可以是其他类型的文件 -->
<link rel="prefetch" href="sprite.png" />

图形元素(The Figure Element)

figure标签规定独立的流内容(图像、图表、照片、代码等等)。

figure元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

<figure>
    <p>黄浦江上的的卢浦大桥</p>
    <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

内容可编辑

<ul contenteditable=true>
    <li>i am editable</li>
    <li>i am editable too</li>
    <li>i am editable too too</li>
</ul>

主要是添加了属性contenteditable="true"才能够实现可编辑属性。

本地存储(Local Storage)

HTML5提供了两种在客户端存储数据的新方法:

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对怡和session的数据存储

之前,这些存储都是由cookie完成的,但是cookie不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得cookie速度很慢而且效率也不高。
在HTML5中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。
HTML5 使用 JavaScript 来存储和访问数据。

创建localStorage:

存储数据的方法就是直接给window.localStorage添加一个属性,例如:window.localStorage.a 或者 window.localStorage["a"]。它的读取、写、删除操作方法很简单,是以键值对的方式存在的,如下:

<script>
    localStorage.a = 3;//设置a为"3"
    localStorage["a"] = "sfsf";//设置a为"sfsf",覆盖上面的值
    localStorage.setItem("b","isaac");//设置b为"isaac"
    var a1 = localStorage["a"];//获取a的值
    var a2 = localStorage.a;//获取a的值
    var b = localStorage.getItem("b");//获取b的值
    localStorage.removeItem("c");//清除c的值
</script>

这里最推荐使用的自然是getItem()和setItem(),清除键值对使用removeItem()。如果希望一次性清除所有的键值对,可以使用clear()。另外,HTML5还提供了一个key()方法,可以在不知道有哪些键值的时候使用,如下:

<script>
    for (var i = 0; i < localStorage.length; i++) {
        var k = localStorage.key[i]
        console.log(k);//这里可以得到localStorage中的所有键名称
        var r = localStorage.getItem(k);//得到localStorage中的所有键值;
    }
</script>

下面是一个简单的利用本地存储的计数器:

<script>
    var s = window.localStorage;
    if (!s.getItem("pageLoadCount")) {//判断pageLoadCount这个键是否存在
        s.setItem("pageLoadCount",0);
    };
    s.pageLoadCount = parseInt(s.pageLoadCount)+1;
    document.getElementById("XXX").innerHTML = s.pageLoadCount;
</script>

可以看到,每刷新一次页面,s.pageLoadCount的数值就增加1.

需要注意的是,HTML5本地存储只能存字符串,任何格式存储的时候都会被自动转为字符串,所以读取的时候,需要自己进行类型的转换。这也就是上一段代码中parseInt必须要使用的原因。另外,在iPhone/iPad上有时设置setItem()时会出现诡异的QUOTA_EXCEEDED_ERR错误,这时一般在setItem之前,先removeItem()就ok了。

点赞
收藏
评论区
推荐文章
Karen110 Karen110
3年前
盘点JavaScript中数组遍历的全部方式(下篇)
前言JavaScript想必大家都不陌生了,上篇文章已经给大家介绍了7种数组遍历的方式,这篇文章继续介绍7种数组遍历的方式,这样一共14种遍历方式,基本上囊括了JavaScript中全部的数组遍历方式了。下面的内容,紧接上面文章的内容,一起来学习下吧八、Find通过寻找数组中的对象返回数组中符合目标函数条件的第一个元素。否则返回undefined,如下:九
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
好买-葡萄 好买-葡萄
2年前
【数据结构与算法】—— 二分查找
1.二分查找的概念二分查找指的是在排好序的数组中,找到目标元素。如果元素存在则返回元素的下标,不存在则返回1.下面以升序为例进行简单描述2.查找过程:取数组中间元素与查找元素target比较。如果target等于中间元素则直接返回中间元素的下标,如果target小于数组中间元素则在数组左边查找,如果target大于数组中间元素则在右边查找。重复以上步骤。
Wesley13 Wesley13
2年前
SQL JOIN
SQLjoin用于把来自两个或多个表的行结合起来。INNERJOIN:如果表中有至少一个匹配,则返回行LEFTJOIN:即使右表中没有匹配,也从左表返回所有的行RIGHTJOIN:即使左表中没有匹配,也从右表返回所有的行FULLJOIN:只要其中一个表中存在匹配,则返回行
Kevin501 Kevin501
3年前
Mysql 多表联合查询效率分析及优化
Mysql多表联合查询效率分析及优化一、总结一句话总结:连表操作时:先根据查询条件和查询字段确定驱动表,确定驱动表之后就可以开始连表操作了,然后再在缓存结果中根据查询条件找符合条件的数据1、找出所有在左表,不在右表的纪录?我们可以用右表没有on匹配则显示null的规律,来找出所
Stella981 Stella981
2年前
Redis之
键值相关命令1.keys:返回所有符合匹配的key;如:keys\;2.exists:确认一个元素是否存在;如:existsname;3.del:删除一个键,如:delname;4.expire:设置一个键的过期时间,如:expireaddr10;5.ttl:返回一个键的过期时间,如果没有过期,就返回剩余的过期时间,如
Wesley13 Wesley13
2年前
JS操作数组
1.  如果数组中存在item,则返回元素在数组中的位置,否则返回1functionindexOf(arr,item){if(Array.prototype.indexOf){//IE浏览器支不支持indexOfreturnarr.indexOf(item);}
Wesley13 Wesley13
2年前
Java8 Stream
longcount();//anyMatch判断的条件里,任意一个元素成功,返回truebooleananyMatch(Predicate<?superTpredicate);//allMatch判断条件里的元素,所有的都是,返回truebooleanall
Easter79 Easter79
2年前
Tcl命令操作实验
字符串操作:stringoptionstring1string2其中option可以是:compare 按字母顺序比较,小于则返回1,等于返回0,大于返回1match 判断是否匹配first判断string2中string1第一次出现的位置,如果没有则返回1last 和first作用相反,最后一次出现的位置,如果没有则返回
Stella981 Stella981
2年前
Leetcode724:寻找数组的中心索引(java、python3)
寻找数组的中心索引给定一个整数类型的数组nums,请编写一个能够返回数组\\“中心索引”\\的方法。我们是这样定义数组中心索引的:数组中心索引的左侧所有元素相加的和等于右侧所有元素相加的和。如果数组不存在中心索引,那么我们应该返回1。如果数组有多个中心索引,那么我们应该返回最靠近左边的那一个。