2017-09-09更新

DOM

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

DOM重要数据类型

Document对象

继承自Node和EventTarget
继承自HTMLDocument接口
参见Document

window对象表示浏览器中的内容

DOM创建

DOM节点（Node）通常对应于一个标签，一个文本，或者一个HTML属性。DOM节点有一个nodeType属性用来表示当前元素的类型，它是一个整数:

1. Element，元素
2. Attribute，属性
3. Text，文本
   DOM节点创建最常用的便是document.createElement和document.createTextNode方法：

1
2
3

var el1 = document.createElement('div');
var el2 = document.createElement('input');
var node = document.createTextNode('hello world!');

DOM查询

元素查询的API返回的的结果是DOM节点或者DOM节点的列表。
document提供了两种Query方法。

1
2
3
4
5
6
7
8
9

// 返回当前文档中第一个类名为 "myclass" 的元素
var el = document.querySelector(".myclass");
// 返回一个文档中所有的class为"note"或者 "alert"的div元素
var els = document.querySelectorAll("div.note, div.alert");

// 获取元素
var el = document.getElementById('xxx');
var els = document.getElementsByClassName('highlight');
var els = document.getElementsByTagName('td');

Element也提供了很多相对于元素的DOM导航方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// 获取父元素、父节点
var parent = ele.parentElement;
var parent = ele.parentNode;

// 获取子节点，子节点可以是任何一种节点，可以通过nodeType来判断
var nodes = ele.children;    

// 查询子元素
var els = ele.getElementsByTagName('td');
var els = ele.getElementsByClassName('highlight');

// 当前元素的第一个/最后一个子元素节点
var el = ele.firstElementChild;
var el = ele.lastElementChild;

// 下一个/上一个兄弟元素节点
var el = ele.nextElementSibling;
var el = ele.previousElementSibling;

DOM更改

1
2
3
4
5
6
7
8
9

// 添加、删除子元素
ele.appendChild(el);
ele.removeChild(el);

// 替换子元素
ele.replaceChild(el1, el2);

// 插入子元素
parentElement.insertBefore(newElement, referenceElement);

属性操作

1
2
3
4
5
6
7
8
9
10
11
12
13

// 获取一个{name, value}的数组
var attrs = el.attributes;

// 获取、设置属性
var c = el.getAttribute('class');
el.setAttribute('class', 'highlight');

// 判断、移除属性
el.hasAttribute('class');
el.removeAttribute('class');

// 是否有属性设置
el.hasAttributes();

Node.innerText

Node.innerText 是一个表示一个节点及其后代的“渲染”文本内容的属性。

作为一个获取器，如果用光标突出显示元素的内容，然后将其复制到剪贴板，则它将近似于用户将获得的文本。此功能最初由Internet Explorer引入，并在所有主要浏览器供应商采用后于2016年在HTML标准中正式规定。

Node.textContent是一个有点类似的替代方案，虽然两者之间有重要的区别。

element.innerHTML

Element.innerHTML属性设置或获取描述元素后代的HTML语句。

Note: 如果一个<div>,<span>, 或 <noembed>节点具有一个文本子节点,包含字符(&),(<), 或(>), innerHTML将这些字符分别返回为＆amp;, ＆lt;和＆gt;。使用Node.textContent获取一个这些文本节点内容的正确副本。

参考文献

• 原生JavaScript的DOM操作汇总
• DOM概述

JavaScript 中包含以下 7 个全局函数

escape( )、eval( )、isFinite( )、isNaN( )、parseFloat( )、parseInt( )、unescape( )。

JavaScript为指定元素绑定一个事件处理器函数

Javascript块内声明函数

不要在块内声明一个函数（严格模式会报语法错误）。如果确实需要在块中定义函数，可以使用函数表达式来声明函数。

1
2
3
4
5
6
7
8
9
10
/* Recommended */
if (x) {
	var foo = function() {};
}


/* Wrong */
if (x) {
	function foo() {}
}

2017-09-01 添加this对象分析

一、执行环境和作用域

