一、Web API

1、作用

2、分类

二、DOM（文档对象模型）

1、概念

2、作用

3、DOM树

4、DOM对象

三、获取/查找DOM元素（拿过来）

1、根据CSS选择器来获取DOM元素

2、其他获取DOM元素方法

四、操作元素内容

1、对象.innerText属性

2、对象.innerHTML属性

3、操作元素属性

（1）操作元素常用属性

（2）操作元素样式属性

（3）操作表单元素属性

（4）自定义属性

五、定时器-间歇函数

1、使用场景

2、开启定时器

3、关闭定时器

六、日期对象

1、实例化

2、时间对象方法

3、时间戳

七、节点操作

1、DOM节点

2、查找节点

3、增加节点

4、删除节点

八、课后总结

1、事件监听

（1）语法

（2）参数

2、事件捕获（event capturing）

3、事件冒泡（dubbed bubbling）

一、Web API

1、作用

使用JS去操作html和浏览器

2、分类

DOM（文档对象模型）
BOM（浏览器对象模型）

二、DOM（文档对象模型）

1、概念

浏览器提供的一套专门用来操作页面内容的功能

2、作用

操作网页内容，可以开发网页内容特效和实现用户的交互（如：页面滚动、检测键盘等）

3、DOM树

将HTML文档以树状结构直观的表现出来
描述网页内容关系的名词
作用：直观的体现了标签与标签之间的关系（代代相传）

4、DOM对象

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

所有的标签属性都可以在这个对象上找到
若修改这个对象的属性会自动映射到标签上面
核心思想：把网页内容当作对象来处理

document对象

DOM里提供的一个对象
提供的属性和方法都是用来访问和操作网页内容的（例：document.write()）
网页所有的内容都在document里面

三、获取/查找DOM元素（拿过来）

利用JS选择页面中的标签元素

1、根据CSS选择器来获取DOM元素

选择匹配的第一个元素

语法：

document.querySelector('CSS选择器')
//querySelector:查询选择器

参数：包含一个或多个有效的CSS选择器字符串（注意要带引号）

document.querySelector('ul li:first-child')

返回值：CSS选择器匹配的第一个元素，一个HTML元素对象；若未匹配上，则返回null

选择匹配的多个元素

语法：

document.querySelectorAll('CSS选择器')

参数：包含一个或多个有效的CSS选择器字符串（注意要带引号）

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

document.querySelectorAll('ul li')

结果：得到一个伪数组：

有长度有索引号的数组，但没有pop() push()等数组方法
想要得到里面的每一个对象，则需要遍历（for）的方法获得（哪怕只有一个元素，通过querySelectAll()获取来的也是一个伪数组，里面只有一个元素而已）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">.box{width: 200px;height: 200px;}</style>
</head>
<body><div class="box">123</div><div class="box">abc</div><p id = "nav">导航栏</p><ul><li>测试1</li><li>测试2</li><li>测试3</li></ul><script>// 1、获取匹配的第一个元素let box = document.querySelector('div')   //CSS选择器；querySelector:查询选择器;哪怕有多个选择器，也只会打印第一个// let box = document.querySelector('.box')  //类名,同样是选择第一个console.dir(box)  //使用log无展开，dir(打印)有展开let p = document.querySelector('#nav') console.dir(p) // 1、获取第一个小ul lilet li =document.querySelector('ul li:first-child')console.dir(li)// 2、获取所有的小ul lilet lis =document.querySelectorAll('ul li') //注意lis（多个li 复数）console.log(lis) //使用log就可以看到数组的形态</script>
</body>
</html>

2、其他获取DOM元素方法

四、操作元素内容

修改元素的文本更换内容（如：秒杀价倒计时）

操作标签==操作DOM对象
操作对象使用的点语法
若想修改标签元素里面的内容，可使用对象.innerText属性或对象.innerHTML属性

1、对象.innerText属性

将文本内容添加/更新到任意标签位置
显示纯文本，不解析标签

<body><div class="box">我是文字的内容</div><script type="text/javascript">//1、获取元素const box = document.querySelector('.box')// 2、修改文字内容，   对象.innerText属性// box：对象，有属性和方法console.log(box.innerText)  //（输出）获取文字内容box.innerText = '我是一个盒子' //修改文字内容// box.innerText = '<strong>我是一个盒子</strong>' //innerText不识别里面的标签</script>
</body>

2、对象.innerHTML属性

能识别文本，能解析标签

3、操作元素属性

（1）操作元素常用属性

通过JS设置/修改标签元素属性（比如：通过src更换图片）
常见属性：href；title；src
语法：对象.属性 = 值

（2）操作元素样式属性

通过JS设置/修改标签元素的样式属性（比如通过轮播图小圆点自动更换颜色样式；点击按钮可以滚动图片，移动图片的位置left）
通过style、操作类名（className)、操作类控制CSS

className

