H5新增API
H5新增API
选择器
querySelector()和querySelectorAll()，参数都是css选择器，前者返回符合条件的第⼀个匹配的元素，如果没有则返回Null，后者返回符合筛选条件的所有元素集合，如果没有符合筛选条件的则返回空数组。
getElementsByClassName()返回⼀个类似数组的对象，包含了所有指定class名称的⼦元素。当调⽤发⽣在document对象上时, 整个DOM都会被搜索, 包含根节点，也可以在任意元素上调⽤。
document.querySelector('div');    //选择第⼀个div
document.body.querySelector('p')[0];  //body下第⼀个p标签
//获取所有 class 同时包括 'red' 和 'test' 的元素
classList属性
length: 返回class数量。
add(class1, class2, ...)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
contains(class)：表⽰列表中是否存在给定的value值，如果存在则返回true，不存在则返回false。
remove(class1, class2, ...)：移除元素中⼀个或多个类名，移除不存在的类名不会报错。
item(index)：返回指定索引值的类名，index为数字(从0开始)，索引不在范围内返回null，不为数字会被转成数字类型再取整数部分，若转换失败返回第⼀个类名。
toggle(value,true || false)：将值为value的class在添加和移除之间切换。
classList 属性返回的是⼀个DOMTokenList对象。此属性不兼容IE10以下版本。
String.call(node.classList);
//'[object DOMTokenList]'
相对应className属性，可以设置或返回元素的 class 。返回的是字符串类型，设置会把原来的 class 值完全覆盖。语法：node.className = className。
<div class='wrap box'></div>
let oDiv = document.querySelector('div');
console.log(oDiv.className);  //'wrap box'
oDiv.className = 'class1';
console.log(oDiv.className);  //'class1'
data属性
新的HTML5标准允许在普通的元素标签⾥，嵌⼊类似data-*的属性，来实现⼀些简单数据的存取。它的数量不受限制，并且也能由js动态修改，也⽀持CSS选择器。
⽤getAttribute、setAttribute存取dataset。
<div data-id='10' data-name='box'></div>
<script
nodeselectornode.setAttribute('data-name','test');
</script>
通过.dataset API 存取dataset。它返回⼀个对象，可以通过node.dataset.name的形式新增或修改。
node.dataset.name = 'test';
内容可编辑
加有contenteditable属性的元素，点击可以编辑。此属性为。
<div contenteditable=true>
<p>i am editable</p>
<p>i am editable too</p>
</div>
本地存储
localStorage sessionStorage。。
scrollIntoView()
Element.scrollIntoView()⽅法让当前的元素滚动到浏览器窗⼝的可视区域内。
参数为⼀个布尔值，为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐；如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。
element.scrollIntoView(); // 等同于element.scrollIntoView(true)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。