节点的访问关系都是属性。节点的操作都是函数或者方法。

创建节点

• 新的标签（节点） = document.createElement("标签名");
• document.write();
• 直接利用元素的innerHTNL方法。（innerText方法不识别标签）

插入节点（使用节点）

• 使用方法： 父节点.appendChild();
  父节点.appendChild(新节点); 父节点的最后插入一个新节点

• 使用方法：父节点.insertBefore(要插入的节点，参考节点)；
  父节点.insertBefore(新节点,参考节点)在参考节点前插入;
  如果参考节点为null，那么他将在节点最后插入一个节点。

  删除节点

  用法：用父节点删除子节点。
  父节点.removeChild（子节点）;必须制定要删除的子节点
  节点自己删除自己：
  不知道父级的情况下，可以这么写：node.parentNode.removeChild(node)。

  复制节点

  用法：oldNode.cloneNode（true）。
  注意：想要复制的节点调用这个函数cloneNode()，得到一个新节点。 方法内部可以传参，入股是true，深层复制，如果是false，只复制节点本身。
  新节点=要复制的节点.cloneNode(参数) ;
  注意：

• 参数可选复制节点

• 用于复制节点， 接受一个布尔值参数， true 表示深复制（复制节点及其所有子节点）， false 表示浅复制（复制节点本身，不复制子节点）

  节点属性（节点.属性）

  获取：getAttribute(名称)
  设置：setAttribute(名称, 值)
  删除：removeAttribute(名称)
  注意：

• IE6、7不支持。
• 调用者：节点。
• 有参数,但是没有返回值。
• 每一个方法意义不同。

附录：DOM元素

• DOM就是html文档的模型抽象。数据以树的形式在内存中排列。
• 节点就是DOM的组成。是一个对象，有属性和方法。获取方式有很多种。
• 节点分为元素节点（标签），文本节点，属性节点。
  区分方法：nodeType: 1是标签,2是属性,3是文本

节点的访问关系，是以属性的方式存在的。
DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问。

父节点 （ parentNode ）

调用者就是节点。一个节点只有一个父节点。调用方式就是节点.parentNode.

兄弟节点

sibling:就是兄弟的意思。
next：下一个的意思。
previous:前一个的意思。
nextSibling：调用者是节点。IE678中指下一个元素节点（标签）。在火狐谷歌IE9+以后都指的是下一个节点（包括空文档和换行节点）。
nextElementSibling：在火狐谷歌IE9都指的是下一个元素节点。
总结：在IE678中用nextSibling，在火狐谷歌IE9+以后用nextElementSibling
下一个兄弟节点=节点.nextElementSibling || 节点.nextSibling
previousSibling：调用者是节点。IE678中指前一个元素节点（标签）。在火狐谷歌IE9+以后都指的是前一个节点（包括空文档和换行节点）。
previousElementSibling：在火狐谷歌IE9都指的是前一个元素节点。
总结：在IE678中用previousSibling，在火狐谷歌IE9+以后用previousElementSibling。
下一个兄弟节点=节点.previousElementSibling|| 节点.previousSibling

单个子节点

firstChild：调用者是父节点。IE678中指第一个子元素节点（标签）。在火狐谷歌IE9+以后都指的是第一个节点（包括空文档和换行节点）。
firstElementChild:在火狐谷歌IE9都指的第一个元素节点。
第一个子节点=父节点.firstElementChild || 父节点.firstChild
lastChild:调用者是父节点。IE678中指最后一个子元素节点（标签）。在火狐谷歌IE9+以后都指的是最后一个节点（包括空文档和换行节点）。
lastElementChild：在火狐谷歌IE9都指的最后一个元素节点。
第一个子节点=父节点.lastElementChild|| 父节点.lastChild

所有子节点

childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点
火狐 谷歌等高本版会把换行也看做是子节点
nodeType==1时才是元素节点(标签)
nodeType == 1 表示的是元素节点 记住 元素就是标签
nodeType == 2 表示是属性节点
nodeType == 3 是文本节点
子节点数组 = 父节点.childNodes; 获取所有节点。
children：非标准属性，它返回指定元素的子元素集合。
但它只返回HTML节点，甚至不返回文本节点，虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。
children在IE6/7/8中包含注释节点
在IE678中，注释节点不要写在里面。
子节点数组 = 父节点.children; 用的最多。

得到自己的所有兄弟节点

节点自己.parentNode.children[index];随意得到兄弟节点。

function siblings(elm) {
        var a = [];
        var p = elm.parentNode.children;
        for(var i =0,pl= p.length;i<pl;i++) {
            if(p[i] !== elm) a.push(p[i]);
        }
        return a;
}

定义一个函数。必须传递自己。定义一个数组，获得自己的父亲，在获得自己父亲的所有儿子（包括自己）。遍历所哟与的儿子，只要不是自己就放进数组中。

getElementById

通过 id 找到 HTML 元素，返回值是一个标签，可以直接使用。获得属性值，设置属性。
document.getElementById("demo");

getElementsByTagName

通过标签名找到 HTML 元素,返回值是一个标签数组，习惯性是遍历之后再使用。
document.getElementsByTagName("div");

getElementsByClassName

