WEB API——DOM文档对象模型（一）

#WEB API##分类

#DOM                                                         ##概念                                                       ##获取/修改DOM元素、属性                           ##事件                                                             ###事件监听                                             ##间歇函数                                                   ##回调函数                                                 ##环境变量

一、WEB API

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

2. 分类：DOM (文档对象模型)                                       BOM（浏览器对象模型）

二、DOM

1. 基础

1.1 概念

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

1.2 作用

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

1.3 DOM树

       将HTML文档以树状结构直观的表现出来

作用：直观的体现了标签与标签之间的关系

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

DOM的核心思想：把网页内容当做对象来处理

eg: document 对象是DOM 里提供的一个对象所以它提供的属性和方法都是用来访问和操作网页内容的

2. 获取DOM元素

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

2.1.1

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

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

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

CSS选择器匹配的NodeList对象集合，返回的是一个伪数组

注：伪数组和数组的区别：没有 pop() push() 等数组方法

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

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

3.1 document.write() 方法

只能将文本内容追加到 </body> 前面的位置    解析标签

3.2 对象.innerText 属性

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

3.3 对象.innerHTML 属性

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

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

4.1 常用属性

对象.属性 ＝ 值

4.2 元素样式属性

4.2.1 通过 style 操作CSS

对象.style.属性名 ＝ 值

注： 如果属性有-连接符，需要转换为驼峰命名法 ; css单位

4.2.2 通过 className 操作CSS

对象.className ＝ '类名'

如果修改的样式比较多，通过style属性修改比较繁琐

注：直接使用 className 赋值会覆盖以前的类名

4.2.3 通过 classList 操作类控制CSS

对象.classList.add('类名')                              对象.classList.remove('类名')                          对象.classList.toggle('类名')

注：classList 是追加和删除不影响以前类名,开发中多用classList

5. 定时器——间歇函数（可以根据时间自动重复执行某些代码）

开始

setInterval(函数, 间隔时间)

移除

let 变量名 ＝ setInterval(函数, 间隔时间)         clearInterval(变量名)

6. 事件

6.1 事件概念：事件是在编程时系统内发生的动作或者发生的事情（用户在网页上单击一个按钮）

6.2 事件监听：就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为注册事件

6.2.1 语法：元素.addEventListener('事件', 要执行的函数)

6.2.2 三要素：

事件源： 那个dom元素被事件触发了，要获取dom元素 ;                                                    事件： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等 ;                               函数： 要做什么事

 

6.3 事件类型

6.3.1 鼠标事件                                          click 鼠标点击                                 mouseenter 鼠标经过                           mouseleave 鼠标离开

6.3.2 焦点事件                                        focus 获得焦点                                           blur 失去

6.3.3 键盘事件                                        Keydown 键盘按下触发                             Keyup键盘抬起

6.3.4 文本事件                                          input 用户输入事件触发焦点

7. 回调函数

       如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数

注：回调函数本质还是函数，只不过把它当成参数使用

 

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

注：简记【谁调用，this 就是谁】