前端学习 9 dom操作和事件

### BOM

#### 操作浏览器的方法

- 浏览器窗口的尺寸（包含滚动条的）

  + innerWidth

  + innerHeight

- 浏览器的地址栏操作

  + location

    + href

      + location.href

    + reload() 刷新

- 浏览器的历史记录

  + history

    + back()

    + forward()

    + go(n)

- 浏览器的信息

  + navigator

    + userAgent

    + appName

    + appVersion

    + platform

- 浏览器的常见事件

  + onload

  + onscroll

  + onresize

    + 窗口改变的事件

- 获取浏览器卷去的高度和宽度

  + docuemnt.documentELement.scrollTop || document.body.scrollTop

  + docuemnt.documentElement.scrollLeft || document.body.scrooLeft

- window.open()

  + 打开一个新的窗口开启页面

- window.close()

  + 关闭当前页面

### 元素

#### 元素的属性操作

标签的属性:  属性名=属性值

- 标签属性的分类

  - 1. 原生属性

    - 在W3C规范中定义好的属性名

    - 比如: id,class,style, 表单标签中 value,name,checked

  - 2. 自定义属性

    - 我们自己写到标签上的属性

    - 比如: 页面中div的index属性

  - 3. H5自定义属性

    - 目的: 为了规范自定义属性的写法

    - 在标签的H5自定义属性:  data-属性名 = 属性值

元素的属性操作

- 1. 原生属性的操作  直接通过点语法操作

  - 获取属性值: 元素.属性名

  - 设置属性: 元素.属性名 = 值

- 2. 自定义属性属性的操作

  - 获取: 元素.getAttribute('属性名')

  - 设置修改: 元素.setAttribute('属性名','值')

  - 移除: 元素.removeAttribute(属性名)

- 3. H5自定义属性操作

  - 每一个标签元素都有一个dataset属性

  - 这个属性的值是一个对象,此对象可以操作这个标签的所有H5自定义属性

  - 元素.dataset会得到一个操作标签H5自定义属性的对象

    + 获取: 元素.dataset.属性名

    + 设置: 元素.dataset.属性名 = 值

    + 移除: delete 元素.dataset.属性名

#### 元素的样式操作

1. 获取行内样式

  - 语法: 元素.style.样式名

2. 获取行内非行内样式(行内,非行内都可以获取)

  - 语法1: window.getComputedStyle(元素).样式名   低版本ie不能使用  

  - 语法2: 元素.currentStyle.样式名    只能在低版本ie中使用(只能获取非行内)

  - 兼容写法(能力测试兼容写法)

  ```js

  if(window.getComputedStyle){

     var res = window.getComputedStyle(div).width

   }else{

     var res = div.currentStyle.width

   }

   console.log( res )

  ```

3. 设置样式(只能设置行内样式)  

  - 语法: 元素.style.样式名 = 样式值

  - 注意: 如果是多个单词组成的样式名,

    1. 在js中使用驼峰写法    backgroundColor

    2. 使用数组关联法中字符串表示 ['background-color']

#### 元素的类名操作

- 目的: 为了可以批量的操作元素的样式

- 1. className

  - 语法: 元素.className

  - 本质上就是元素的原有属性操作

  - 因为class是js中的关键字,所以改为className使用

- 2. classList

  - 元素.classList返回一个可以操作元素所有类名的 伪数组的集合

  - 这个集合对象有操作类名的方法

  - add(类名)  添加类名

  - remove(类名) 移除类名

  - toggle(类名) 类名切换

  + 如果存在则移除,不存在则添加

### DOM

#### 操作文档的方法

- 获取页面中的元素

  + getElementById()

  + getElementsByTagName()

  + getElementsByClassName()

  + querySelector()

  + querySelectorAll()

- 一些特殊标签的获取

  + document.body

  + document.head

  + document.title

  + document.documentELement  

    + 获取html标签

- 操作 DOM 元素的属性

  + innerHTML

  + innerText

  + value    表单标签

  + style

  + className

  + id

  + getAttribute()

  + setAttribute()

  + removeAttribute()

- 获取 DOM 元素节点的方法

  + childNodes

  + children

  + firstChild

  + firstELementChild

  + lastChild

  + lastElementChild

  + previousSibling

  + previousElementSibling

  + nextSibling

  + nextElementSibling

  + parentNode

  + parentElement

  + attributes

- DOM 节点的属性

  + 元素节点

    + nodeType === 1

    + nodeName === 大写标签名

    + nodeValue === null

  + 属性节点

    + nodeType === 2

    + nodeName === 属性名

    + nodeValue === 属性值

  + 文本节点

    + nodeType === 3

    + nodeName === #text

    + nodeValue === 文本内容

  + 注释节点

    + nodeType === 8

    + nodeName === #comment

    + nodeValue === 注释内容