执行环境(execution context)定义了函数或变量有权访问的其他数据，决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象(variable object)，环境中定义的所有变量和函数都保存在这个对象中。全局执行环境是最外围的一个执行环境。某个执行环境的所有代码执行完毕后，该环境销毁，保存在其中的所有变量和函数定义也随之销毁。（全局执行环境直到应用程序退出才会销毁）每个函数都有自己的执行环境。当执行流程进入一个函数时，函数的环境就会被推入一个环境栈中，在函数执行之后，栈将其环境弹出，把控制权返回给之前的执行环境。

当代码在一个环境中执行时，会创建变量对象的一个作用域链(scope chain)。作用域的用途是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端始终是当前执行的代码所在的环境的变量对象。如果这个环境是函数，则将其活动对象(activation object)作为变量对象。活动对象最开始只包含一个变量，即arguments对象(这个对象在全局环境中不存在的)，作用域链中的下一个对象来自包含(外部)环境，一直延续到全局执行环境。全局执行环境的变量对象始终都是作用域链的最后一个对象。

标识符解析是沿着作用域链一级一级地搜索标识符的过程。搜索过程中始终从作用域链的前端开始。搜索过程始终从作用域链的前端开始然后逐级地向后回溯，知道找到标识符为止（若找不到，通常会导致错误发生）

js没有块级作用域，但是在es6中新增let关键字可定义块级变量。

二、函数

定义

函数声明

1
2
3

function sum(num1,num2){
    return num1 + num2;
}

函数表达式

1
2
3

var sum = function(num1,num2){
    return num1 + num2;
}

解析器会率先读取函数声明，并使其在执行任何代码之前可用(可以访问)；
函数表达式则必须等到解析器执行到它所在的代码行，才会真正被解析执行。
在代码开始之前，解析器就已通过一个名为函数声明提升(function declaration hoisting)的过程，将函数声明添加到执行环境中。对代码求值时，Javascript引擎在第一遍会声明函数并将他们放到源代码树的顶部。所以，即使声明函数的代码在调用它的代码后面，Javascript引擎也能把函数声明提升到顶部。

Function构造函数

1
2

//接收任意数量参数，最后一个参数始终被看做函数体
var sum = new Function('num1','num2','return num1 + num2');//不推荐

函数是对象，函数名是指针

没有重载

同名函数后一个函数会覆盖前一个函数，不会发生函数重载

2017-09-23更新 添加HTTP状态码,HTTPS

HTTP

HTTP协议在TCP/IP协议栈的位置如下图所示：

由于HTTP报文是面向文本的，因此报文中的每一个字段都是一些ASCII码串，但各个字段的长度是不确定的。

暂封

2017-09-12更新

Generator函数

从语法上看，可以把它理解成状态机，封装了多种内部状态。
执行Generator函数会返回一个遍历器对象，代表Generator函数的内部指针。也就是说Generator除了是状态机还是一个遍历器对象生成器。返回遍历器对象，可以依次遍历Generator函数内部的每一个状态。

特征

1. function和函数名之间有*号；
2. 函数体内部用yield语句定义不同的内部状态。

调用

和普通函数调用一样。但是函数并不执行，必须调用next方法,使得指针移向下一个状态，直到下一个yield语句或return语句。Generator函数是分段执行的，yield语句是暂停执行的标记，next方法会恢复执行。
next方法返回对象为{value: value; done: boolean},value为yield语句的值，即内部状态的值，done属性表示遍历是否结束。
yield语句不能用在普通函中，否则会报错。
yield语句本身没有返回值，或者说为undefined，next方法可以带一个参数，这个参数会被当作上一条yield语句的返回值。但是引擎忽略next方法时的参数，只有第二次使用next方法带参数才是有效的。从语义上讲，第一次next方法用来启动遍历器对象。
for……of自动遍历Generator函数，无需使用next方法。

方法

Generator.prototype.return() 返回给定的值，并终结Generator函数的遍历

yield* 方法

在一个Generator函数中调用另一个Generator函数，默认是没有效果的。
而yield*语句可以用来在一个Generator函数中调用另一个Generator函数