使用场景：修改样式较多，直接用style属性修改较为繁琐

语法：元素.className = ' css类名 '

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

classList

使用场景：className容易覆盖原先的类名，因此我们可以使用classList方式来追加和删除类名（新类追加到旧类后）

语法：对象.classList.add = ' css类名 ' (追加一个类名）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;color: bisque;}.active{color: aqua;background-color: blueviolet;}</style>
</head>
<body><div class="box">文字</div><script>//通过classList添加// 1、获取元素const box = document.querySelector('.box')// 2、修改样式// 2.1 追加类 add() 类名不加点，并且是字符串// box.classList.add('active')// 2.2 删除类 remove() 类名不加点，并且是字符串// box.classList.remove('box')// 2.3 切换类 toggle() 有还是没有 有就删掉 没有就加上box.classList.toggle('active')</script>
</body>
</html>

（3）操作表单元素属性

获取属性：DOM对象.属性名（例如：表单.value = '用户名'）
设置属性：DOM对象.属性名 = 新值（l例如：表单.type = 'password')
比如：点击眼睛，可以看到密码，本质是将表单类型转为文本框；勾出全选（用布尔值表示）

（4）自定义属性

在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div data-id="1" data-spm="你好">1</div><div data-id="2">2</div><div data-id="3">3</div><div data-id="4">4</div><div data-id="5">5</div><script>const one = document.querySelector('div')console.log(one.dataset.id)  //1 (默认取第一个)console.log(one.dataset.spm) //你好</script>
</body>
</html>

五、定时器-间歇函数

1、使用场景

每隔一段时间需要自动执行一段代码，不需要我们手动触发（例如：网页中的倒计时，验证码，轮播图）

2、开启定时器