#### 创建节点 DOM 元素

  + createELement()

  + createTextNode()

#### 插入节点 DOM 元素  

  + appendChild()

  + insertBefore()

#### 删除节点 DOM 元素  

  + removeChild()

  + remove

#### 替换节点 DOM 元素

  + replaceChild()

#### 克隆节点 DOM 元素

  + cloneNode()

    + 参数是 false 的时候只克隆自己

    + 参数是 true 的时候连带所有后代元素全部克隆

#### 获取非行内样式

  + window.getComputedStyle().样式   IE 9 以上版本使用

    + 第二个参数默认是 null

    + 可以传递 `after` || `before`，用于获取伪元素的样式

  + currentStyle    IE 8 及一下使用

### 元素操作

#### 元素的尺寸问题

  + clientWidth || clientHeight

    + 内容 + padiing

  + offsetWidth || offsetHeight

    + 内容 + padding + border

#### 获取元素偏移量

  + offseParent 获取元素的定位父级

  + offsetLeft || offsetTop

    + 没有定位的时候根据结构父级来计算偏移量

    + 有定位的时候根据定位父级来计算偏移量

  + 元素.clientLeft 获取元素左边框的宽度

  + 元素.clientTop 获取元素上边框的宽度

###  浏览器可视窗口的尺寸

  +  在BOM中获取浏览器可视窗口的尺寸   包含滚动条

    +  window.innerWidth   获取窗口的宽度

    +  window.innerHeight  获取窗口的高度

  +  在DOM中获取浏览器可视窗口的尺寸  不包含滚动条

    +  document.documentElement.clientWidth

    +  document.documentElement.clientHeight

### 事件三个组成部分

  + 事件源： 绑定在谁身上的事件

  + 事件类型： 什么事件

  + 事件处理函数： 触发事件的时候做什么

### 事件对象

  + 浏览器给我们提供的一个 黑盒子

  + 存储着一些事件的信息

  + `e = e || window.event`

### 事件对象里面有三组坐标点

  + clientX || clientY   相对于浏览器窗口

  + offsetX || offsetY   相对于元素

  + pageX || pageY   相对于页面

### 常见的事件

#### 鼠标事件

    + click       鼠标左键单击

    + dblclick    鼠标左键双击

    + mousemove   鼠标移动事件

    + mouseenter  鼠标移入事件

    + mouseout    鼠标移出事件

    + mousedown   鼠标按下事件

    + mouseup     鼠标松开事件

    + contextmenu 鼠标右键点击事件

#### 键盘事件

    + keydown    键盘按下  

    + keypress   键盘按下 键盘中的系统功能按键不能触发keypress事件

    + keyup      键盘抬起

#### 浏览器事件

    + load--------页面加载事件,当页面中所有的资源都加载完毕之后会触发的事件

    + scroll------页面滚动事件,当页面中的滚动条滚动的时候触发

    + resize------页面窗口变化,当可视窗口大小发生变化的时候触发

#### 表单事件

    + input      输入事件

    + change     内容改变事件(内容改变,并且失去焦点的时候触发)

      + 一遍表单的  内容输入框不会使用change事件

        + 表单的select和文件上传的时候会使用

    + focus  

    + blur

#### 触摸事件

    + touchstart   触摸开始的时候触发

    + touchmove    触摸移动的时候触发

    + touchend     触摸结束的时候触发

#### 其他事件

    + selectStart  鼠标选中事件

    + visibilitychange  页面选项卡切换 (离开页面事件)

### 键盘事件里面

    + 通过键盘码来确定你按下的是哪一个按键

    + `e.keyCode || e.which`

### 键盘组合事件

    + altKey

    + ctrlKey

    + shiftKey

### 事件的绑定方式

  1. on事件类型 = function () {}

  2. 元素.addEventListener('事件类型', function () {})

  3. 元素.attachEvent('on事件类型',function () {})

### 事件的传播

    + 从准确点击的元素，按照结构父级一直到window的同类型事件都会被触发

### 冒泡捕获和目标

    + 目标： 准确点击的元素

      + 事件对象.target || 事件对象.srcElement

    + 冒泡： 从目标到 window 依次执行同类型事件

    + 捕获： 从 window 到 目标依次执行同类型事件

### 阻止事件传播

    + `e.cancelBubble = true`

    + `e.stopPropagation()`

### 浏览器的默认行为

    + 不需要我们绑定事件，自己就会有行为发生

#### 阻止默认事件

    + `e.preventDefault()`

    + `e.returnValue = false`

    + `return false;`

#### 利用事件冒泡的机制可以做事件委托

    + 把元素的事件绑定给传播路径上的某一个结构父级

    + 在事件里面使用 `e.target` 来判断是不是点击的元素

