dom知识点学习

一、DOM介绍

1.DOM

​ 文档对象模型（Document Object Model，简称DOM），是 W3C组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。

​ W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

2. DOM树

DOM树 又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。

文档：一个页面就是一个文档，DOM中使用document表示

节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示

标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示

3.DOM对象

1. 浏览器根据html标签生成的JS对象， 所有的标签属性都可以在这个对象上面找到，修改这个对象的属性会自动映射到标签身上
2. DOM的核心思想：把网页内容当做对象来处理
3. document 对象是DOM 里提供的一个对象，所以它提供的属性和方法都是用来访问和操作网页内容的。 例：document.write() ；网页所有内容都在document里面

4.获取DOM元素

4.1 根据CSS选择器来获取DOM元素(重点)

1. CSS选择器匹配的第一个元素

   语法：document.querySelector('CSS选择器')

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

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

​ 如果没有匹配到，则返回null。

2. 选择匹配的多个元素

   语法：document.querySelectorAll('CSS选择器')

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

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

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

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

1. 根据ID获取

   document.getElementById(‘id’)

2. 根据标签名获取元素

   document.getElementByTagName(‘div’)

3. 根据类名获取

   document.getElementByClassName(‘类名’)

5.设置/修改DOM元素内容

能够修改元素的文本更换内容

document.write() 方法

只能将文本内容追加到 前面的位置，文本中包含的标签会被解析

对象.innerText 属性

将文本内容添加/更新到任意标签位置，文本中包含的标签不会被解析

对象.innerHTML 属性

将文本内容添加/更新到任意标签位置，文本中包含的标签会被解析

6.设置/修改DOM元素属性

6.1 设置/修改元素常用属性

​ 1.可以通过JS 设置/修改标签元素属性，比如通过src更换图片

2. 最常见的属性比如： href、title、src 等

3. 语法：对象.属性 = 值

4. 举例：

   //获取元素
   let pic = document.querySelector(‘img’)
   //操作元素
   pic.src = ‘./img/00.jpg’
   pic.title = ‘这是一个图片’
   

6.2 设置/修改元素样式属性

通过JS 设置/修改标签元素的样式属性。比如通过轮播图小圆点自动更换颜色样式；点击按钮可以滚动图片 等等

通过style 属性操作CSS

对象.style.样式属性 = 值

操作类名(className) 操作CSS

元素.className = ‘active’ //active是一个CSS类名

通过classList 操作类控制CSS

为了解决 className容易覆盖以前的类名，我们可通过classList方式追加和删除类名

​ //追加一个类

​ 元素.classList.add('类名')

​ //删除一个类

​ 元素.classList.remove('类名')

​ //切换一个类

​ 元素.classList.toggle('类名')

6.3 设置 /修改 表单元素属性

获取 : DOM .属性名

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

表单.value = ‘用户名’

表单.type = ‘password’

7.定时器-间歇函数

目标： 能够使用定时器函数重复执行代码；定时器函数可以开启和关闭

1. 开启定时器

setInterval(函数，间隔时间)

2. 关闭定时器

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

clearInterval(变量名)

3. 作用：每隔一段时间调这个函数；间隔时单位是毫秒

4. 注意：函数名字不需要加括号；定时器返回的是一个 id 数字

二、事件

事件是在编程时系统内发生的动作或者发生的事情，比如用户在网