通过类名找到 HTML 元素，返回值是一个标签数组，习惯性是遍历之后再使用。
`document.getElementsByClassName("a");
注意：通过类名查找 HTML 元素在 IE 5,6,7,8 中无效

特殊情况：数组中的值只有1个。

• document.getElementsByTagName("div")[0];取数组中第一个元素。
• document.getElementsByClassName("a")[0];取数组中第一个元素。

附录：DOM的解析过程
HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。

概述

JS是以事件驱动为核心的一门语言。

事件三要素

事件源、事件、事件驱动程序。

• 三句话：获取事件源、绑定事件、书写事件驱动程序。
• 获取事件源：document.getElementById(“box”);
• 绑定事件： box.onclick = function(){ 程序 };

事件有哪些

数组的遍历
定义一个数组
var array = [1,2,3,4,5,6];

for循环

for(var i = 0;i<arr.length;i++){
     console.log(arr[i]);
}

every

对数组中每一项运行以下函数，如果都返回true，every返回true，如果有一项返回false，则停止遍历 every返回false.

array.every(function(item,index,arr) {
    if(item<3){
        return true;
    }
    return false;
})

函数参数

• item 必须。当前元素的值。
• index 可选。当前元素的索引值。

• arr 可选。当前元素属于的数组对象。

  filter

  对数组中每一项运行以下函数，该函数返回结果是true的项组成的新数组

    var arr1 = array.filter(function (ele,index,array) {
  
        if(ele>2){
               return true;
        }
        return false;
    });
       console.log(arr1);

  foreach

  遍历数组(无返回值，纯操作数组中的元素),方法用于调用数组的每个元素，并将元素传递给回调函数。

        var str = "";
        array.forEach(function (ele,index,array) {
            str+=ele;
        });
        alert(str);

  map

  有返回值，返回什么都添加到新数组中。

       var arr2 = array.map(function (ele,index,array) {
             return ele+"你好";
        })
  
        console.log(arr2);

  some

  有返回值，函数结果有一个是true，本方法结果也是true。

        var flag = array.some(function (ele,index,array) {
            if(ele.length>2){
                return true;
            }
            return false;
        })
  
        alert(flag);

arguments对象和Function是分不开的。因为arguments这个对象不能显式创建，arguments对象只有函数开始时才可用。只在函数中使用，实参的数组。不能修改长短的数组。(可以修改元素，但是不能变长变短)。

Instanceof

Instanceof是一个关键字，可以判断A是否是B类型。
布尔类型值 = A Instanceof B ;

Array.isArray()

HTML5中新增，判断是不是数组
布尔类型值 = Array.isArray(变量) ;

• 调用者：Array
• 参数：变量(被检测值)

• 返回值：布尔类型

  toString()

  把数组转换成字符串，每一项用,分割
  字符串 = 数组.toString();

  valueOf()

  返回数组对象本身
  数组本身 = 数组.valueOf();

  join

  根据每个字符把数组元素连起来变成字符串。
  字符串 = 数组.join(变量);
  变量可以有可以没有。不写默认用逗号分隔，无缝连接用空字符串。

  push()

  在数组最后面插入项，返回数组的长度
  数组修改后的长度 = 数组.push(元素1);

  pop()

  取出（删除）数组中的最后一项，返回最后一项
  被删除的元素 = 数组.pop();

  unshift()

  在数组最前面插入项，返回数组的长度
  数组1改后的长度 = 数组.unshift(元素1);

  shift()

  取出数组中的第一个元素，返回最后一项
  被删除的元素 = 数组.shift();

  reverse()

  翻转数组（原数组讲呗反转，返回值也是被反转后的数组）
  反转后的数组 = 数组.reverse();

sort();

给数组排序，返回排序后的数组。如何排序看参数。

从小到大排序后的数组  =  数组1.sort(function(a,b){
           return a-b;
});

注意：

• 无参：按照数组元素的首字符对应的Unicode编码值从小到大排列数组元素。

• 带参：必须为函数（回调函数--callback）。函数中带有两个参数，代表数组中的 前后元素。如果计算后（a-b），返回值为负数，a排b前面。等于0不动。返回值为正数，a排b后面。

  其他方法

  concat()
  把参数拼接到当前数组
  新数组 = 数组1.concat(数组2);
  slice()
  从当前数组中截取一个新的数组，不影响原来的数组，参数start从0开始,end从1开始
  新数组 = 数组1.slice(索引1，索引2);包括索引1，不包括索引2.
  splice()
  删除或替换当前数组的某些项目，参数start,deleteCount,options(要替换的项目)
  新数组 = 数组1.splice(起始索引，结束索引，替换内容);
  indexOf()、lastIndexOf()
  查找元素的索引，如果没找到返回-1。
  索引值 = 数组.indexOf/lastIndexOf(数组中的元素);
  清空数组

• array.splice(0,array.length); 删除数组中所有项目。
• array.length = 0; length属性可以赋值，其它语言中length是只读。
• array = []; 推荐使用。

This

• this只出现在函数中。
• 谁调用函数，this就指的是谁。

• new People(); People中的this代指被创建的对象实例。

  new

• 开辟内存空间，存储新创建的对象（ new Object() ）。
• 把this设置为当前对象。
• 执行内部代码，设置对象属性和方法。
• 返回新创建的对象。

面向对象

可以创建自定义的类型、很好的支持继承和多态。面向对象的语言c++/java/c#...
面向对象的特征：封装、继承、多态
万物皆对象：世间的一切事物都可以用对象来描述

基于对象

无法创建自定义的类型、不能很好的支持继承和多态。基于对象的语言JavaScript

定义：在函数内部，可以调用其他函数。如果一个函数在内部调用自身本身，这个函数就是递归函数。
递归注意的问题：递归必须有跳出的条件，否则就会进入死循环。

递归与循环的区别与联系

相同点：
（1）都是通过控制一个变量的边界（或者多个），来改变多个变量为了得到所需要的值，而反复而执行的；
（2）都是按照预先设计好的推断实现某一个值求取。

不同点：
递归通常是逆向思维居多，“递”和“归”不一定容易发现（比较难以理解）；而循环从开始条件到结束条件，包括中间循环变量，都需要表达出来（比较简洁明了）。用循环能实现的，递归一般可以实现，但是能用递归实现的，循环不一定能。
递归案例：

• 用递归求1+100和。

  function getSum(n){
        //跳出条件
        if(n<1){
            return 0;
        }
        //累加
        return n + getSum(n-1);
    }