web前端JS（DOM）学习第三十一天

DOM

web API基本认知
获取DOM对象
设置/修改DOM元素内容
设置/修改DOM元素属性
定时器-间歇函数

学习目标：
1，能够获取DOM元素并修改元素属性
2，具备利用定时器间歇函数制作焦点图切换的能力

1，Web API 基本认识

作用和分类
什么是DOM
DOM树
DOM对象

1.1，作用和分类
作用：就是使用JS去操作html和浏览器
分类：DOM（文档对象模型），BOM（浏览器对象模型）

1.2，什么是DOM
DOM（Document Object Model———文档对象模型）是用来呈现以及与任意HTML或XML文档交互的API

白话文：DOM是浏览器提供的一套专门用来操作网页内容的功能

DOM作用：开发网页内容特效和实现用户交互。

小结：
1，Web API阶段我们学习那两部分？

• DOM

• BOM
  2，DOM是什么？有什么作用？

• DOM是文档对象模型

• 操作网页内容，可以开发网页内容特效和实现用户交互

1.3，DOM树
DOM树是什么？

• 将HTML文档以树状结构直观的表现出来，我们称之为文档树或DOM树

描述网页内容关系的名词

• 作用：文档树直观的体现了标签与标签的关系

1.4,DOM对象（重要）
DOM对象：浏览器根据HTML标签生成的JS对象

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

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

DOM的核心思想

• 把网页内容当做对象来处理

document 对象

• 是DOM里提供的一个对象

• 所以它提供的属性和方法都是用来访问和操作网页内容的

列：document.write()
网页所有内容都在document里面

小结：

1，DOM树是什么？

• 将HTML文档以树状结构直观的表现出来，我们称之为文档树或DOM树
• 作用：文档树直观的体现了标签与标签之间的关系
  

2，DOM对象怎么创建的？

• 浏览器根据html标签生成的JS对象（DOM对象）

• DOM的核心就是把内容当对象来处理

3，document是什么？

• 是DOM里提供的一个对象

• 网页所有内容都在document里面

2，获取DOM元素

根据CSS选择器来获取DOM元素（重点）
其他获取DOM元素方法（了解）

1，根据CSS选择器来获取DOM元素（重点）
1.1，选择匹配的第一个元素

语法：

document.querySelector('css选择器')

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

返回值：
css选择器匹配的第一个元素，一个HTMLElement对象。

如果没有匹配到，则返回nul

多参看文档：https：//developer.mozilla.org/zh-CN、docs/web/API/Document/querySelector

1.2,选择器匹配的多个元素

语法：

document.querySelectorAll('css 选择器')

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

返回值：css选择器匹配的Nodelist对象集合

document.querySelectorAll('ul li')

思考：

1，获取一个DOM元素我们使用谁？

• querySelector（）

2，获取多个DOM元素我们使用谁？

• querySelectorAll（）

3，querySelector（）方法能直接操作修改吗？

• 可以

4，querySelectorAll（）方法能直接修改吗？如果不能可以怎么做到呢？

• 不可以，只能通过遍历的方式一次给里面的元素做修改

document.querySelectorAll('css 选择器')

得到的是一个伪数组

• 有长度有索引号的数组
• 但是没有pop（）push（）等数组方法想要得到里面的每一个对象，则需要遍历（for）的方法获得。

注意事项：哪怕只有一个元素，通过querySelectorSll（）获取过来的也是一个伪数组，里面只有一个元素而已

2，其他获取DOM元素方法（了解）

//根据id获取一个元素
document.getElemntById('nav')

//根据标签获取一个类元素  获取页面 所有div
document.getElementsByTagName('div')

//根据 类名获取元素  获取页面 所有类名为w的
document.getElemntsByClassName('w')

小结：
1，获取页面中的标签我们最终常用那两种方式？

• querySelectorAll（）

• querySelector（）

2，他们两者的区别是什么？

• querySelector（）只能选择一个元素，可以直接操作

• querySelectorAll（）可以选择多个元素，得到的是伪数组，需要遍历得到的每一个元素

3，他们两者小括号里面的参数有神马注意事项？

• 里面写CSS选择器

• 必须是字符串，也就是必须加引号

3，设置/修改DOM元素内容

document.write（）方法

对象.innerText属性

对象.innerHTML属性

1，document.write（）

• 只能将文本内容追加到前面的位置

• 文本中包含的标签会被解析

2，元素innerText属性

• 将文本内容添加/更新到任意标签位置

• 文本中包含的标签不会被解析

//innerText 将文本内容添加/ 更新到任意标签位置
let info = document.getElementById('info')

//info.innerText = '你好~~~'
info.innerText = '<h4>你好~~~</h4>'

3,元素.innerHTML 属性

• 将文本内容添加/更新到任意标签位置

• 文本中包含的标签会被解析

//2，innerHTML 属性
box.innerHTML = '<h3>你好<br>我叫表白
</h3>'

小结：

1，设置/修改DOM元素内容有哪3种方式？

• document.write()方法

• 元素.innerText属性

• 元素.innerHTML属性

2，三者的区别是什么&#x