DOM和BOM
DOM
- 根据CSS选择器来获取DOM元素 (重点)
- - 选择引号里面加**css选择器**
  - 获取页面标签querySelect和querySelectAll
- 其他获取DOM元素方法（了解）
- 设置/修改DOM元素内容
- - document.write() 方法
  - 对象.innerText 属性
  - 对象.innerHTML 属性
  - 例子——随机点名
- 设置/修改DOM元素属性3种
- - 1.设置/修改元素`常用`属性——通过src更换图片属性
  - 2.1设置/修改元素`样式`属性——通过 style 属性操作CSS
  - 2.2设置/修改元素`样式`属性——操作类名(className) 操作CSS
  - 2.3设置/修改元素`样式`属性——通过 classList 操作类控制CSS
  - 3.设置/修改`表单`元素属性
- 定时器-间歇函数(setInterval、clearInterval)
- - 案例——阅读协议定时器
- 事件
- - 注册和两种注册事件
  - 事件类型
- 高阶函数（函数表达式、回调函数）
- this
- 排他思想
- 节点
- - 查找节点parentNode、children、nextElementSibling/previousElementSibling
  - 增加节点createElement、appendChild/insertBefore、克隆节点cloneNode()
  - 删除节点removeChild()
- 时间对象
- - 时间例子YYYY-MM-DD HH:mm形式
  - 时间戳（倒计时常用）
