教程地址：https://www.bilibili.com/video/BV1k4411w7sV

中文文档：https://developer.mozilla.org/zh-CN/docs/Web/API

素材源码：https://gitee.com/xiaoqiang001/jsapis_material/tree/master

在这里插入图片描述

一、DOM（文档对象模型）

在这里插入图片描述

1.选择器

ID选择器 getElementById()

在这里插入图片描述

标签选择器 getElementsByTagName()

在这里插入图片描述

类选择器

querySelector()可以选任意标签 id 类

在这里插入图片描述

2.事件

 btn.onclick = function () {
    
    	//function (不能写参数)
     
 }

在这里插入图片描述

innerText与innerHTML

在这里插入图片描述

this

在这里插入图片描述

排他思想

常用于轮播图

在这里插入图片描述

换背景色

在这里插入图片描述

表单全选与取消

在这里插入图片描述

自定义属性

在这里插入图片描述

Tab栏切换

https://www.bilibili.com/video/BV1k4411w7sV?p=33

H5自定义属性

在这里插入图片描述

3.节点操作

在这里插入图片描述

父节点&子节点

parentNode 不是parent

在这里插入图片描述

常用
在这里插入图片描述

在这里插入图片描述

兄弟节点

在这里插入图片描述

常用

在这里插入图片描述

创建&添加节点

在这里插入图片描述

删除节点

在这里插入图片描述

复制节点

在这里插入图片描述

动态创建元素

在这里插入图片描述

4.DOM操作事件

在这里插入图片描述

绑定事件

在这里插入图片描述

解绑事件

在这里插入图片描述

事件流&事件捕获、冒泡

在这里插入图片描述

事件对象（重要）

在这里插入图片描述

e.target与this的区别（重要）

谁调用，this就指向谁
谁触发，e.target就指向谁

e.currentTarget与this功能相同，但ie 6 7 8 不兼容，一般不用

在这里插入图片描述

阻止默认行为

在这里插入图片描述

阻止冒泡

在这里插入图片描述

事件委托

利用事件冒泡
在这里插入图片描述

在这里插入图片描述

鼠标事件

在这里插入图片描述

键盘事件

一般常用onkeyup

在这里插入图片描述

二、BOM （浏览器对象模型）

在这里插入图片描述

1.窗口加载事件 onload

在这里插入图片描述

2.窗口大小调整事件 resize

在这里插入图片描述

3.定时器

setTimeout()

在这里插入图片描述

clearTimeout()

在这里插入图片描述

setInterval()

在这里插入图片描述

clearInterval()

在这里插入图片描述

4.同步与异步

以前

在这里插入图片描述

现在

在这里插入图片描述

执行机制（高级）

在这里插入图片描述

5.location对象

在这里插入图片描述

6.navigator对象

在这里插入图片描述

7.history对象

在这里插入图片描述

三、电脑端网页特效（待定）

四、手机端网页特效（待定）

五、本地存储（重要）

在这里插入图片描述

sessionStorage

在这里插入图片描述

localStorage

在这里插入图片描述

js 视频笔记（DOM BOM）

一、DOM（文档对象模型）

1.选择器

ID选择器 getElementById()

标签选择器 getElementsByTagName()

类选择器

2.事件

innerText与innerHTML

this

排他思想

换背景色

表单全选与取消

自定义属性

Tab栏切换

H5自定义属性

3.节点操作

父节点&子节点

兄弟节点

创建&添加节点

删除节点

复制节点

动态创建元素

4.DOM操作事件

绑定事件

解绑事件

事件流&事件捕获、冒泡

事件对象（重要）

e.target与this的区别（重要）

阻止默认行为

阻止冒泡

事件委托

鼠标事件

键盘事件

二、BOM （浏览器对象模型）

1.窗口加载事件 onload

2.窗口大小调整事件 resize

3.定时器

setTimeout()

clearTimeout()

setInterval()

clearInterval()

4.同步与异步

执行机制（高级）

5.location对象

6.navigator对象

7.history对象

三、电脑端网页特效（待定）

四、手机端网页特效（待定）

五、本地存储（重要）

sessionStorage

localStorage

猜你喜欢