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