- 重绘和回流(面试）
- 事件对象
- - 常用属性
- 事件流
- - 阻止事件流动stopPropagation()（阻止冒泡）
  - 阻止默认行为（比如a标签的跳转）
  - 事件委托
- 其余补充

插件：Error Lens插件可以提示报错

DOM和BOM

DOM

DOM对象

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

选择引号里面加css选择器

引号里面加css选择器，肯定首先选中这个标签，跟 CSS选择器类似，选中标签才能操作

获取页面标签querySelect和querySelectAll

querySelect：只能选择一个元素，可以直接操作
querySelectAll：可以选择多个元素，得到的是伪数组，需要遍历得到
每一个元素，返回的是NodeList伪数组(数组需要遍历而不能直接获取元素，每一个元素是Obj对象）
括号里面：必须是字符串，也就是必须加引号，里面写css选择器

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

设置/修改DOM元素内容

document.write() 方法

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

对象.innerText 属性

将文本内容添加/更新到任意标签位置
文本中包含的标签不会被解析
obj.innerText = ‘有点意思’，对象.属性 = 值

对象.innerHTML 属性

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

例子——随机点名

设置/修改DOM元素属性3种

通过 JS 设置/修改标签元素属性

1.设置/修改元素`常用`属性——通过src更换图片属性

最常见的属性比如： href、title、src 等
其实就是对象.属性 = 值

2.1设置/修改元素`样式`属性——通过 style 属性操作CSS

修改样式通过style属性引出
如果属性有-连接符，需要转换为小驼峰命名法
赋值的时候，需要的时候不要忘记加css单位

例子（刷新切换背景图片，图片路径数字更换）

2.2设置/修改元素`样式`属性——操作类名(className) 操作CSS

由于class是关键字, 所以使用className去代替,可以同时修改多个样式
className是使用新值换旧值（会覆盖）, 如果需要添加一个类,需要保留之前的类名

2.3设置/修改元素`样式`属性——通过 classList 操作类控制CSS

1.为了解决className 容易覆盖以前的类名（并且还要去查看已有的类名），我们可以通过classList方式追加、删除、切换类名
2.注意这里的就没有.类名了，而是直接类名
3.toggle如果有就删掉，没有就加上

3.设置/修改`表单`元素属性

表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框,正常的有属性有取值的跟其他的标签属性没有任何区别。

常见表单属性:value、disabled、checked、selected

定时器-间歇函数(setInterval、clearInterval)

函数名字不需要加括号（加了括号就是立即调用了）
定时器返回的是一个id数字（定时器的数字）let timerId = setInterval(repeat, 1000)，该数字用于清除定时器

一般不会刚创建就停止，而是满足一定条件再停止

案例——阅读协议定时器

事件

注册和两种注册事件

事件是在编程时系统内发生的动作或者发生的事情,比如用户在网页上单击一个按钮。

什么是事件？

事件是在编程时系统内发生的动作或者发生的事情
比如点击按钮 click

什么是事件监听(绑定事件，注册事件，事件侦听)？

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

事件监听三要素：

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

两种注册事件的区别：

传统on注册（L0）

同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
直接使用null覆盖偶就可以实现事件的解绑
都是冒泡阶段执行的（没有捕获）

事件监听注册（L2）

语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)
后面注册的事件不会覆盖前面注册的事件(同一个事件)
可以通过第三个参数去确定是在冒泡或者捕获阶段执行
必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
匿名函数无法被解绑（所以要给名字，下面的第二次匿名函数就无法解绑）

事件类型

click 鼠标点击
dblclick 双击鼠标
mouseenter 鼠标经过(没有冒泡效果，推荐）
mouseleave 鼠标离开(没有冒泡效果，推荐）
mouseover 鼠标经过（有冒泡效果）
mouseout 鼠标离开（有冒泡效果）
mousemove 鼠标移动
focus 获得焦点
blur 失去焦点
keydown 键盘按下触发（包括按的什么键：回车Enter、删除Delete、空格Space等等,删除返回Backspace，属性.key区分）
keyup 键盘抬起触发
input 用户输入事件

inputtype属性选择器

input[type=“text”]{}
选中属性值为text的input

input[type|=“text”]{}
选中以text-开始的input的type属性值,例如<input type=“text-sadads”>

高阶函数（函数表达式、回调函数）

高阶函数可以被简单理解为函数的高级应用，
JavaScript 中函数可以被当成【值】来对待，基于这个特性实现函数的高级应用。
【值】就是 JavaScript 中的数据，如数值、字符串、布尔、对象等。

函数表达式
普通函数的声明与调用无顺序限制，推荐做法先声明再调用，函数表达式必须要先声明再调用。
把函数也是【数据】，把函数（可能是匿名函数）赋值给变量
回调函数
如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数；
当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数，
回调函数本质还是函数，只不过把它当成参数使用；
使用匿名函数做为回调函数比较常见。

this

环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境
作用：弄清楚this的指向，可以让我们代码更简洁

函数的调用方式不同，this 指代的对象也不同
【谁调用， this 就是谁】是判断 this 指向的粗略规则
直接调用函数，其实相当于是 window.函数，所以 this 指代 window

排他思想

第一种方法：遍历所有的加点击事件，如果这个button被点击了，就遍历所有的去掉class名，然后只给当前点击的加

改进思想：遍历所有的点击事件，如果这个button被点击了，就从类名为pink的选择器列表中移除类为pink的（注意哪些有点，哪些没有）

节点

DOM节点：DOM树里每一个内容都称之为节点
节点类型有以下3种：
元素节点：所有的标签比如 body、 div、 html 是根节点
属性节点：所有的属性：比如 href、
文本节点：所有的文本：其他

查找节点parentNode、children、nextElementSibling/previousElementSibling

获取父节点
parentNode 属性：返回最近一级的父节点找不到返回为nul
获取子节点（两种，开发用children）
childNodes：获得所有子节点、包括文本节点（空格、换行）、注释节点等
children （重点）：仅获得所有元素节点，返回的还是一个伪数组
兄弟关系查找：

下一个兄弟节点：nextElementSibling 属性
上一个兄弟节点: previousElementSibling 属性

增加节点createElement、appendChild/insertBefore、克隆节点cloneNode()

1.创建元素节点：即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
2.追加节点appendChild、insertBefore

要想在界面看到，还得插入到某个父元素中、插入到父元素的最后一个子元素

克隆节点cloneNode()

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
若为true，则代表克隆时会包含后代节点一起克隆
若为false，则代表克隆时不包含后代节点
默认为false

删除节点removeChild()

在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除(jQuery中可以直接删除remove()，$(this).remove())
如不存在父子关系则删除不成功，删除节点和隐藏节点（display:none）有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点

不能遍历删除，因为删除后索引下标都会变化，所以通过这种找父元素的方法进行删除

时间对象

要先实例化创建一个时间对象并获取时间

获得当前时间
获得指定时间

方法	作用	说明
getFullYear()	获得年份	获取四位年份
getMonth()	获得月份	取值为 0 ~ 11 （这个要加一）
getDate()	获取月份中的每一天	不同月份取值也不相同
getDay()	获取星期	取值为 0 ~ 6
getHours()	获取小时	取值为 0 ~ 23
getMinutes()	获取分钟	取值为 0 ~ 59
getSeconds()	获取秒	取值为 0 ~ 59

时间例子YYYY-MM-DD HH:mm形式

时间戳（倒计时常用）

是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式，重点记住 +new Date() 因为可以返回当前时间戳或者指定的时间戳

先实例化再使用 getTime() 方法
简写 +new Date()
可以返回指定时间的时间戳
使用 Date().now()
无需实例化，但是只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳

通过时间戳得到是毫秒，需要转换为秒在计算
转换公式：
d = parseInt(总秒数/ 60/60 /24); // 计算天数
h = parseInt(总秒数/ 60/60 %24) // 计算小时
m = parseInt(总秒数 /60 %60 ); // 计算分数
s = parseInt(总秒数%60); // 计算当前秒数

注意，可能会停顿一下再开始，应该封装成函数，先调用一下函数再进行定时器的高阶回调

补充技巧1：利用时间对象将时间动态化 new Date().toLocaleString()

补充技巧2：先删再加

重绘和回流(面试）

回流(重排) ：当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为回流。
重绘：由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、outline等), 称为重绘。
重绘不一定引起回流，而回流一定会引起重绘

事件对象

事件对象是什么
也是个对象，这个对象里有事件触发时的相关信息
例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
如何获取
在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event、ev、e

常用属性

type：获取当前的事件类型
clientX/clientY：获取光标相对于浏览器可见窗口左上角的位置（仅限可视窗口的可点的的坐标）
pageX/pageY：获取光标相对于浏览器可见窗口左上角的位置（整个页面的坐标包括滚动、调试界面）
offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置
key：用户按下的键盘键的值，现在不提倡使用keyCode

案例1——天使图片随鼠标移动
分析：
①：鼠标在页面中移动，用到 mousemove 事件
②：不断把鼠标在页面中的坐标位置给图片left和top值即可

案例2——按回车发送微博文本

回忆上面：keydown 键盘按下触发（包括按的什么键：回车Enter、删除Delete、空格Space等等,删除返回Backspace，属性e.key区分）

注意这里是弹起，如果是keydown

事件流

事件流指的是事件完整执行过程中的流动路径。假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段，简单来说：捕获阶段是从父到子，冒泡阶段是从子到父。

事件冒泡:当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发,即会依次向上调用所有父级元素的同名事件,事件冒泡是默认存在的。
事件捕获：从DOM的根元素开始去执行对应的事件 (从外到里)，事件捕获需要写对应代码才能看到效果。

以前老的那种就没有捕获：
addEventListener实际上第三个参数就是捕获

addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）
若传入false代表冒泡阶段触发，默认就是false
若是用 L0 事件监听，则只有冒泡阶段，没有捕获

阻止事件流动stopPropagation()（阻止冒泡）

因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素,若想把事件就限制在当前元素内，就需要阻止事件流动。

阻止事件流动需要拿到事件对象（阻止谁传播），此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效。

阻止默认行为（比如a标签的跳转）

事件委托

jQuery中的事件委托

事件委托：是利用事件流的特征解决一些开发需求的知识技巧，不可能给每一个子元素绑定事件（例如删除列表操作）
事件委托是委托给了谁？父元素
如何找到真正触发的元素？e.target 事件对象.target

优点：给父级元素加事件（可以提高性能）
原理：事件委托其实是利用事件冒泡的特点，给父元素添加事件，子元素可以触发
实现：事件对象.target 可以获得真正触发事件的元素（再.tagName是大写的标签）渲染时候给a标签增加id属性，删除时splice可以好删。

数据委托案例——给表格删除一行的数据

其余补充

transition: all 0.6s; /* css过渡效果 * /
this.parentNode.style.visibility = ‘hidden’ /* 保留位置的隐藏*/
this.parentNode.style.display = ‘none’ /* 不保留位置的隐藏 /
str.trim() / * 去掉字符串前后的空格，中间的保留/

3.3.1JavaScript网页编程——WebAPI（JS之DOM基础篇，含事件）相关推荐

Three.js(2)---＞基础篇-Helpers(辅助对象/辅助线)
在Three.js中有许多的Helper(辅助对象)用来帮助我们的开发. 本篇例举几个常见的,方便理解.以及一些效果文章目录前言一.AxesHelper 二.BoxHelper 三.Box3He ...
Node.js后端开发 - 基础篇 #18 nodemon工具
文章目录前言 nodemon工具简单介绍 nodemon工具安装 nodemon工具使用(node app.nodemon app) nodemon工具使用(npm run start) 前言上篇 ...
前端开发工程师 - 03.DOM编程艺术 - 第1章.基础篇(下)
第1章.基础篇(下) Abstract: 数据通信.数据存储.动画.音频与视频.canvas.BOM.表单操作.列表操作数据通信(HTTP协议) HTTP事务: 客户端向服务器端发送HTTP请求报文 ...
js基础3 dom基础/绑定获取事件/图片切换练习/文档加载/全选全不选/dom的其他属性/dom的增加/添加删除练习
dom基础 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8 ...
Three.js着色器基础【含源码】
着色器(Shader)是在 GPU 上运行的程序.它们被称为着色器的原因是,最初它们只处理3D对象的着色,但后来扩展到了3D对象之外.它们需要与传统编程不同的思维方式,因为程序是针对每个顶点或像素并行 ...
3.3.3JavaScript网页编程——WebAPI（JS之BOM含正则）
目录 BOM window对象定时器-延时函数setTimeout JS执行机制(执行栈.任务队列)面试要问 location对象 location.href (获取完整url或者赋值) locat ...
网页编程，JS模态窗口，子页面向父页面传递值
题目:在父页面中,点击"编辑"链接,跳至子页面中进行编辑,编辑完成后点击"确定",子页面关闭,将编辑内容回传至父页面. 原理:在父页面中,点击"编辑& ...
JavaScript 网页编程（一）——JavaScript 基础语法
目录一.计算机编程基础二.初识 JavaScript 三.JavaScript 变量四.JavaScript 数据类型五.标识符.关键字.保留字六.JavaScript 运算符(操作符) 七 ...
JS服务器端开发基础篇（Array.slice方法和splice方法）
Array.slice方法和splice方法在众多的JS数组中属于比较复杂的一个方法,而且容易记混.搜索网络上很多资料都没有发现系统的总结.特别归纳如下,不完全处还希望各位批评指正. 一.slice ...

3.3.1JavaScript网页编程——WebAPI（JS之DOM基础篇，含事件）

目录