DOM-选择器\元素属性\类名\样式\内容

DOM选择器

document.getElementById('id名称')

document.getElementsByClassName('类名')

document.getElementsByTagName('标签名')

document.getElementsByName('name 属性')

document.querySelector('选择器')

document.querySelectorAll('选择器')

 

---------------------------------------------------------------------------------------------

 元素属性

 操作原生属性
+ 读:
=> 元素.属性名
=> 得到的就是元素身上该属性的值
+ 写:
=> 元素.属性名 = 属性值
=> 设置和修改元素身上的该属性

 操作自定义属性
2-1. 设置
=> 语法: 元素.setAttribute('属性名', '属性值')
=> 作用: 给元素设置或者修改一个自定义属性
2-2. 获取
=> 语法: 元素.getAttribute('属性名')
=> 返回值: 元素该属性的值
=> 注意: 不管你设置的时候, 是什么数据类型, 拿到的都是字符串类型
2-3. 删除
=> 语法: 元素.removeAttribute('属性名')
=> 作用: 删除元素身上该自定义属性

 操作 H5 自定义属性
+ 元素身上带有一个属性叫做 dataset, 是一个类似对象的数据结构
+ dataset 内记录的都是元素身上 data- 开头的属性
+ 对于一个元素身上自定义属性的操作, 就是对这个 dataset 的操作
+ 增加: 元素.dataset.属性名 = 属性值
+ 修改: 元素.dataset.属性名 = 属性值
=> 原先有该属性名就是修改, 原先没有就是增加
+ 删除: delete 元素.dataset.属性名
+ 查询: 元素.dataset.属性名
+ 注意: 以上属性名是不包含 data- 的部分

---------------------------------------------------------------------------------------------

元素类名

 className 属性
1-1. 获取:
=> 语法: 元素.className
=> 得到: 该元素的完整类名, 是一个字符串类型
1-2. 设置:
=> 语法: 元素.className = '新类名'
=> 注意: 完全覆盖式的设置, 会把本身的所有类名都覆盖掉
1-3. 追加
=> 语法: 元素.className += ' 新类名'
=> 注意: 在 += 的时候, 需要一个空格

 classList 属性
+ 元素身上有一个叫做 classList 的属性
+ 记录的元素身上所有的类名
+ 添加:
=> 元素.classList.add('新类名')
+ 删除:
=> 元素.classList.remove('类名')
+ 切换:
=> 元素.classList.toggle('类名')
=> 切换: 本身有就删除, 本身没有就添加

---------------------------------------------------------------------------------------------

元素样式

获取非行内样式
=> 标准浏览器:
-> 语法: window.getComputedStyle(要获取样式的元素)
-> 返回值: 一个对象, 里面包含元素所有的可设置样式
-> 你需要哪一个样式, 直接去返回值对象内查找就可以了
-> 不管是行内样式还是非行内样式, 都是有值的
=> IE 低版本:
-> 语法: 元素.currentStyle
-> 得到: 一个对象, 里面包含元素所有的可设置样式
-> 你需要哪一个样式, 直接去返回值对象内查找就可以了
-> 不管是行内样式还是非行内样式, 都是有值的

---------------------------------------------------------------------------------------------

元素内容

1. 操作元素超文本内容
+ innerHTML, 是一个读写的属性
-> 得到: 该元素内所有内容, 以字符串的形式返回
-> 注意: 如果你设置的值是一个带有 html 结构的字符串, 会自动解析成标签
-> 注意: 完全覆盖式的写入

2. 操作元素文本内容
+ innerText, 是一个读写的属性
-> 得到: 该元素内所有的文本内容, 以字符串的形式返回
-> 注意: 如果你设置的值是一个带有 html 结构的字符串, 那么不会解析成为标签, 原样输出
-> 注意: 完全覆盖式的写入

3. 操作表单元素 value, 是一个读写的属性
-> 完全覆盖式的写入
+ 一个特殊的表单元素
=> select 标签
=> select 的 value 就是他选中的那一个 option 的 value