DOM(文档对象模型)
-
什么是DOM
DOM全称是Document Object Model(文档对象模型),是为HTML和XML提供的API。DOM把整个页面映射为一个多层次的节点结构。HTML和XML页面中的每一个组成部分都是某种类型的节点。借助DOM提供的API,开发人员可以轻松自如的删除,添加,替换,修改任何节点。DOM 是一个以树状结构存在的内容。DOM 的顶级是 document 表示当前文档。
window->document->html
-
获取DOM元素
-
非常规标签
1-1. html =>document.documentElement
1-2. head => document.head (低版本浏览器不兼容)
1-3. body => document.body
-
常规标签
2-1.getElementById()
=> 语法: 查找范围.getElementById(‘id名称’)
=> 查找范围: document 或者一个 元素
=> 返回值:
-> 如果有这个 id 名匹配的元素, 就是这个元素
-> 如果没有这个 id 名匹配的元素, 那么就是 null
2-2. getElementsByTagName()
=> 语法: 查找范围.getElementsByTagName(‘标签名’)
=> 返回值: 是一个伪数组(数组常用方法用不了)
-> 如果有这个标签名匹配的元素, 有多少获取多少
-> 如果没有这个标签匹配的元素, 返回一个空的伪数组
2-3. getElementsByClassName()
=> 语法: 查找范围.getElementsByClassName(‘类名’)
=> 返回值: 是一个伪数组(数组常用方法用不了)
-> 如果有这个类名匹配的元素, 有多少获取多少
-> 如果没有这个类名匹配的元素, 返回一个空的伪数组
2-4. getElementsByName()
=> 语法: 查找范围.getElementsByName(‘元素name属性的值’)
=> 返回值: 是一个伪数组
-> 如果有元素的 name 属性的值匹配, 那么由多少获取多少
-> 如果没有元素的 name 属性值匹配, 那么就是空的伪数组
2-5. querySelector()
=> 语法: 查找范围.querySelector(‘选择器’)
=> 选择器: 能在 css 里面写的选择器, 这里都可以写
=> 返回值:
-> 如果找到选择器匹配的元素, 返回第一个找到的内容
-> 如果没有选择器匹配的元素, 返回 null
=> 特点: IE 低版本不支持
2-6. querySelectorAll()
=> 语法: 查找范围.querySelectorAll(‘选择器’)
=> 选择器: 能在 css 里面写的选择器, 这里都可以写
=> 返回值: 是一个伪数组
-> 如果找到选择器匹配的元素, 有多少获取多少
-> 如果没有选择器匹配的元素, 返回一个空的伪数组
=> IE 低版本不支持
-
-
操作元素属性
-
原生属性
-
元素.属性名 = ‘值’ 设置该元素的该属性的值
-
ele.className = ‘值’
-
-
自定义属性
-
setAttribute(‘属性名’, ‘属性值’) 给元素标签上设置属性
-
getAttribute(‘属性名’) 获取元素上的属性的值
-
removeAttribute(‘属性名’) 删除元素上的属性
-
特点:
1. 可以操作自定义属性, 可以操作原生属性
2. 不管你设置什么数据类型, 当你再次从标签上拿到的时候, 都是字符串
-
-
H5自定义属性
-
每一个元素身上有一个属性叫做 dataset
-
- 里面包含了所有 H5 自定义属性
=> key 是除了 data- 以外的内容
=> value 就是这个属性的值
-
- 操作 H5 的自定义属性
=> 直接再 dataset 里面进行操作就可以
-
- 获取
=> 元素.dataset.名字
-> 名字: 标签上写 data-a, 使用 a
-
- 设置
=> 元素.dataset.名字 = ‘值’
-> 名字: 如果你在这里写 a, 那么映射再标签上是 data-a
-
-
操作元素类名
-
操作元素文本
-
获取节点
-
ele.childNodes 获取全部子节点(伪数组)
-
ele.children 获取全部子元素节点 (伪数组)
-
ele.firstChild 获取第一个子节点
-
ele.firstElementChild 获取第一个子元素节点
-
ele.lastChild 获取最后一个子节点
-
ele.lastElementChild 获取最后一个子元素节点
-
ele.previousChild 获取上一个兄弟节点
-
ele.previousElementChild. 获取上一个兄弟元素节点
-
ele.nextChild 获取下一个兄弟节点
-
ele.nextElementChild 获取下一个兄弟元素节点
-
ele.parentNode 获取元素的父节点
-
ele.parentElement 获取元素的父元素节点
-
ele.atrributes 获取所有属性节点(伪数组)
-
-
节点属性
-
创建节点
-
插入节点
-
删除节点
-
替换节点
-
克隆节点
-