DOM（操作）(jQuery dom操作)

DOM（操作） DOM1作用和分类

推荐整理分享DOM（操作）(jQuery dom操作)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:js dom操作,dom操作的常用api有哪些,dom操作的常用api有哪些,dom操作创建dom片段,dom操作是什么意思,dom操作中创建一个dom片段的方法,dom操作中创建dom片段,dom操作的方法有哪些,内容如对您有帮助，希望把文章链接给更多的朋友！

作用：使用 JS 去操作 html 和浏览器

分类：DOM(文档对象模型)、BOM(浏览 器对象模型)

DOM是用来呈现以及与任意HTML 或 XML文档交互的API简单说：DOM 是浏览器提供的一套专门用来 操作网页内容 的功能DOM的作用：开发页面内容和实现用户交互DOM树将HTML 文档以树状结构直观的表现出来，被称之文档树 或 DOM 树描述网页内容关系的名词作用：文档树直观地体现了标签与标签之间的关系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ov39Ps9k-1668846708684)(C:\Users\s2490\Desktop\知识总结\JavaScript\assets\1665471669949.png)]

DOM对象（*）

DOM对象：浏览器根据html标签生成的 JS 对象

​ 浏览器根据html标签生成的 JS 对象

​ 所有标签属性都可以在这个对象上面找到

​ 修改这个对象的属性会自动映射到标签身上

DOM的核心思想

把网页内容当作对象来处理

document 对象

​ 是 DOM 里提供的对象所以它提供的属性和方法都是用来访问和操作页面内容的例：document.write()网页所用内容都在document里面获取DOM对象1.根据CSS选择器来获取DOM元素（重点）选择匹配的第一个元素

语法：

document.querySelector('css选择器 ')

参数：包含一个或多个有效的css选择器 字符串

返回值：css选择器匹配的第一个元素，一个HTMLElement对象。如果没有匹配到，则返回null。

2.选择匹配的多个元素

​ 语法：

document.querySelectorAll('css选择器 ')

​ 参数：包含一个或多个有效的css选择器 字符串

​ 返回值：CSS 选择器匹配的 NodeList 对象集合

得到的是一个伪数组：

有长度有索引号的数组但是没有 pop() push() 登数组方法2.其他获取 DOM 元素方法（了解）// 根据 id 获取一个元素document.getElementById('nav')// 根据标签获取一类元素 获取页面 所有 divdocument.getElementsByTagName('div')// 根据类名获取元素 获取页面 所有类名为 a document.getElementsByClassName('a')设置 / 修改 DOM 元素内容1.document.write()只能将文本内容追加到</body>前面的位置文本包含的标签会解析标签2.元素innerText属性将文本内容添加 / 更新到任意标签位置文本中包含的标签不会被解析3.元素innerHTML属性将文本内容添加 / 更新到任意变迁位置文本中包含的标签会被解析设置 / 修改 DOM 元素属性1.设置 / 修改元素常见属性

还可以通过 js 设置 / 修改标签元素的样式属性

常见的属性：href、title、src …

语法：

let img = document.querySelector('img')img.src = './images/1.png'2.设置 / 修改元素样式属性1.通过 style 属性操作css

语法:

//对象.style.样式属性 = 值let div = document.querySelector("div")div.style.backgroundColor = "pink"2.操作类名修改css属性语法：// active 是一个 css 类名let div = document.querySelector("div")div.className = "active"

注意：

​ class 是关键字，所以使用className代替

​ className使用新值换旧值，如果添加一个类，需要保存之前的类名

3.通过classList操作css

语法：

// active 是一个 css 类名let div = document.querySelector("div")// 追加一个类div.classList.add('active')// 删除一个类div.classList.remove('active')// 切换一个类div.classList.toggle('active')3.设置 / 修改表单元素属性

获取：DO M 对象.属性名

设置：DOM对象.属性名 = 新值

表单.value = '用户名'表单.type = 'password'

表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示 如果为true代表添加了该属性 如果是false代表移除了该属性

比如：disabled(不可选中)、 checked、 selected()

定时器 - 间歇函数

1.开启定时器

setInterval(函数， 间隔时间)

作用：每隔一段时间调用这个函数

间隔时间单位是毫秒

2.关闭定时器

let time = setInterval(函数， 间隔时间)clearInterval(time)事件事件监听

语法：

元素.addEventListener('事件'，要执行的函数 )

事件监听三要素：

事件源：哪个 DOM 元素被事件触发了， 要获取 DOM 元素事件：什么触发的 ， 比如：click mouseover事件调用的函数 ：要做什么事情事件类型事件类型鼠标事件click(点击)mouseenter（鼠标经过）mouseleave（鼠标离开）焦点事件focus（获得焦点）blur（失去焦点）键盘事件Keydown（键盘按下触发）Keyup（键盘抬起触发）文本事件input（用户输入事件）高阶函数函数表达式函数也是[数据]把函数赋值给变量回调函数把函数当作里一个函数的参数传递，就是回调函数回调函数本身还是函数使用匿名函数做为回调函数比较常见环境对象

能够分析判断函数运行在 不同环境中 this 所指代的对象

环境对象指的是函数内部特殊的 变量this , 它代表着当前函数运行时所处的环境

作用：弄清楚 this 的指向，可 以让我们代码更简洁

函数的调用方式不同， this 指代的对象也不同

编程思想排他思想

使用：

干掉所有人

使用for循环

复活自己

通过 this 或者 下表找到自己或者对应的元素

2节点操作

DOM节点

节点类型：元素节点：所有标签 比如 body、divhtml 是根节点属性节点所有的属性 比如 herf文本节点

所有的文本

其他

查找结点节点关系：父节点查找

parentNode 属性

