H5新增API
H5新增API
选择器
querySelector()
和querySelectorAll()
,参数都是css
选择器,前者返回符合条件的第一个匹配的元素,如果没有则返回Null
,后者返回符合筛选条件的所有元素集合,如果没有符合筛选条件的则返回空数组。
getElementsByClassName()
返回一个类似数组的对象,包含了所有指定 class
名称的子元素。当调用发生在document对象上时, 整个DOM都会被搜索, 包含根节点,也可以在任意元素上调用。
document.querySelector('div'); //选择第一个div
document.body.querySelector('p')[0]; //body下第一个p标签
document.getElementsByClassName('red test');
//获取所有 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以下版本。
Object.prototype.toString.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
node.getAttribute('data-id');
node.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
。Javascript本地存储小结。
scrollIntoView()
Element.scrollIntoView()
方法让当前的元素滚动到浏览器窗口的可视区域内。scrollIntoView MDN
参数为一个布尔值,为true
,元素的顶端将和其所在滚动区的可视区域的顶端对齐;如果为false
,元素的底端将和其所在滚动区的可视区域的底端对齐。
element.scrollIntoView(); // 等同于element.scrollIntoView(true)
本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=hb1hahik2jb
H5新增API的更多相关文章
- H5新增API和操作DOM
博客原文:https://dobinspark.com.cn/ H5-dom扩展 获取元素 document.getElementsByClassName ('class'); //通过类名获取元素, ...
- h5新API之WebStorage解决页面数据通信问题
localStorage相信大家都不陌生,今天我们要讨论的不是怎么存储数据,获取数据.而是看看WebStorage的一些妙用,相信大家在开发中遇到过这样一个场景,一个页面中嵌套一个iframe,ifr ...
- h5新增标签及css3新增属性
- h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vi ...
- H5新增属性classList
H5新增属性classList h5中新增了一个classList,原生js可以通过它来判断获取dom节点有无某个class. classList是html元素对象的成员,它的使用非常简单,比如 co ...
- H5新增特性
1.pattern:写正则,但是需要和form表单连着用 2.WebSocket "网络套接字", 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议.在 W ...
- 对飞猪H5端API接口sign签名逆向实验
免责声明 本文章所提到的技术仅用于学习用途,禁止使用本文章的任何技术进行发起网络攻击.非法利用等网络犯罪行为,一切信息禁止用于任何非法用途.若读者利用文章所提到的技术实施违法犯罪行为,其责任一概由读者 ...
- 对iOS10新增Api的详细探究
本文主要是一些对iOS新功能的探索,之前发现博客里关于iOS新功能的分析大多是过于概括,每个功能几句话,无法了解到具体的功能.所以本次的探索是基于Api层面,着重看一些具体用法所做的笔记,本来想分别画 ...
- Uiautomator 2.0之UiDevice新增API学习小记
1. InstrumentationRegistry类 1.1. 类说明: 一个暴露的注册实例,持有instrumentation运行的进程和参数,还提供了一种简便的方法调用instrumentati ...
- web语义化与h5新增标签
Web语义化就是html告诉我们也告诉机器这一块是什么内容,例如:“这行是一个标题,这几行组成一个段落,这是一个列表,那是一个链接.” Web语义化有三个阶段: 1.h1~h6.thead.ul. ...
随机推荐
- xsd文件生成cs文件命令
C:\Windows\System32>xsd.exe c:/Createst.xsd -c C:\Windows\System32>xsd.exe c:/Creauest.xsd /c ...
- 【计算机网络】TCP的三次握手与四次挥手
今天讲一下TCP的三次握手与四次挥手 1.首先说TCP 协议的特点:TCP是在不可靠的IP层之上实现的可靠的数据传输协议,它主要解决传输的可靠.有序.无丢失和不重复问题.TCP 是TCP/IP 体系中 ...
- WPF空格换行
换行 (写在Text中才起作用) 空格 https://www.cnblogs.com/dc10101/archive/2011/11/14/2248432.html
- 论文翻译:2020_DCCRN: Deep Complex Convolution Recurrent Network for Phase-Aware Speech Enhancement
论文地址:DCCRN:用于相位感知语音增强的深度复杂卷积循环网络 论文代码:https://paperswithcode.com/paper/dccrn-deep-complex-convolutio ...
- PHP pdf转png windows版本
链接:https://pan.baidu.com/s/1Bli-2HkucRTYTeujkcsmjg&shfl=sharepset 提取码:2une 1.php_imagick扩展 (1)下载 ...
- setState同步异步场景
setState同步异步场景 React通过this.state来访问state,通过this.setState()方法来更新state,当this.setState()方法被调用的时候,React会 ...
- java-Dos
打开CMD的方式 1.菜单打开 2.Windows+R 输入cmd 3.shift+鼠标右键 选择在此处打开命令行窗口 4.资源管理器地址栏前+cmd 空格 管理员身份运行 常用的Dos命令 #盘符切 ...
- kubernetes证书过期处理
rancher中文文档:http://docs.rancher.cn/ k8s中文文档:https://kubernetes.io/zh/docs 一.修改kubeadm 源码 增加证书到100年 $ ...
- loj2985「WC2019」I 君的商店(二分,思维)
loj2985「WC2019」I 君的商店(二分,思维) loj Luogu 题解时间 真的有点猛的思维题. 首先有一个十分简单的思路: 花费 $ 2N $ 确定一个为 $ 1 $ 的数. 之后每次随 ...
- 前端工程化 Webpack基础
前端工程化 模块化 (js模块化,css模块化,其他资源模块化) 组件化 (复用现有的UI结构.样式.行为) 规范化 (目录结构的划分.编码规范化.接口规范化.文档规范化.Git分支管理) 自动化 ( ...