一、DOM介绍
1.DOM
文档对象模型(Document Object Model,简称DOM),是 W3C组织推荐的处理可扩展标记语言(html或者xhtml)的标准编程接口。
W3C 已经定义了一系列的 DOM 接口,通过这些 DOM 接口可以改变网页的内容、结构和样式。
2. DOM树
DOM树 又称为文档树模型,把文档映射成树形结构,通过节点对象对其处理,处理的结果可以加入到当前的页面。
文档:一个页面就是一个文档,DOM中使用document表示
节点:网页中的所有内容,在文档树中都是节点(标签、属性、文本、注释等),使用node表示
标签节点:网页中的所有标签,通常称为元素节点,又简称为“元素”,使用element表示
3.DOM对象
- 浏览器根据html标签生成的JS对象, 所有的标签属性都可以在这个对象上面找到,修改这个对象的属性会自动映射到标签身上
- DOM的核心思想:把网页内容当做对象来处理
- document 对象是DOM 里提供的一个对象,所以它提供的属性和方法都是用来访问和操作网页内容的。 例:document.write() ;网页所有内容都在document里面
4.获取DOM元素
4.1 根据CSS选择器来获取DOM元素(重点)
-
CSS选择器匹配的第一个元素
语法:
document.querySelector('CSS选择器')
参数:包含一个或多个有效的CSS选择器字符串
返回值:CSS选择器匹配的第一个元素,一个HTMLElement对象。
如果没有匹配到,则返回null。
-
选择匹配的多个元素
语法:
document.querySelectorAll('CSS选择器')
参数:包含一个或多个有效的CSS选择器字符串
返回值:CSS选择器匹配的NodeList 对象集合
得到的是一个伪数组:有长度有索引号的数组,但是没有pop() push() 等数组方法,想要得到里面的每一个对象,则需要遍历(for)的方式获得。
哪怕只有一个元素,通过querySelectAll() 获取过来的也是一个伪数组,里面只有一个元素而已
4.2其他获取DOM元素方法(了解)
-
根据ID获取
document.getElementById(‘id’)
-
根据标签名获取元素
document.getElementByTagName(‘div’)
-
根据类名获取
document.getElementByClassName(‘类名’)
5.设置/修改DOM元素内容
能够修改元素的文本更换内容
document.write() 方法
只能将文本内容追加到 前面的位置,文本中包含的标签会被解析
对象.innerText 属性
将文本内容添加/更新到任意标签位置,文本中包含的标签不会被解析
对象.innerHTML 属性
将文本内容添加/更新到任意标签位置,文本中包含的标签会被解析
6.设置/修改DOM元素属性
6.1 设置/修改元素常用属性
1.可以通过JS 设置/修改标签元素属性,比如通过src更换图片
-
最常见的属性比如: href、title、src 等
-
语法:对象.属性 = 值
-
举例:
//获取元素 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.定时器-间歇函数
目标: 能够使用定时器函数重复执行代码;定时器函数可以开启和关闭
- 开启定时器
setInterval(函数,间隔时间)
- 关闭定时器
let 变量名 = setInterval(函数,间隔时间)
clearInterval(变量名)
-
作用:每隔一段时间调这个函数;间隔时单位是毫秒
-
注意:函数名字不需要加括号;定时器返回的是一个 id 数字
二、事件
事件是在编程时系统内发生的动作或者发生的事情,比如用户在网