24、JS中常用的DOM操作
2024-02-27 18:40:28 0 举报AI智能生成
JS中常用的DOM操作
作者其他创作
大纲/内容
DOM（document object model）
文档对象模型（提供一系列的属性和方法，供我们获取和操作DOM元素）
基于JS获取到的DOM元素是“对象数据类型”值，里面包含很多浏览器自带的，用来操作元素的键值对
获取DOM标签方式
document.getElementById([ID])
在整个文档中，根据元素的ID，获得这个元素对象
document
是获取元素的上下文（获取元素的范围）
获取到的结果是一个对象（堆内存：里面存储着很多内置的属性和方法）
getElementById 方法的上下文只能是document
？
[context].getElementsByTagName([标签名])
在指定的上下文中，基于元素的标签名获取一组元素集合
获取的结果是HTMLCollection元素集合（类数组：数字作为索引，length代表长度）
集合中的每一项都是一个单独的元素对象
[context].getElementsByClassName([样式类])
在指定上下文中，基于样式类名获取对应的元素集合
集合就是集合，想操作某一项需要通过索引获取后在操作
不兼容IE6～8低版本浏览器
document.getElementsByName([NAME 属性名])
根据元素的Name 属性值，在整个文档中获取一组元素集合
真实项目中也是基于它操作表单元素的，尤其是单选框或者复选框
在IE9以下只对表单元素作用
document.documentElement
获取整个HTML元素对象
HTML是页面的根节点
document.body
获取整个BODY
document.head
获取整个HEAD
==========================我是分割线==========================
下面的都不兼容IE6～8
[context].querySelector([SELECTOR])
获取一个元素对象
[context].querySelectorAll([SELECTOR])
获取一组元素集合
哪怕只有一项也是集合
在不考虑兼容的情况下，这两种方法就足以我们需要的元素对象和集合了
获取DOM节点的方式
所有页面中所呈现的内容，都是DOM文档中的一个节点（node）
例如：元素标签是元素节点、注释
节点类型
文档节点
document
nodeType（节点类型）
9
nodeName（节点名字）
“#document”
nodeValue（节点文本内容）
null
元素节点
元素标签
nodeType
1
nodeName
“大写标签名”
nodeValue
null
文本节点
文字、标签之间的空格和换行也被当作文本节点
nodeType
3
nodeName
“#text”
nodeValue
文本内容
注释节点
注释内容
nodeType
8
nodeName
“#comment”
nodeValue
注释内容
=========================我是分隔符==========================
属性
描述节点和节点之间的关系属性
基于这些属性可以获取到指定的节点
[CONTAINER].childNodes
获取当前容器中所有的字节点
包含各种类型的节点
获取到的是一个节点集合，包含容器中的所有类型节点（空格换行是文本节点）
在IE6～8中，不会把空格和换行当作文本节点（不认为这是节点）
[CONTAINER].children
获取当前容器中所有的元素子节点
获取的是一个元素集合，只有元素节点
只有元素标签的，在IE低版本浏览器中，也会把注释当作元素节点
[NODE].parentNode
获取某一个节点的父节点
[NODE].previousSibling
获取某一个节点的上一个哥哥节点
[NODE].previousElementSibling
获取某一个节点的上一个哥哥元素节点（不兼容IE低版本浏览器）
[CONTAINER].nextSibling
获取某一个节点的下一个弟弟节点
[CONTAINER].nextElementSibling
获取某一个节点的下一个弟弟元素节点（不兼容IE低版本）
[CONTAINER].firstChild
获取容器中第一个字节点
[CONTAINER].firstElementChild
获取容器中第一个元素子节点（不兼容IE低版本）
[CONTAINER].lastChild
获取容器中最后一个字节点
[CONTAINER].lastElementChild
获取容器中最后一个元素子节点（不兼容IE低版本）
所有方法和属性，都是为了快速获取到我们想要操作的DOM元素或者节点的
DOM元素中的增加/删除/修改
创建
document.createElement([标签名])
动态创建一个DOM元素
增加
[CONTAINER].appendChild([元素])
把元素动态插入到指定容器的末尾
[CONTAINER].insertBefore([新元素],[原始页面中的元素])
把新创建的元素放置到指定容器原始页面元素的前面
【原始页面中的元素】肯定在【CONTAINER】容器中
删除
[CONTAINER].removeChild([元素])
在指定容器中移除元素
设置自定义属性
方法一
每一个元素都是一个对象（堆内存），我们向堆内存中设置自定义属性即可
[元素].xxx=xxx; / 元素[xxx]=xxx;
写在堆内存中的
获取方式
console.log([ELEMENT].xxx);
删除方式
delete [ELEMENT].xxx;
方法二
每一个元素也是一个标签，可以操作其DOM结构，给结构上新增自定义的属性
[元素].setAttribute('xxx',xxx);
直接写在结构上的
获取方式
[元素].getAttribute('xxx');
删除方式
[元素].removeAttribute('xxx');
区别
两种方式的原理不一样，一个操作的是堆内存，一个操作的是DOM结构，所以不能混用
修改DOM元素样式
元素.style.xxx
修改（获取）当前元素的行内样式
操作的都是行内样式，哪怕把样式写在样式表中，只要没有写在行内上，也获取不到
课后扩展：获取当前元素样式（不论写在哪，都能获取到的）方法？
元素.style.cssText = `需要设置的所有行内样式`
这种方式是 style 一个个设置样式的简写，批量给行内上设置很多样式
元素.className
操作的是当前元素的样式类，基于样式类的管理给予其不同的样式
元素.className = ‘样式类’
这样操作会把之前的样式类名给覆盖掉
元素.className +=“空格 样式类”
这样操作是不覆盖原有的基础上设置一个
几个加空格分每个样式类
元素.classList.add("样式类")
向指定样式集合中新增一个样式类
（兼容性差）
给DOM设置内容
innerHTML
给非表单元素设置或者操作其内容
能识别HTML标签
innerText
给非表单元素设置或者操作其内容
不能识别HTML标签
value
给表单元素设置或者操作其内容
0 条评论
下一页
