码迷,mamicode.com
首页 > Web开发 > 详细

原生JS获取操作元素

时间:2019-09-27 21:26:36      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:attr   字符串   att   add   对象   attribute   element   selector   选择器   

操作元素自定义属性

h5方法
设置语法<p data-自定义属性名 = ‘自定义属性值‘></p>
属性名想叫什么就叫什么,可以用多个 -连接 <p data-名称-名称 = ‘自定义属性值‘></p> 获取语法**:element.dataset.自定义属性名如果属性名用多个-连接 ,获取时应将属性名以-为分割符,驼峰方式获取 无兼容性方法 设置语法**:

属性名想叫什么就叫什么,可以用多个 -连接


操作元素所有(标准、自定义)属性
获取元素属性
语法element.getAttribute(‘属性名‘)
参数
类型:字符串
值:属性名
返回
类型:字符串
值:某个元素的某个属性值
设置元素属性
语法element.setAttribute(‘属性名‘,‘属性值‘)
参数
类型:字符串
值:属性名 属性值
删除元素某个属性
语法element.removeAttribute(‘属性名‘)
参数
类型:字符串
值:属性名
获取元素(CSS选择器方式)
获取符合CSS选择器的第一个元素
语法element.querySelector(‘css选择器‘)
参数
类型:字符串
值: CSS选择器
返回
类型:对象
值:得到element元素中,符合CSS选择器要求的第一个元素
获取符合CSS选择器的所有元素
语法element.querySelectorAll(‘css选择器‘)
参数
类型:字符串
值:css选择器
返回
类型:伪数组
值:得到element元素中,符合CSS选择器要求的所有元素
事件高级
注册事件两种方式
DOM0级事件(on)
语法element.on+事件类型 = 函数名/匿名函数
特点:同一个元素只能注册一次某个类型的事件,多次注册,只有最后一次添加的事件有效
DOM2级事件** (addEventListener)
语法element.addEventListener(‘事件类型‘,函数名/匿名函数)
参数
第一个:字符串 事件类型 不加on
第二个:匿名函数/函数名(事件执行程序)
特点:同一个元素能注册多个某种类型的事件,多次注册,事件触发时,会按照注册的先后顺序依次执行
解除事件的两种方式
DOM0级事件解除方式(on)
语法element.on+事件类型 = null
DOM2级事件解除方式(removeListener)
语法element.removeListener(‘事件类型‘,函数名)
注意想要解除某个事件,前提是这个事件注册时添加的事件处理函数是命名函数

原生JS获取操作元素

标签:attr   字符串   att   add   对象   attribute   element   selector   选择器   

原文地址:https://www.cnblogs.com/itxcr/p/11600146.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!