### 正则

    + 专门用来检测字符串的表达式

    + 是一个引用数据类型

#### 元字符

    + \d

    + \D

    + \s

    + \S      

    + \w

    + \W

    + .   （\n）

#### 限定符

    + *

    + +

    + ?

    + {n}

    + {n,}

    + {n,m}

#### 边界符

    + ^

    + $

#### 标识符

    + 写在正则外边的东西

    + g

    + i

#### 正则的方法

    + test()  匹配

    + exec()  捕获

#### 字符串和正则合作的方法

    + replace()

    + search()

    + match()

    + 在没有标识符的时候，和 exec 一样

    + 如果有标识符 g，就会返回一个数组，里面是字符串中满足要求的所有项

### ES6

    语法进化中的一部分

#### let || const

  + 他们和 var 的却别

    1. 不允许重复声名同一个变量

    2. 不进行预解析，必须先声明后使用

    3. 任意以一个可以书写代码段的 {} 都能显示使用范围

  + 他们两个的区别

    1. let 声名的变量可以改变，const 声名的常量不能改变

    2. let可以以不赋值，const 声名的时候必须赋值，一经赋值不能更改

#### 箭头函数

  + 是对函数表达式的简写

  + **声名式函数不能简写**

- 箭头函数的使用规则

  + 一个参数的时候 () 可以不写

  + 一句话的时候 {} 可以不写，并且会自动 return

- 箭头函数的注意点

  + 箭头函数里面没有 this，箭头函数的 this 在书写的时候就定义好了

  + 箭头函数没有 arguments

- 函数的形参可以给一个默认值

  + `function fn(a = 10) {}`

  + `let fn = (a=10)=>{}`

  + **箭头函数如果要写参数默认值那么必须加 ()**

#### 模板字符串

  + 使用反引号来包裹

  + 和单引号他·双引号字符串的区别

    + 可以换行书写

    + 可以在字符串里面使用 ${  变量  } 的形式直接添加变量

#### 解构赋值

  + {} 解构对象 `let {name:username} = obj`  相当于`let usernmae = obj.name`

  + [] 解构数组  `let [n1,n2,n3,n3] = [1,2,3,4]`

  + 不能混着使用

#### ... 运算符号

  + 直接使用和在实参的位置的时候式展开运算

  + 在形参的位置使用的时候式合并运算

    + let f  = (...arg)=>{}

    + f(1,2,3,4,5,6)

#### this的指向

  + 普通函数      window

  + 事件处理函数   事件源

  + 定时器函数  window

  + 自调用函数  window

  + 对象方法函数  对象

- 改变函数中this的方法

  + call(改变后this的指向,实参列表)

  + apply(改变后this的指向,[实参列表])

  + bind(改变后新函数中this的指向)

### 运动函数

  1. 简单的运动函数

  2. 多属性的运动函数

  3. 多属性一起均匀的运动函数

    之前是通过 当前距离+5  固定值

    (目标距离-当前距离)/10  始终无法到到目标，会有小数的计算

      向左运动  是负数，负数取整，向下取整，

      向右运动，是正数，向上取整

  4. 透明度，通过将透明度放大100倍进行计算，然后再讲最后的结果除100

  5. 运动结束后，通过将定时器id存储在对象中，判断所有定时器结束，才是运动结束

#### 面向对象

  + 是一个开发的思想

  + 当我需要完成一个功能的时候，写一个构造函数，创建对象，让对象完成从功能

#### 构造函数的书写

  + 构造函数的作用创建对象

  + 注意事项：

  1. 首字母大写

  2. 必须要和 new 连用，不和 new 连用的时候没有创造对象的能力

  3. 不传递参数的时候可以不写 ()，建议书写

  4. 建议不要写 return

    如果 return 一个基本数据类型，那么写了白写

    如果 return 一个引用数据类型，那么构造函数白写

#### 构造函数的书写内容

  + 属性都写在构造函数体内

  + 方法都写在构造函数的 prototype 上

- 构造函数中的 this 指向

  + 构造函数体内的 this 指向实例

  + prototype 上的方法中 this 指向实例

- 对象的访问机制

  + 当你访问一个对象的属性的时候

  + 先在自己身上查找，如果自己有直接使用，停止查找

  + 如果没有，就去 `__proto__` 上查找，如果有就拿来使用，停止查找

  + 如果还没有，就再去 `__proto__` 上查找

  + 一直到 Object.prototype 上都没有，那么返回 undefiend

  + 由 `__proto__` 串联起来的对象链状结构就叫做 **原型链**

#### 面向对象编程

  + 写一个构造函数

  + 把需要用到的属性写在构造函数体内

  + 把需要用的方法写在 prototype 上

  + 使用方法去操作属性完成功能

  + new 构造函数