当前位置: 首页 > Web前端 > HTML5

H5添加API

时间:2023-04-05 22:36:37 HTML5

H5添加API选择器querySelector()和querySelectorAll(),参数为css选择器,前者返回第一个满足条件的匹配元素,不满足则返回Null,后者返回匹配元素过滤条件所有元素的集合,如果没有满足过滤条件的元素,则返回空数组。getElementsByClassName()返回一个类似数组的对象,其中包含指定类名的所有子元素。当调用发生在文档对象上时,将搜索整个DOM,包括根节点,也可以在任何元素上调用。document.querySelector('div');//选择第一个divdocument.body.querySelector('p')[0];//body下的第一个p标签document.getElementsByClassName('redtest');//获取所有class元素包括'red'和'test'。classList属性length:返回类的数量。add(class1,class2,...):将给定的字符串值添加到列表中。如果该值已存在,则不会添加。contains(class):表示给定值是否存在于列表中,存在则返回true,不存在则返回false。remove(class1,class2,...):移除元素中的一个或多个类名,移除不存在的类名不会报错。item(index):返回指定索引值的类名,index是一个数字(从0开始),如果索引不在范围内,则返回null,如果不是数字,则转换成一个number类型然后取整数部分,如果转换失败,返回第一个类名。toggle(value,true||false):在添加和删除之间切换值为value的类。classList属性返回一个DOMTokenList对象。此属性与IE10以下的版本不兼容。Object.prototype.toString.call(node.classList);//'[objectDOMTokenList]'对应className属性,可以设置或返回元素的类。返回的是字符串类型,设置会完全覆盖原来的类值。语法:node.className=类名。

让oDiv=document.querySelector('div');console.log(oDiv.className);//'包装盒'oDiv.className='class1';console.日志(oDiv.className);//'class1'数据属性HTML5新标准允许在普通元素标签中嵌入data-*等属性,实现一些简单的数据访问。它的数量是无限的,也可以通过js动态修改,也支持CSS选择器。使用getAttribute、setAttribute访问数据集。
通过.datasetAPI访问数据集。它以node.dataset.name的形式返回一个可以添加或修改的对象。node.dataset.name='测试';内容可以编辑,具有contenteditable属性的元素可以通过点击进行编辑。此属性是一个布尔属性。

我是可编辑的

我也是可编辑的

本地存储localStoragesessionStorage。Javascript本地存储摘要。scrollIntoView()Element.scrollIntoView()方法将当前元素滚动到浏览器窗口的可视区域。scrollIntoViewMDN参数是一个布尔值。如果为true,则元素的顶部将与其所在的滚动区域的可见区域的顶部对齐;如果为false,则元素的底部将与所在滚动区域的可见区域底部对齐。.元素.scrollIntoView();//相当于element.scrollIntoView(true)