setInterval(函数，间隔时间）
//函数名不要加小括号

作用：每隔一段时间调用这个函数
间隔时间单位：毫秒
定时器返回的是一个id数字

3、关闭定时器

let 变量名 = setInterval(函数，间隔时间）
clearInterval(变量名)

一般不会刚创建就停止，而是满足一定条件后再停止
定时器返回的是一个id数字

六、日期对象

用来表示时间的对象，可以得到当前系统的时间

1、实例化

在代码中发现了new关键字，将这个操作称为实例化
创建一个时间对象并获取时间

获得当前时间：const date = new Date()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 实例化 new// 得到当前时间const date = new Date()console.log (date)// 得到指定时间const date1 = new Date('2023-4-25 18:30:00')console.log (date1)</script>
</body>
</html>

2、时间对象方法

使用场景：因为日期对象返回的数据不能直接使用，所以需要转换为实际开发中

3、时间戳

使用场景：计算倒计时效果

算法：

将来的时间戳 - 现在的时间戳 = 剩余时间的毫秒数
剩余时间的毫秒数转换为剩余时间的年月日时分秒就是倒计时时间

获取方法：

getTime

//  getTime const date = new Date()console.log(date.getTime())

+new Date()

无需实例化

// +new Date()console.log(new Date())

Date.now()

无需实例化，但只能得到当前的时间戳，前两种可以返回指定时间的时间戳

// Date.now()console.log(Date.now())

七、节点操作

1、DOM节点

DOM树里面的每一个内容都称之为节点

节点类型：

类型	说明
元素节点	所有的标签（比如 body、div） html是根节点
属性节点	所有的属性（比如 href）
文本节点	所有的文本

2、查找节点

通过节点关系来查找节点（例如：关闭二维码等）
节点关系：针对的找亲戚返回的都是对象（节点关系包括父节点、子节点、兄弟节点）

父节点:

语法：子元素.parentNode

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

子节点:

语法：父元素.children

仅获得所有元素节点，返回的是一个伪数组

兄弟节点:

下一个兄弟节点：nextElementSibling属性

上一个兄弟节点：previousElementSibling属性

3、增加节点

在页面中增添元素（例如：点击发布按钮，可以新增一条信息）

创建节点

即创建出一个新的网页元素，再添加到网页内（先创建节点，再插入节点）

语法：document.createElement('标签名')

追加节点

插入到父元素的最后一个子元素：父元素.appendChild(要插入的元素）

插入到父元素中某个子元素前面：父元素.insertBefore(要插入的元素，在哪个元素前面）

使用场景：用数据渲染页面

克隆节点

语法：元素.cloneNode(布尔值)

cloneNode会克隆出一个和原来的标签一样的元素，括号内传入布尔值

若为true，则代表克隆时会包含后代节点一起克隆

若为false，则代表克隆时不包含后代节点

默认为false

4、删除节点

在DOM操作中，要删除元素必须通过父元素删除，如果不存在父子关系则删除不成功

删除节点和隐藏节点(display:none)区别:隐藏节点依旧存在，但是要删除，则得从html中删除节点

语法：父元素.removeChild(要删除的元素)

八、课后总结

1、事件监听

（1）语法

element.addEventListener(event, function, useCapture)

（2）参数

参数	说明
event	指定事件名注意: 不要使用 "on" 前缀。例如：应该使用 "click" ,而不是使用 "onclick"
function	指定要事件触发时执行的函数当事件对象会作为第一个参数传入函数事件对象的类型取决于特定的事件。例如："click" 事件属于 MouseEvent(鼠标事件) 对象
useCapture	布尔值，指定事件是否在捕获或冒泡阶段执行。可能值: true - 事件句柄在捕获阶段执行 false- false- 默认，事件句柄在冒泡阶段执行

2、事件捕获（event capturing）

事件捕获是由外到内的。在事件捕获阶段，事件会从 DOM 树的最外层开始，依次经过目标节点的各个父节点，并触发父节点上的事件，直至到达事件的目标节点

会用到addEventListener方法，在一般情况下，该方法只会用到两个参数，一个是需要绑定的事件，另一个是触发事件后要执行的函数，但是，addEventListener还可以传入第三个参数，该参数默认值是false，表示在事件冒泡阶段调用事件处理函数；如果该参数为true，则表示在事件捕获阶段调用处理函数

3、事件冒泡（dubbed bubbling）

事件冒泡是由内到外的，它是从目标节点开始，沿父节点依次向上，并触发父节点上的事件，直至文档根节点，就像水底的气泡一样，会一直向上

而addEventListener的第三个参数默认值是false，表示在事件冒泡阶段调用事件处理函数，这说明事件监听器默认监听冒泡事件

目前我们遵循先捕获后冒泡的顺序，即当出发DOM事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡

学到了很多~（撒花）

蓝旭前端预习5之DOM（文档对象模型）相关推荐

蓝旭前端第二周预习———HTML标签+如何查看控制台
蓝旭前端第二周预习---HTML标签+如何查看控制台 HTML标签文档文档生成文档结构标签标签语法基本标签如何查看控制台(chrome) HTML标签文档文档生成 VScode中&q ...
蓝旭前端开发：GITtomcat+nginx原理移动端web 开发
蓝旭前端开发:GIT+移动端 web 开发目录一.==GIT== 1.1 ==Git与GitHub== 1.2 ==GitHub注册和Git的下载安装== 二.==Git的使用== 2.1 ==本 ...
html中js方法中如何传递本元素对象,JS HTML DOM (文档对象模型)
DOM简介当网页加载时,浏览器会创建页面的文档对象模型(DOM).通过DOM,JS可以对HTML实现以下操作: 改变页面中的所有HTML元素. 改变页面中的所有HTML属性. 改变页面中的所有CSS ...
BOM（浏览器对象模型）和DOM(文档对象模型)
什么是BOM(浏览器对象模型) BOM:(Browser Object Mode) 浏览器对象模型. 由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 ...
Web前端——JavaScript（dom文档对象模型）
>JS的Document 对象每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 对象的方法: ...
2022年蓝旭前端第三次暑期培训课(上)
一.HTTP协议 1.1 认识http HTTP协议(HyperText Transfer Protocol) 全称超文本传输协议,是因特网上最广泛的一种网络传输协议,基于TCP/IP协议传输数据. ...
2022年蓝旭前端第三次暑期培训课(下)
一.JSON JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation),是一种轻量级的文本数据交换格式.JSON使用javascript语法来描述数据 ...
JavaScript 操作 HTML DOM (文档对象模型) 相关知识点
HTML DOM 树通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML. JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页 ...
JavaScript DOM文档对象模型小结
分类 Node:节点对象,其他五个节点的父对象,里面封装了其他DOM通用方法,所以其他对象都可以称为节点对象. Document:文档对象/节点 Element:元素对象/节点 Attribute:属 ...

蓝旭前端预习5之DOM（文档对象模型）

一、Web API

1、作用

2、分类

二、DOM（文档对象模型）

1、概念

2、作用

3、DOM树

4、DOM对象

三、 获取/查找DOM元素（拿过来）

1、根据CSS选择器来获取DOM元素

2、其他获取DOM元素方法

四、操作元素内容

1、对象.innerText属性

2、对象.innerHTML属性

3、 操作元素属性

（1）操作元素常用属性

（2）操作元素样式属性

（3）操作表单元素属性

（4）自定义属性

五、定时器-间歇函数

1、使用场景

2、开启定时器

3、关闭定时器

六、日期对象

1、实例化

2、时间对象方法

3、时间戳

七、节点操作

1、DOM节点

2、查找节点

3、增加节点

4、删除节点

八、课后总结

1、事件监听

（1）语法

（2）参数

2、事件捕获（event capturing）

3、事件冒泡（dubbed bubbling）

蓝旭前端预习5之DOM（文档对象模型）相关推荐

最新文章

热门文章

三、获取/查找DOM元素（拿过来）

3、操作元素属性