返回最近一级的父节点 找不到返回为 null

子元素.parenNode子节点查找

childNodes

获得所有子节点、包括文本节点（空格、 换行）、注释节点等

children

仅获得所有元素节点

返回的还是一个伪数组

父元素.children兄弟节点查找下一个兄弟节点nextElementSibling 属性上一个兄弟节点previousElementSibling 属性增加节点1.创建节点

创造出一个新的网页元素

创建元素节点方法：

document.createElement（'标签名'）2.追加节点

​ 插入到父元素的最后一个子元素：

父元素.appendChild(要插入的元素)

​ 插入到父元素的某个子元素的前面：

父元素.insertBefore(要插入的元素, 在哪个元素前面)3.克隆节点若为true,则代表克隆时会包含 后代节点一起克隆若为false,则代表克隆时不包含后代节点默认为false删除节点

删除元素通过父元素删除

语法：

父元素.removeChild(要删除的元素)

注：

不存在父子关系则删除不成功删除节点和隐藏节点（display：none）有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点时间对象时间对象：用来表示时间的对象作用：可以得到当前系统时间1.实例化获得当前时间let date = new Date()获得指定时间let date = new Date('2020-10-31')2.时间对象方法方法作用说明getFullYear()获得年份获取四位年份getMonth()获得月份取值为0~11getDate()获取月份中的每一天不同月份取值也不相同getDay()获取星期取值为0~6getHours()获取小时取值为0~23getMinutes()获取分钟取值为0~59getSeconds()获取秒取值为0~593.时间戳

1.通过时间戳得到是毫秒，需要转换为秒在计算 2.转换公式：

d=parselnt(总秒数/60/60/24)；//计算天数h=parselnt(总秒数/60/60%24); //计算小时m=parselnt(总秒数/60%60)；//计算分s=parselnt(总秒数%60)；//计算当前秒数重绘和回流1.浏览器进行界面渲染

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nhdoeFG8-1668846708685)(C:\Users\s2490\Desktop\知识总结\JavaScript\assets\1665635173326.png)]

解析（Parser)HTML,生成DOM树(DOM Tree)同时解析(Parser)CSS,生成样式规则(Style Rules)根据DOM树和样式规则，生成渲染树(Render Tree)进行布局Layout(回流 / 重排)：根据生成的渲染树，得到节点的几何信息（位置，大小)进行绘制Painting(重绘)：根据计算和获取的信息进行整个页面的绘制Display:展示在页面上2.重绘和回流

回流（重排）

当Render Tree中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为回流。

重绘

由于节点（元 素）的样式的改变并不影响它在文档流中的位置和文档布局时（比如：color、background-color、outline等)，称为重绘。

重绘不一定引起回流， 而回流一定引起重绘。导致回流（重排）的操作：页面的首次刷新浏览器的窗口大小发生改变 元素的大小或位置发生改变改变字体的大小内容的变化（如：input框的输入，图片的大小)激活css伪类（如：：hover)脚本操作DOM(添加或者删除可见的DOM元素)

简单理解影响到布局， 就是回流（重排）

3事件对象获取事件对象

​ 事件对象有事件触发时的相关信息

​ 在事件绑定的回调函数的第一个参数就是事件对象

一般命名为 event、ev、e

元素.addEventListener('click',function(e){})事件对象常用属性type获取当前的事件类型clientX / clientY获取光标相对于浏览器可见窗口左上角的位置offsetX / offsetY获取光标相当于当前 DOM 元素左上角的位置key用户按下的键盘键的值现在不提倡使用keyCode事件流

事件流指的是事件完整执行过程中的流动路径

1.捕获阶段

从父到子

冒泡阶段

从子到父

事件冒泡概念：

当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡

2.事件捕获概念：

从DOM的根元素开始去执行对应的事件（从外到里）事件捕获需要写对应代码才能看到效果代码：DoM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)

addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）

若传入false代表冒泡阶段触发，默认就是false

若是用L0事件监听，则只有冒泡阶段，没有捕获

3.阻止事件流动

因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素

若想把事件就限制在当前元素内，就需要阻止事件流动

阻止事件流动需要拿到事件对象

语法：

事件对象.stopPropagation()

1.阻止默认行为， 比如链接点击不跳转，表单域的跳转

语法：

e.preventDefault()

2.两种注册事件的区别：

传统on注册(L0)同一个对象，后面注册的事件会覆盖前面注册（同一个事件）直接使用ul覆盖偶就可以实现事件的解绑都是冒泡阶段执行的事件监听注册(L2)语法：addEventListener(事件类型，事件处理函数，是否使用捕获)后面注册的事件不会覆盖前面注册的事件（同一个事件）可以通过第三个参数去确定是在冒泡或者捕获阶段执行必须使用removeEventListener(事件类型，事件处理函数，获取捕获或者冒泡阶段) 的存在，所以容易导致事件影响到父级元素

若想把事件就限制在当前元素内，就需要阻止事件流动

阻止事件流动需要拿到事件对象

语法：

事件对象.stopPropagation()

1.阻止默认行为， 比如链接点击不跳转，表单域的跳转

语法：

e.preventDefault()2.两种注册事件的区别：传统on注册(L0)同一个对象，后面注册的事件会覆盖前面注册（同一个事件）直接使用ul覆盖偶就可以实现事件的解绑都是冒泡阶段执行的事件监听注册(L2)语法：addEventListener(事件类型，事件处理函数，是否使用捕获)后面注册的事件不会覆盖前面注册的事件（同一个事件）可以通过第三个参数去确定是在冒泡或者捕获阶段执行必须使用removeEventListener(事件类型，事件处理函数，获取捕获或者冒泡阶段)匿名函数无法被解绑