JavaScript笔记整理-02 Web APIs

DOM（Document Object Model 文档对象模型）简介

DOM树

DOM把以上内容看作是对象

获取元素

H5新增获取元素方式

// 都需要加选择器符号
        // querySelector 返回指定选择器的第一个元素对象
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        // querySelectorAll 返回指定选择器的所有元素对象
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);

获取特殊元素

// 获取body元素
        var bodyEle = document.body;
        console.log(bodyEle);
        console.dir(bodyEle);
        // 获取HTML元素
        var htmlEle = document.documentElement;
        console.log(htmlEle);
        console.dir(htmlEle);

事件基础

事件由三部分组成 事件源 事件类型 事件处理程序 称为事件三要素

• 事件源 事件被处罚的对象
• 事件类型 如何触发 什么事件
• 事件处理程序 通过一个函数赋值的方式

执行事件的步骤

1. 获取事件源
2. 注册事件
3. 添加事件处理程序

操作元素

改变元素内容

// 从起始位置到终止位置的内容，但它不识别html标签，同时空格和换行也会去掉。
element.innerText;
// 从起始位置到终止位置的内容，包括html标签，同时保留空格和换行 W3C标准
element.innerHTML;

表单元素的属性操作
利用DOM可以操作如下表单元素的属性
type、value、checked、selected、disabled(禁用)
对于表单元素，如input要操作其中的内容，是通过value来修改的
案例：京东等官网登陆时，点击小眼睛可以看到自己的密码
思路：将input的类型由password转换为text即可，需要多次点击的地方可以设置flag来判断

样式属性操作

element.style	 	行内样式操作
element.className	类名样式操作
//js里面的样式采用驼峰命名法 比如 fontSize、b
ackgroundColor
//js修改style样式操作，产生的时行内样式，CSS权重比较高

H5自定义属性
自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中
自定义属性获取是通过getAttribute(‘属性’)获取，但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性，H5给我们新增了自定义属性：
H5规定自定义属性data-开头作为属性名并且赋值
获取自定义属性除了getAttribute，也可用element.dataset.index或者element.dataset[‘index’];

<div data-index='1'></div>
<script>
	var div = document.querySelector('div');
	//dataset是一个集合里面存放了所有以data开头的自定义属性
	console.log(div.dataset.index);
</script>

节点操作

一般地，节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性

• 元素节点nodeType为1
• 属性节点nodeType为2
• 文本节点nodeType为3（文本节点包括文字、空格、换行等）
  实际开发中，节点操作主要操作的是元素节点
  

p245对节点进行了总结
p246开始进行高级事件的讲解

注册事件（绑定事件）

注册事件描述

给元素添加事件，成为注册事件或者绑定事件。
注册事件又两种方式：传统方式和方法监听注册方式

addEventListener 事件监听方式
该方法接收三个参数：

• type：事件类型字符串，比如click、mouseover，注意这里不要带on
• listener：事件处理函数，事件发生时，会调用该监听函数
• useCapture：可选参数，是一个布尔值，默认是false

attachEvent

p250讲了事件流的三个阶段251通过代码演示来了解

e.target点击那个元素，返回那个元素
this那个元素绑定了这个点击事件，返回那个元素


事件委托
原理：不是每个子节点单数设置事件监听器，二十事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
作用：只操作了一次DOM，提高了程序性能
例子：点击li，冒泡到ul的点击事件，e.target可以获得鼠标点击的对象，然后进行以下操作

BOM（Browser Object Model 浏览器对象模型）概述

提供了独立于内容而与浏览器窗口进行交互的对象，核心对象是window

BOM比DOM更大
window对象是浏览器的顶级对象


定时器





setTimeout()只调用一次
setInterval()调用多次

this指向问题

1. 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
2. 方法调用中谁调用this指向谁
3. 构造函数中this指向构造函数的实例

JS执行机制

JS是单线程


本质区别是，流水线上执行的顺序不同

URL

location对象的属性

navigator对象

history对象

offset偏移量

offset与style的区别

client

立即执行函数：不需要调用，立马能够自己执行

		(function() {})();
        // 或者
        (function(){}());
        // 也可以传递参数
        (function (a,b) {
            console.log(a+b);
        })(1,5);// 第二个小括号可以看作是调用函数
        (function sum(a,b){
            console.log(a+b);
        }(2,6));
        // 立即执行函数最大的作用就是独立创建了一个作用域，里面所有的变量都是局部变量，不会有命名冲突

dpr 物理像素比

var dpr = window.devicePixelRatio || 1;

scroll

移动端

移动端常用插件
quickclick
swiper
superslide
iscroll
zy.media.js

插件使用总结

移动端常用开发框架

p354本地存储

这部分从p408开始

子类在构造函数中使用super，必须放到this前面（必须先调用父类的构造方法，再使用子类构造方法）

ES6中的类和对象

三个注意点：

1. ES6中类没有变量提升，所以必须先定义类，才能通过类实例化对象
2. 类里面的共有属性和方法一定要加this使用
3. 类里面的this指向问题
4. constructor里面的this指向的是创建的示例对象，方法里面的this指向这个方法的调用者