本文主要是介绍HTML5 新的API 窗口可视区 scrollIntoView dataset calssList，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
scrollIntoView方法有两个参数 布尔值 true 和 false 使用true或者空会让调用这个方法的元素和浏览器顶部对齐 出现在可视区，使用参数false 也会出现可视区，但是不会和顶部对齐，它会和顶部有一段的距离。
调用方法：
document.getElementsByTagName("ul")[0].scrollIntoView(true);ul就会出现在可视区，省去了我们要算scrollTop等一些算法。相信对很多效果都非常有帮助。浏览器支持情况：高等浏览器支持。
dataset 是我今天再看REM计算的时候发现的 设置HTML 的data-dpr。
HTML5里面允许自定义属性“data-”,看个例子:
<div id="day2-meal-expense" data-drink="coffee" data-food="sushi" data-meal="lunch">¥20.12</div>如果没有用dataset我们要获取这些属性的话,我们需要获取DOM的attributes,循环获取设置,或者用我们属性的 getAttribute和setAttribute
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"></head><body><div class="woow" data-one="1111" data-two="222" data-three="333"></div></body><script>!(function(win,undefined){var woow=document.querySelector(".woow"),attrs=woow.attributes,attrVlue={};for (var i = 0; i < attrs.length; i++) {if(attrs[i].name.substring(0,5)=="data-"){attrVlue[attrs[i].name.substring(5)]=attrs[i].value;}};console.log(attrVlue); //Object {one: "1111", two: "222", three: "333"}console.log(woow.dataset); //DOMStringMap {one: "1111", two: "222", three: "333"}delete woow.dataset.one; console.log(woow.dataset);//DOMStringMap {two: "222", three: "333"}woow.dataset.foure="444";console.log(woow.dataset);//DOMStringMap {two: "222", three: "333", foure: "444"}})(window,document)</script>
</html>但是用dataset一句话就可以了
woow.dataset看上面的console.log输出就可以了.
性能方面大大增强!
删除某个data属性值 delete dom.dataset.attrName;
设置某个data属性值 dom dataset attrName="value";
/************************************************************************************************************************************************************************/
classList 返回当前所有的list值，方法有add,remove contains,toggle,item方法和length属性,大大的简化了我们操作className的流程。
但是add,remove只能一个个的添加,但是我们可以扩展这个方法:
DOMTokenList.prototype.adds = function(tokens) {tokens.split(" ").forEach(function(token) {this.add(token);}.bind(this));return this;};删除也是这个方法,但是前提要判断是否有这个class
DOMTokenList.prototype.removes = function(tokens) {tokens.split(" ").forEach(function(token) {if(this.contains(token)){this.remove(token);}else{return;}}.bind(this));return this;};
这篇关于HTML5 新的API 窗口可视区 scrollIntoView dataset calssList的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
