原生JS获取操作元素

操作元素自定义属性

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

属性名想叫什么就叫什么,可以用多个 -连接<p 名称-名称 = ‘自定义属性值’>
操作元素所有（标准、自定义）属性
获取元素属性
语法： 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('事件类型'，函数名)
注意： 想要解除某个事件，前提是这个事件注册时添加的事件处理函数是命名函数