JS中常用的DOM操作
DOM：document object model 文档对象模型（提供一系列的属性和方法，供我们获取和操作DOM元素）
1.获取DOM的方式
- document.getElementById([元素的ID])：在整个文档中，根据元素的ID，获得这个元素对象
- document是获取元素的上下文（获取元素的范围），getElementById方法的上下文只能是document
- 获取到的结果是一个对象（堆内存：里面存储着很多内置的属性和方法）
- [context].getElementsByTagName([标签名])：在指定的上下文中，基于元素的标签名获取一组元素集合
- 获取的结果是HTMLCollection元素集合
- [context].getElementsByClassName([样式类名])：在指定上下文中，基于样式类名获取对应的元素集合
- 不兼容IE6~8低版本浏览器
- document.getElementsByName([NAME属性值])：根据元素的NAME属性值，在整个文档中获取一组元素集合
- 在IE浏览器中（9及以下）只对表单元素作用
- document.documentElement：获取整个HTML元素对象（HTML是页面的根节点）
- document.body：获取整个BODY元素对象
- document.head：获取整个HEAD元素对象
不兼容IE6~8低版本浏览器，可以根据选择器（类似于CSS选择器）快速获取元素和元素集合的办法：
- [context].querySelector([SELECTOR]) 获取一个元素对象
- [context].querySelectorAll([SELECTOR]) 获取一组元素集合
在不考虑兼容的情况下，这两个方法就足以获取我们需要的元素对象和元素集合了
2.获取DOM节点的属性和方法
我们认为在页面中所有呈现的内容，都是DOM文档中的一个节点（node），例如：元素标签是元素节点、注释的内容是注释节点、文本内容是文本节点、document是文档节点...
节点和节点之间的关系属性
描述节点和节点之间的关系属性，基于这些属性可以获取到指定的节点
- [CONTAINER].childNodes：获取当前容器中所有的子节点（包含各种类型的节点）
- [CONTAINER].children：获取当前容器中所有的元素子节点（只有元素标签的，在IE低版本浏览器中，也会把注释当做元素节点）
- [NODE].parentNode：获取某一个节点的父节点
- [NODE].previousSibling：获取某一个节点的上一个哥哥节点
- [NODE].previousElementSibling：获取某一个节点的上一个哥哥元素节点（不兼容IE低版本）
- [NODE].nextSibling：获取某一个节点的下一个弟弟节点
- [NODE].nextElementSibling：获取某一个节点的下一个弟弟元素节点（不兼容IE低版本）
- [CONTAINER].firstChild：获取容器中第一个子节点
- [CONTAINER].firstElementChild：获取容器中第一个元素子节点（不兼容IE低版本）
- [CONTAINER].lastChild：获取容器中最后一个子节点
- [CONTAINER].lastElementChild：获取容器中最后一个元素子节点（不兼容IE低版本）
3.关于DOM元素中的增加/删除/修改
-
document.createElement([标签名])：动态创建一个DOM元素
-
[CONTAINER].appendChild([元素])：把元素动态插入到指定容器的末尾
-
[CONTAINER].insertBefore([新元素],[原始页面中的元素])：把新创建的元素放置到指定容器原始页面元素的前面 [原始页面中的元素]肯定在[CONTAINER]容器中
-
[CONTAINER].removeChild([元素])：在指定容器中移除元素
-
document.createTextNode()：创建一个文本节点
-
...
-
设置元素的属性/自定义属性
- 元素.xxx=xxx
- 元素.setAttribute(xxx,xxx) setAttribute/getAttribute/removeAttribute
4.修改DOM元素的样式
- 元素.style.xxx ：修改（获取）当前元素的行内样式
- 操作的都是行内样式，哪怕把样式写在样式表中，只要没有写在行内上，也获取不到
- 元素.className：操作的是当前元素的样式类，基于样式类的管理给予其不同的样式
5.给DOM元素设置内容
- innerHTML / innerText：给非表单元素设置或者操作其内容
- value：操作表单元素的内容
给元素设置自定义属性
- 每一个元素都是一个对象（堆内存），我们向堆内存中设置自定义属性即可
- 元素.xxx = xxx 或者 元素[xxx]=xxx
- 对象键值对的操作
- 每一个元素也是一个标签，我们可以操作其DOM结构，给结构上新增自定义的属性
- 元素.setAttribute('xxx', 'xxx')
两种方案的原理是不一样的，一个操作的是堆内存，一个操作的是DOM结构
网友评论