JavaScript 基础 API DOM（一）

1.1 作用和分类

• 作用: 就是使用 JS 去操作 html 和浏览器
• 分类：DOM (文档对象模型)、BOM（浏览器对象模型）

1.2 什么是DOM

• DOM（ Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的APIl
• 白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能
• DOM作用

1.  开发网页内容特效和实现用户交互

 DOM对象（重要）

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

•  所有的标签属性都可以在这个对象上面找到
•  修改这个对象的属性会自动映射到标签身上 

DOM的核心思想 

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

document 对象

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

1.      例：document.write()

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

获取DOM对象 

document

document 是 JavaScript 内置的专门用于 DOM 的对象，该对象包含了若干的属性和方法，

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

1. querySelector 满足条件的第一个元素
2. querySelectorAll 满足条件的元素集合 返回伪数组
3. 了解其他方式

 操作元素内容

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

常用属性修改

1. 直接能过属性名修改，最简洁的语法

控制样式属性

1. 应用【修改样式】，通过修改行内样式 style 属性，实现对样式的动态修改。

通过元素节点获得的 style 属性本身的数据类型也是对象，如 box.style.color、box.style.width 分别用来获取元素节点 CSS 样式的 color 和 width 的值。

    2 .操作类名(className) 操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式

操作表单元素属性

获取:DOM对象.属性名

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

自定义属性

标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected

自定义属性：

在html5中推出来了专门的data-自定义属性

在标签上一律以data-开头

在DOM对象上一律以dataset对象方式获取

间歇函数

setInterval 是 JavaScript 中内置的函数，它的作用是间隔固定的时间自动重复执行另一个函数，也叫定时器函数

// 开启定时器

let 变量名 = setInterval（函数， 时间）

 // 停止定时器

clearInterval(变量名)

事件

事件是编程语言中的术语，它是用来描述程序的行为或状态的，一旦行为或状态发生改变，便立即调用一个函数

事件监听

结合 DOM 使用事件时，需要为 DOM 对象添加事件监听，等待事件发生（触发）时，便立即调用一个函数。

addEventListener 是 DOM 对象专门用来添加事件监听的方法，它的两个参数分别为【事件类型】和【事件回调】

步骤：

1. 获取 DOM 元素
2. 通过 addEventListener 方法为 DOM 节点添加事件监听
3. 等待事件触发，如用户点击了某个按钮时便会触发 click 事件类型
4. 事件触发后，相对应的回调函数会被执行

事件类型

click 译成中文是【点击】的意思，它的含义是监听（等着）用户鼠标的单击操作，除了【单击】还有【双击】dblclick

事件处理程序

addEventListener 的第2个参数是函数，这个函数会在事件被触发时立即被调用，在这个函数中可以编写任意逻辑的代码，如改变 DOM 文本颜色、文本内容等。

鼠标事件 

1. `mouseenter 监听鼠标是否移入 DOM 元素
2. `mouseleave 监听鼠标是否移出 DOM 元素

<script>const div = document.querySelector('div')// 鼠标经过div.addEventListener('mouseenter', function () {console.log(`轻轻的我来了`)})// 鼠标离开div.addEventListener('mouseleave', function () {console.log(`轻轻的我走了`)})</script>

键盘事件

keydown 键盘按下触发 keyup 键盘抬起触发

<script>const input = document.querySelector('input')// 1. 键盘事件// input.addEventListener('keydown', function () {//   console.log('键盘按下了')// })// input.addEventListener('keyup', function () {//   console.log('键盘谈起了')// })// 2. 用户输入文本事件  inputinput.addEventListener('input', function () {console.log(input.value)})</script>

焦点事件

focus 获得焦点

blur 失去焦点

const input = document.querySelector('input')input.addEventListener('focus', function () {console.log('有焦点触发')})input.addEventListener('blur', function () {console.log('失去焦点触发')})

文本框输入事件

input

<script>// const btn = document.querySelector('button')// btn.addEventListener('click', function (e) {//   console.log(e)// })const input = document.querySelector('input')input.addEventListener('keyup', function (e) {// console.log(11)// console.log(e.key)if (e.key === 'Enter') {console.log('我按下了回车键')}})</script>

script>const str = '          im a teacher  '// console.log(str.trim())  // 去除字符串左右的空格const tx = document.querySelector('textarea')tx.addEventListener('keyup', function (e) {// console.log(tx.value)if (e.key === 'Enter') {// console.log(tx.value)console.log(tx.value.trim() === '')}})</script>

事件对象

任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。

事件回调函数的【第1个参数】即所谓的事件对象，通常习惯性的将这个对数命名为 event、ev 、e 。

接下来简单看一下事件对象中包含了哪些有用的信息：

1. ev.type 当前事件的类型
2. ev.clientX/Y 光标相对浏览器窗口的位置
3. ev.offsetX/Y 光标相于当前 DOM 元素的位置

注：在事件回调函数内部通过 window.event 同样可以获取事件对象。

环境对象

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

结论：

1. this 本质上是一个变量，数据类型为对象
2. 函数的调用方式不同 this 变量的值也不同
3. 【谁调用 this 就是谁】是判断 this 值的粗略规则
4. 函数直接调用时实际上 window.sayHi() 所以 this 的值为 window

回调函数

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

结论：

1. 回调函数本质还是函数，只不过把它当成参数使用
2. 使用匿名函数做为回调函数比较常见