2017-09-21更新

Jquery实现Ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//测试Jquery的Ajax请求
var testAjax = $('#test-ajax');
testAjax.click(function (event) {
    $.ajax({
        method: 'POST',
        url: '/about',
        cache: false,
        success: function (res) {
            alert('使用jquery发送ajax请求成功，返回为：' + res);
        },
        error: function (res) {
            alert('ajax出错');
        }
    });
});

原生Javascript实现Ajax

xhr对象创建

首先检测原生XHR对象是否存在，如果存在则返回它的新实例。如果原生对象不存在，则检测ActiveX对象。如果这两种对象都不存在，就抛出一个错误。

1
2

//IE5、IE6使用ActiveXObject建立xhr对象
var xhr = new ActiveXObject("Microsoft.XMLHTTP");

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function createXHR(){
    if(typeof XMLHttpRequest != 'undefined'){
        return new XMLHttpRequest();
    }else if(typeof argument.callee.activeXString != 'string'){
        var versions = ['MXSML2.XMLHTTP','MXSML2.XMLHttp.3.0','MXSML2.XMLHttp.6.0'];
        var i len;
        for(i = 0;len=versions.length;i<len;i++){
            try{
                new ActiveXObject(versions[i]);
                argument.callee.activeXString = versions[i];
            }catch{
                <!-- 跳过 -->
            }
        }
        return new ActiveXObject(argument.callee.activeXString);
    }else{
        throw new Error("没有XHR对象存在");
    }
}

xhr用法

先上代码：

1
2
3
4
5
6
7
8
9
10
11
12
13

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if(this.readyState == 4){
        if((this.status >= 200 && this.status < 300) || this.status == 304){
            //处理response
        }else{
            //处理error
        }

    }
}
xhr.open('get','/xhr',true);
xhr.send();

发送数据

在使用XHR对象时，要调用的第一个方法是open()，open(get/post,url,false/true)
它接受3个参数：

1. 请求类型:最常用的就是get和post
2. 请求路径：就是要请求的操作的文件的url
3. 是否异步发送的布尔值

xhr.open('get','/xhr',true);,url相对于执行代码的当前页面（当然也可以使用绝对路径）,调用open()方法并不会真正发送请求，而只是启动一个请求以备发送

要发送特定的请求,必须调用send()方法: xhr.send();，send()方法接收一个参数，即要作为请求主体发送的数据。

异步处理

发送异步请求，才能让JavaScript 继续执行而不必等待响应。此时，可以检测 XHR 对象的 readyState 属性，该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下：

• 0：未初始化。尚未调用open()方法。
• 1：启动。已经调用open()方法，但尚未调用send()方法。
• 2：发送。已经调用send()方法，但尚未接收到响应。
• 3：接收。已经接收到部分响应数据。
• 4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

只要readyState属性的值由一个值变成另一个值，都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。通常我们只对readyState值为4的阶段感兴趣，因为这时所有数据都已经就绪。但必须在调用open()之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性。

在接收到响应之前还可以调用abort()方法来取消异步请求,xhr.abort();

响应处理

在收到响应后，响应的数据会自动填充XHR对象的属性，相关的属性如下：
responseText：作为响应主体被返回的文本。
responseXML：如果响应的内容类型是”text/xml”或”application/xml”，这个属性中将保存包含着响应数据的XML DOM文档。
status：响应的HTTP状态。
statusText：HTTP状态的说明

XMLHttpRequest 2级

XMLHttpRequest2级使用方法，无需检查readyState状态

1
2
3
4
5
6
7
8
9
10
11

//XMLHttpRequest2级使用方法 无需检查readyState状态
var xhr = new XMLHttpRequest();
xhr.onload = function(){
    if((this.status >= 200 && this.status < 300) || this.status == 304>){
        //处理response
    }else{
        //处理error
    }
}
xhr.open('get','/xhr',true);
xhr.send();

于2017.7.1读完，于2017.8.5建立读书笔记
暂封

于2017.7.22读完，于2017.8.5建读书笔记
暂封

更新