DOM入门（一）

1、DOM树是什么

 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树

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

2、获取DOM对象

1.1 选择匹配的第一个元素

1.2 选择匹配的多个元素

 得到的是一个伪数组：

•  有长度有索引号的数组
•  但是没有 pop() push() 等数组方法
• 想要得到里面的每一个对象，则需要遍历（for）的方式获得

1. 获取一个DOM元素我们使用谁？

• querySelector()

2. 获取多个DOM元素我们使用谁？

•  querySelectorAll()

3. querySelector() 方法能直接操作修改吗？

•  可以

4. querySelectorAll() 方法能直接修改吗？ 如果不能可以怎么做到修改？

•  不可以， 只能通过遍历的方式一次给里面的元素做修改

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

3. 他们两者小括号里面的参数有神马注意事项？

•  里面写css选择器
•  必须是字符串，也就是必须加引号

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

 document.write()

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

   元素innerText 属性

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

    元素.innerHTML 属性

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

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

 还可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片

 最常见的属性比如： href、title、src 等

1. 设置/修改元素样式属性通过  style  属性引出来？

2. 如果需要修改一个div盒子的样式，比如 padding-left, 如何写？

         element.style.paddingLeft = ‘300px’

 小驼峰命名法

3. 因为我们是样式属性，一定别忘记，大部分数字后面都需要加单位

2. 设置/修改元素 样式 属性

1. 使用 className 有什么好处？

•  可以同时修改多个样式

2. 使用 className 有什么注意事项？

•  直接使用 className 赋值会覆盖以前的类名

为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名  

1. 使用 className 和classList的区别？

•  修改大量样式的更方便
•  修改不多样式的时候方便
•  classList 是追加和删除不影响以前类

5、定时器-间歇函数（setinterval）

1. 开启定时器

•   作用：每隔一段时间调用这个函数
•  间隔时间单位是毫秒

 2. 关闭定时器

6、 事件监听

 什么是事件？

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

 什么是事件监听？

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

事件监听三要素：

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

1. 什么是事件？

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

2. 什么是事件监听？

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

3. 事件监听三要素是什么？

•  事件源 (谁被触发了)
•  事件 (用什么方式触发，点击还是鼠标经过等)
•  事件处理程序 （要做什么事情）

淘宝点击关闭二维码

需求：点击关闭之后，淘宝二维码关闭

案例

分析：

①：点击的是关闭按钮

②：关闭的是父盒子

核心：利用样式的显示和隐藏完成， display:none 隐藏元素 display:block 显示元素

3. 事件类型

1. 高阶函数

• 高阶函数可以被简单理解为函数的高级应用，JavaScript 中函数可以被当成【值】来对待，基于这个特性实现函数的高级应用。
• 【值】就是 JavaScript 中的数据，如数值、字符串、布尔、对象等。
• 如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数
• 简单理解： 当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数

1. 函数表达式

•  函数也是【数据】
•  把函数赋值给变量

2. 回调函数

•  把函数当做另外一个函数的参数传递，这个函数就叫回调函数
•  回调函数本质还是函数，只不过把它当成参数使用
•  使用匿名函数做为回调函数比较常见

3. 环境对象

• 环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境
• 作用：弄清楚this的指向，可以让我们代码更简洁
•  函数的调用方式不同，this 指代的对象也不同
•  【谁调用， this 就是谁】 是判断 this 指向的粗略规则
•  直接调用函数，其实相当于是 window.函数，所以 this 指代 window

4. 编程思想

排他思想

        当前元素为A状态,其他元素为B状态

使用：

1. 干掉所有人

        使用for循环

2. 复活他自己

        通过this或者下标找到自己或者对应的元素