前言
在学习Web开发中，我们从前期的Html标签学会了如何在网页上画图，使用Css给网页标签进行布局排版之后，我们接下来就需要给网页标签设置点击事件等，来实现网页标签和用户之间的交互。
1）JavaScript语法详解：JS简介&变量。
2）JavaScript语法详解：运算符和表达式。
3)JavaScript语法详解：if语句&for循环&函数。
4）JavaScript基础：DOM操作详解。
5）JavaScript：事件对象Event和冒泡## 字面量：数字和字符串。
6）JavaScript基础：BOM的常见内置方法和内置对象。
“字面量”即**常量**，是固定值，不可改变。看见什么，它就是什么。
简单的字面量有2种：数字、字符串。
在JS中一共有六种数据类型：
- 基本数据类型（值类型）：String 字符串、Number 数值、Boolean 布尔值、Null 空值、Undefined 未定义。
- 引用数据类型（引用类型）：Object 对象。
- 注意：内置对象function、Array、Date、RegExp、Error等都是属于Object类型。也就是说，除了那五种基本数据类型之外，其他的，都称之为 Object类型。
数据类型之间最大的区别：
-
基本数据类型：参数赋值的时候，传数值。
-
引用数据类型：参数赋值的时候，传地址（修改的同一片内存空间）。
null和undefined
null：空值
专门用来表示一个为空的对象（例如：var a = null）。注意，专门用来表示空对象。
-
Null类型的值只有一个，就是null。比如：
var a = null。 -
使用 typeof 检查一个null值时，会返回object。
undefined：未定义
声明了一个变量，但是没有赋值（例如：var a;），此时它的值就是undefined。
-
Undefined类型的值只有一个，就是undefind
-
使用 type of 检查一个undefined时，会返回undefined。
null和undefined有最大的相似性。看看null == undefined的结果(true)也就更加能说明这点。
但是null === undefined的结果(false)。它们虽然相似，但还是有区别的，其中一个区别是：和数字运算时，10 + null结果为：10；10 + undefined结果为：NaN。
-
任何数据类型和undefined运算都是NaN;
-
任何值和null运算，null可看做0运算。
parseInt()还具有以下特性：
（1）只保留字符串最开头的数字，后面的中文自动消失。例如：
console.log(parseInt("2017在公众号上写了6篇文章")); //打印结果：2017
console.log(parseInt("2017.01在公众号上写了6篇文章")); //打印结果仍是：2017 （说明只会取整数）
console.log(parseInt("aaa2017.01在公众号上写了6篇文章")); //打印结果：NaN
（2）自动带有截断小数的功能：取整，不四舍五入。
例1：
var a = parseInt(5.8) + parseInt(4.7);
console.log(a); //打印为9
（3）如果对非String使用parseInt()或parseFloat()，它会先将其转换为String然后再操作。
比如：
var a = true;
console.log(parseInt(a)); //打印结果：NaN （因为是先将a转为字符串"true"，然后然后再操作）
var b = null;
console.log(parseInt(b)); //打印结果：NaN （因为是先将b转为字符串"null"，然后然后再操作）
var c = undefined;
console.log(parseInt(c)); //打印结果：NaN （因为是先将b转为字符串"undefined"，然后然后再操作）
var d = 168.23;
console.log(parseInt(d)); //打印结果：168 （因为是先将c转为字符串"168.23"，然后然后再操作）
（4）带两个参数时，表示进制转换。
parseFloat()：字符串 --> 浮点数（小数）
parseFloat()是专门用来对付字符串的。
parseFloat()的作用是：将字符串转换为浮点数。
parseFloat()和parseInt()的作用类似，不同的是，parseFloat()可以获得有效的小数部分。
代码举例：
var a = '123.456.789px';
console.log(parseFloat(a)); // 打印结果：123.456
转换为 Boolean
将其他的数据类型转换为Boolean，可以使用Boolean()函数。
-
情况一：数字 --> 布尔。除了0和NaN，其余的都是true。
-
情况二：字符串 —> 布尔。除了空串，其余的都是true。
-
情况三：null和undefined都会转换为false。
-
情况四：对象也会转换为true。
PS：转换为 Boolean 的这几种情况，很重要，开发中会经常用到。
其他进制的数字
-
16进制的数字，以
0x开头 -
8进制的数字，以
0开头 -
2进制的数字，
0b开头（不是所有的浏览器都支持：chrome和火狐支持，IE不支持）
比如070这个字符串，如果我调用parseInt()转成数字时，有些浏览器会当成8进制解析，有些会当成10进制解析。
所以，比较建议的做法是：可以在parseInt()中传递第二个参数，来指定数字的进制。例如：
a = "070";
a = parseInt(a,10); //转换成十进制
如果两个变量保存的是同一个对象引用，当一个通过一个变量修改属性时，另一个也会受到影响。
例如：
var obj = new Object();
obj.name = "孙悟空";
var obj2 = obj;
//修改obj的name属性
obj.name = "猪八戒";
上面的代码中，当我修改obj的name属性后，会发现，obj2的name属性也会被修改。因为obj和obj2指向的是堆内存中的同一个地址。
补充1：对象的属性值可以是任何的数据类型，也可以是个函数：（也称之为方法）
var obj = new Object();
obj.sayName = function () {
console.log('smyhvae');
};
console.log(obj.sayName); //没加括号，获取的是对象
console.log('-----------');
console.log(obj.sayName()); //加了括号，执行函数内容，并执行函数体的内容
打印结果：
补充2：js中的属性值，也可以是一个对象。
举例：
//创建对象 obj1
var obj1 = new Object();
obj1.test = undefined;
//创建对象 obj2
var obj2 = new Object();
obj2.name = "smyhvae";
//将整个 obj2 对象，设置为 obj1 的属性
obj1.test = obj2;
console.log(obj1.test.name);
打印结果为：smyhvae
方式2：可以使用[]这种形式去操作属性。
对象["属性名"] = 属性值
in 运算符
通过该运算符可以检查一个对象中是否含有指定的属性。如果有则返回true，没有则返回false。
语法：
"属性名" in 对象
举例：
//检查obj中是否含有name属性
console.log("name" in obj);
使用对象字面量来创建一个对象：
var obj = {};
使用对象字面量，可以在创建对象时，直接指定对象中的属性。语法：{属性名:属性值,属性名:属性值…}
例如：
var obj2 = {
name: "猪八戒",
age: 13,
gender: "男",
test: {
name: "沙僧"
}
//我们还可以在对象中增加一个方法。以后可以通过obj2.sayName()的方式调用这个方法
sayName: function(){
console.log('smyhvae');
}
};
对象字面量的属性名可以加引号也可以不加，建议不加。如果要使用一些特殊的名字，则必须加引号。
属性名和属性值是一组一组的键值对结构，键和值之间使用:连接，多个值对之间使用,隔开。如果一个属性之后没有其他的属性了，就不要写,，因为它是对象的最后一个属性。
函数
方式一：使用函数声明来创建一个函数。语法：
function 函数名([形参1,形参2...形参N]){ // 备注：语法中的中括号，表示“可选”
语句...
}
举例：
function sum(a, b){
return a+b;
}
解释如下：
-
function：是一个关键字。中文是“函数”、“功能”。
-
函数名字：命名规定和变量的命名规定一样。只能是字母、数字、下划线、美元符号，不能以数字开头。
-
参数：可选。
-
大括号里面，是这个函数的语句。
方式二：使用函数表达式来创建一个函数。语法：
var 函数名 = function([形参1,形参2...形参N]){
语句....
}
举例：
var fun3 = function() {
console.log("我是匿名函数中封装的代码");
};
从方式二的举例中可以看出：所谓的“函数表达式”，其实就是将匿名函数赋值给一个变量。
当然，我们还有方式三：使用构造函数来创建一个对象。这种方式，用的少。
注意：实际参数和形式参数的个数，要相同。
实参的数量：
调用函数时，解析器也不会检查实参的数量：
-
多余实参不会被赋值
-
如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined。例如：
fn() 和 fn 的区别【重要】
现有匿名函数如下：
function(a, b) {
console.log("a = " + a);
console.log("b = " + b);
};
立即执行函数如下：
(function(a, b) {
console.log("a = " + a);
console.log("b = " + b);
})(123, 456);
变量的声明提前（变量提升）
使用var关键字声明的变量（ 比如 var a = 1），会在所有的代码执行之前被声明（但是不会赋值），但是如果声明变量时不是用var关键字（比如直接写a = 1），则变量不会被声明提前。
举例1：
console.log(a);
var a = 123;
打印结果：undefined。（说明变量 a 被 被提前声明了，只是尚未被赋值）
举例2：
console.log(a);
a = 123; //此时a相当于window.a
程序会报错：
立即执行函数：函数定义完，立即被调用，这种函数叫做立即执行函数。
立即执行函数往往只会执行一次。为什么呢？因为没有变量保存它，执行完了之后，就找不到它了。
函数的声明提前
函数声明：
使用函数声明的形式创建的函数function foo(){}，会被声明提前。
也就是说，整个函数会在所有的代码执行之前就被创建完成，所以我们可以在函数声明之前，调用函数。
代码举例：
fn1(); // 虽然 函数 fn1 的定义是在后面，但是因为被提前声明了， 所以此处可以调用函数
function fn1() {
console.log('我是函数 fn1');
}
函数表达式：
使用函数表达式创建的函数var foo = function(){}，不会被声明提前，所以不能在声明前调用。
很好理解，因为此时foo被声明了，且为undefined，并没有把 function(){} 赋值给 foo。
所以说，下面的例子，会报错：
执行期上下文*：当函数执行时，会创建一个执行期上下文的内部对象。每调用一次函数，就会创建一个新的上下文对象，他们之间是相互独立的。当函数执行完毕，它所产生的执行期上下文会被销毁。参考链接：https://www.cnblogs.com/chenyingjie1207/p/9966036.html
作用域的上下级关系：
当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用（就近原则）。如果没有则向上一级作用域中寻找，直到找到全局作用域；如果全局作用域中依然没有找到，则会报错ReferenceError。
在函数中要访问全局变量可以使用window对象。（比如说，全局作用域和函数作用域都定义了变量a，如果想访问全局变量，可以使用window.a）
提醒1：
在函数作用域也有声明提前的特性：
-
使用var关键字声明的变量，会在函数中所有的代码执行之前被声明
-
函数声明也会在函数中所有的代码执行之前执行
因此，在函数中，没有var声明的变量都是全局变量，而且并不会提前声明。
举例1：
var a = 1;
function foo() {
console.log(a);
a = 2; // 此处的a相当于window.a
}
foo();
console.log(a); //打印结果是2
上方代码中，foo()的打印结果是1。如果去掉第一行代码，打印结果是Uncaught ReferenceError: a is not defined
**提醒2：**定义形参就相当于在函数作用域中声明了变量。
function fun6(e) { // 这个函数中，因为有了形参 e，此时就相当于在函数内部的第一行代码里，写了 var e;
console.log(e);
}
fun6(); //打印结果为 undefined
fun6(123);//打印结果为123
this
解析器在调用函数每次都会向函数内部传递进一个隐含的参数，这个隐含的参数就是this，this指向的是一个对象，这个对象我们称为函数执行的 上下文对象。
根据函数的调用方式的不同，this会指向不同的对象：【重要】
-
1.以函数的形式调用时，this永远都是window。比如
fun();相当于window.fun(); -
2.以方法的形式调用时，this是调用方法的那个对象
-
3.以构造函数的形式调用时，this是新创建的那个对象
-
4.使用call和apply调用时，this是指定的那个对象
JSON和对象字面量的区别：JSON的属性必须用双引号引号引起来，对象字面量可以省略。
数组（Array）
| 方法 | 描述 | 备注 |
|---|---|---|
| push() | 向数组的最后面插入一个或多个元素，返回结果为该数组新的长度 | 会改变原数组 |
| pop() | 删除数组中的最后一个元素，返回结果为被删除的元素 | 会改变原数组 |
| unshift() | 在数组最前面插入一个或多个元素，返回结果为该数组新的长度 | 会改变原数组 |
| shift() | 删除数组中的第一个元素，返回结果为被删除的元素 | 会改变原数组 |
遍历数组的方法如下：
| 方法 | 描述 | 备注 |
|---|---|---|
| for循环 | 这个大家都懂 | |
| forEach() | 和 for循环类似，但需要兼容IE8以上 | forEach() 没有返回值。也就是说，它的返回值是 undefined |
| filter() | 返回结果是true的项，将组成新的数组。可以起到过滤的作用 | 不会改变原数组 |
| map() | 对原数组中的每一项进行加工 | |
| every() | 如果有一项返回false，则停止遍历 | 意思是，要求每一项都返回true，最终的结果才返回true |
| some() | 只要有一项返回true，则停止遍历 |
数组的四个基本方法（数组元素的添加和删除）
push()
push()：向数组的最后面插入一个或多个元素，返回结果为该数组新的长度。
语法：
数组的新长度 = 数组.push(元素);
代码举例：
var arr = ["王一", "王二", "王三"];
var result1 = arr.push("王四"); // 末尾插入一个元素
var result2 = arr.push("王五", "王六"); // 末尾插入多个元素
console.log(result1); // 打印结果：4
console.log(result2); // 打印结果：6
console.log(JSON.stringify(arr)); // 打印结果：["王一","王二","王三","王四","王五","王六"]
pop()
pop()：删除数组中的最后一个元素，返回结果为被删除的元素。
语法：
被删除的元素 = 数组.pop();
代码举例：
var arr = ["王一", "王二", "王三"];
var result1 = arr.pop();
console.log(result1); // 打印结果：王三
console.log(JSON.stringify(arr)); // 打印结果：["王一","王二"]
unshift()
unshift()：在数组最前面插入一个或多个元素，返回结果为该数组新的长度。插入元素后，其他元素的索引会依次调整。
语法：
数组的新长度 = 数组.unshift(元素);
代码举例：
var arr = ["王一", "王二", "王三"];
var result1 = arr.unshift("王四"); // 最前面插入一个元素
var result2 = arr.unshift("王五", "王六"); // 最前面插入多个元素
console.log(result1); // 打印结果：4
console.log(result2); // 打印结果：6
console.log(JSON.stringify(arr)); // 打印结果：["王五","王六","王四","王一","王二","王三"]
shift()
shift()：删除数组中的第一个元素，返回结果为被删除的元素。
语法：
被删除的元素 = 数组.shift();
代码举例：
var arr = ["王一", "王二", "王三"];
var result1 = arr.shift();
console.log(result1); // 打印结果：王一
console.log(JSON.stringify(arr)); // 打印结果：["王二","王三"]
数组的遍历
遍历数组即：获取并操作数组中的每一个元素。在我们的实战开发中，使用得非常频繁。
遍历数组的方法包括：every()、filter()、forEach()、map()、some()
PS：这几个方法不会修改原数组。
语法格式：
数组/boolean/无 = 数组.every/filter/forEach/map/some(
function(element,index,arr){
程序和返回值；
有了这几种方法，就可以替代一些for循环了。下面依次来介绍。
for循环 遍历
举例：
var arr = ["生命壹号","许嵩","永不止步"];
for(var i = 0;i<arr.length;i++){
console.log(arr[i]); // arr[i]代表的是数组中的每一个元素i
}
console.log(arr);
打印结果：
forEach() 遍历是普通遍历，没有返回值。（类似java的For循环）
forEach()这种遍历方法只支持IE8以上的浏览器。IE8及以下的浏览器均不支持该方法。所以如果需要兼容IE8，则不要使用forEach，改为使用for循环来遍历即可。
forEach()方法需要一个函数作为参数。这种函数，是由我们创建但是不由我们调用的，我们称为回调函数。
数组中有几个元素，该回调函数就会执行几次。执行完毕后，浏览器会将遍历到的元素。
回调函数中传递三个参数：
- 第一个参数，就是当前正在遍历的元素
- 第二个参数，就是当前正在遍历的元素的索引
- 第三个参数，就是正在遍历的数组
代码举例：
var arr = ["王一", "王二", "王三"];
arr.forEach(function(item, index, obj) {
console.log("item:" + item);
console.log("index:" + index);
console.log("obj:" + obj);
console.log("----------");
});
打印结果：
item:王一
index:0
obj:王一,王二,王三
----------
item:王二
index:1
obj:王一,王二,王三
----------
item:王三
index:2
obj:王一,王二,王三
----------
注意，forEach() 的返回值是 undefined。也就是说，它没有返回值。如果你尝试 tempArry = arr.forEach()这种方式来接收，是达不到效果的。
filter()：根据某个过滤条件，返回一个新的数组。
语法：
Array.prototype.filter(function(item, index){})
解释：对数组中每一项运行回调函数，该函数返回结果是true的项，将组成新的数组（返回值就是这个新的数组）。
举例1：找出数组 arr1 中大于4的元素，返回一个新的数组。代码如下：
var arr1 = [1, 3, 6, 2, 5, 6];
var arr2 = arr1.filter(function (item, index) {
return item > 4; //将arr1中大于4的元素返回
})
console.log(arr2);
打印结果：
举例2：
var arr1 = ["千古", "宿敌", "南山忆", "素颜"];
var arr2 = arr1.filter(function (element, index, array) {
if (element.length > 2) { //arr1中的元素，如果是长度超过2个字符的，我就把它放到arr2中去
return true;
}
return false;
});
console.log(arr1);
console.log(arr2);
分析：return true;表示把元素放入到新数组中去。
map()方法：返回“加工后”的新数组。
解释：对数组中每一项运行回调函数，返回该函数的结果，组成的新数组（返回的是加工之后的新数组）。
比如说，有一个已知的数组arr1，我要求让arr1中的每个素加10，这里就可以用到map方法。举例：
var arr1 = [1, 3, 6, 2, 5, 6];
var arr2 = arr1.map(function (item, index) {
return item + 10; //让arr1中的每个元素加10
})
console.log(arr2);
打印结果：
举例2：
var arr1 = ["千古", "宿敌", "南山忆", "素颜"];
var arr2 = arr1.map(function (element, index, array) {
return element + "vae"; //给arr1中所有的元素增加字符串"vae"，放到arr2中。
});
console.log(arr1);
console.log(arr2);
结果：
总结分析filter()和map()回调函数的异同点：
相同点：
1）这两个函数区别于for循环和forEach()回调函数，它们是有返回新的数组。
2）原数组的元素也不改变。
不同点:
1）区别是filer()回调函数是在不改变原数组里面的元素下返回符合某个条件的元素组成新的数组，
return true表示把元素放入到新的数组。(无法改变原数组的元素组成新的数组)
3）map()回调函数是直接操作原数组里面的元素就会返回新的元素组成新的数组。
every()方法的作用：判断数组元素是否都符合某个条件。
解释：对数组中每一项运行回调函数，如果都返回true，every就返回true；如果有一项返回false，则停止遍历，此方法返回false。
注意：every()方法的返回值是boolean值，参数是回调函数。
举例：
var arr1 = ["千古", "宿敌", "南山忆", "素颜"];
var bool1 = arr1.every(function (element, index, array) {
if (element.length > 2) {
return false;
}
return true;
});
console.log(bool1); //输出结果：false。只要有一个元素的长度是超过两个字符的，就返回false
var arr2 = ["千古", "宿敌", "南山", "素颜"];
var bool2 = arr2.every(function (element, index, array) {
if (element.length > 2) {
return false;
}
return true;
});
console.log(bool2); //输出结果：true。因为每个元素的长度都是两个字符。
some()方法：区别于every()方法，判断数组的所有元素是否有符合某个条件的元素，如果有则返回true，停止遍历。
解释：对数组中每一项运行回调函数，只要有一项返回true，则停止遍历，此方法返回true。
数组的常见方法如下：
| 方法 | 描述 | 备注 |
|---|---|---|
| slice() | 从数组中提取指定的一个或多个元素，返回结果为新的数组 | 不会改变原数组 |
| splice() | 从数组中删除指定的一个或多个元素，返回结果为新的数组 | 会改变原数组 |
| concat() | 连接两个或多个数组，返回结果为新的数组 | 不会改变原数组 |
| join() | 将数组转换为字符串，返回结果为转换后的字符串 | 不会改变原数组 |
| reverse() | 反转数组，返回结果为反转后的数组 | 会改变原数组 |
| sort() | 对数组的元素,默认按照Unicode编码，从小到大进行排序 | 会改变原数组 |
数组的常见方法
slice()
slice()：从数组中提取指定的一个或者多个元素，返回结果为新的数组（不会改变原来的数组）。
备注：该方法不会改变原数组，而是将截取到的元素封装到一个新数组中返回。
语法：
新数组 = 原数组.slice(开始位置的索引, 结束位置的索引); //注意：包含开始索引，不包含结束索引
举例：
var arr = ["a", "b", "c", "d", "e", "f"];
var result1 = arr.slice(2); //从第二个值开始提取
var result2 = arr.slice(-2); //提取最后两个元素
var result3 = arr.slice(2, 4); //提取从第二个到第四个之间的值（不包括第四个值）
var result4 = arr.slice(4, 2); //空
console.log("arr:" + JSON.stringify(arr));
console.log("result1:" + JSON.stringify(result1));
console.log("result2:" + JSON.stringify(result2));
console.log("result3:" + JSON.stringify(result3));
console.log("result4:" + JSON.stringify(result4));
打印结果：
arr:["a","b","c","d","e","f"]
result1:["c","d","e","f"]
result2:["e","f"]
result3:["c","d"]
result4:[]
补充：
很多前端开发人员会用 slice()将伪数组，转化为真数组。写法如下：
array = Array.prototye.slice.call(arrayLike)
或者
array = [].slice.call(arrayLike)
ES6 看不下去这种蹩脚的转化方法，于是出了一个新的 API：（专门用来将伪数组转化成真数组）
array = Array.from(arrayLike)
splice()
splice()：从数组中删除指定的一个或多个元素，返回结果为新的数组（会改变原来的数组，会将指定元素从原数组中删除）。
语法：
新数组 = 原数组.splice(起始索引index, 需要删除的个数, 第三个参数, 第四个参数...);
上方语法中，第三个及之后的参数，表示：向原数组中添加新的元素，这些元素将会自动插入到开始位置索引的前面。
举例1：
var arr1 = ["a", "b", "c", "d", "e", "f"];
var result1 = arr1.splice(1); //从第index为1的位置开始，删除元素
console.log("arr1：" + JSON.stringify(arr1));
console.log("result1：" + JSON.stringify(result1));
console.log("-----------------------");
var arr2 = ["a", "b", "c", "d", "e", "f"];
var result2 = arr2.splice(-2); //从第一个位置开始，删除元素
console.log("arr2：" + JSON.stringify(arr2));
console.log("result2：" + JSON.stringify(result2));
console.log("-----------------------");
var arr3 = ["a", "b", "c", "d", "e", "f"];
var result3 = arr3.splice(1, 3); //从第index为1的位置开始删除元素,一共删除三个元素
console.log("arr3：" + JSON.stringify(arr3));
console.log("result3：" + JSON.stringify(result3));
console.log("-----------------------");
打印结果：
arr1：["a"]
result1：["b","c","d","e","f"]
-----------------------
arr2：["a","b","c","d"]
result2：["e","f"]
-----------------------
arr3：["a","e","f"]
result3：["b","c","d"]
-----------------------
举例2：（我们来看看第三个参数的用法）
var arr4 = ["a", "b", "c", "d", "e", "f"];
//从第index为1的位置开始删除元素,一共删除三个元素。并且在 index=1 的前面追加两个元素
var result4 = arr4.splice(1, 3, "千古壹号", "vae");
console.log("arr4：" + JSON.stringify(arr4));
console.log("result4：" + JSON.stringify(result4));
打印结果：
arr4：["a","千古壹号","vae","e","f"]
result4：["b","c","d"]
concat()
concat()：连接两个或多个数组，返回结果为新的数组。（不会改变原数组）
语法：
新数组 = 数组1.concat(数组2, 数组3 ...);
举例：
var arr1 = [1, 2, 3];
var arr2 = ["a", "b", "c"];
var arr3 = ["千古壹号", "vae"];
var result1 = arr1.concat(arr2);
var result2 = arr2.concat(arr1, arr3);
console.log("arr1 =" + JSON.stringify(arr1));
console.log("arr2 =" + JSON.stringify(arr2));
console.log("arr3 =" + JSON.stringify(arr3));
console.log("result1 =" + JSON.stringify(result1));
console.log("result2 =" + JSON.stringify(result2));
打印结果：
arr1 =[1,2,3]
arr2 =["a","b","c"]
arr3 =["千古壹号","vae"]
result1 =[1,2,3,"a","b","c"]
result2 =["a","b","c",1,2,3,"千古壹号","vae"]
从打印结果中可以看到，原数组并没有被修改。
join()
join()：将数组转换为字符串，返回结果为转换后的字符串（不会改变原来的数组）。
补充：join()方法可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符；如果不指定连接符，则默认使用 , 作为连接符，此时和 toString()的效果是一致的。
语法：
新的字符串 = 原数组.join(参数); // 参数选填
代码举例：
var arr = ["a", "b", "c"];
var result1 = arr.join(); // 这里没有指定连接符，所以默认使用 , 作为连接符
var result2 = arr.join("-"); // 使用指定的字符串作为连接符
console.log(typeof arr); // 打印结果：object
console.log(typeof result1); // 打印结果：string
console.log("arr =" + JSON.stringify(arr));
console.log("result1 =" + JSON.stringify(result1));
console.log("result2 =" + JSON.stringify(result2));
上方代码中，最后三行的打印结果是：
arr =["a","b","c"]
result1 =a,b,c
result2 =a-b-c
reverse()
reverse()：反转数组，返回结果为反转后的数组（会改变原来的数组）。
语法：
反转后的数组 = 数组.reverse();
举例：
var arr = ["a", "b", "c", "d", "e", "f"];
var result = arr.reverse(); // 将数组 arr 进行反转
console.log("arr =" + JSON.stringify(arr));
console.log("result =" + JSON.stringify(result));
打印结果：
arr =["f","e","d","c","b","a"]
result =["f","e","d","c","b","a"]
从打印结果可以看出，原来的数组已经被改变了。
sort()方法
sort()方法要好好理解。所以，我们单独用一大段来讲。
sort()：对数组的元素进行从小到大来排序（会改变原来的数组）。
sort()方法举例：无参时
如果在使用 sort() 方法时不带参，则默认按照Unicode编码，从小到大进行排序。
举例1：（当数组中的元素为字符串时）
var arr1 = ["e", "b", "d", "a", "f", "c"];
var result = arr1.sort(); // 将数组 arr1 进行排序
console.log("arr1 =" + JSON.stringify(arr1));
console.log("result =" + JSON.stringify(result));
打印结果：
arr1 =["a","b","c","d","e","f"]
result =["a","b","c","d","e","f"]
举例2：（当数组中的元素为数字时）
var arr2 = [5, 2, 11, 3, 4, 1];
var result = arr2s.sort(); // 将数组 arr2 进行排序
console.log("arr2 =" + JSON.stringify(arr2));
console.log("result =" + JSON.stringify(result));
打印结果：
arr2 =[1,11,2,3,4,5]
result =[1,11,2,3,4,5]
上方的打印结果中，你会发现，使用 sort() 排序后，数字11竟然在数字2的前面。这是为啥呢？因为上面讲到了，sort()方法是按照*Unicode编码*进行排序的。
使用Unicode编码，数字1和数字11的存储方式都是使用字符的形式保存的，保存的都是同一个拉丁字符“1”。并没有大小的关系。
所以JavaScript的数组的sort方法给数字数组进行排序时，默认是按unicode编码进行存储的 ，排序自然无法识别数字的大小关系。
那如果我想让 arr2 里的数字，完全按照从小到大排序，怎么操作呢？继续往下看。
sort()方法举例：带参时
如果在 sort()方法中带参，我们就可以自定义排序规则。具体做法如下：
我们可以在sort()添加一个回调函数，来指定排序规则。回调函数中需要定义两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数
浏览器根据回调函数的返回值来决定元素的排序：（重要）
- 如果返回一个大于0的值，则元素会交换位置
- 如果返回一个小于0的值，则元素位置不变
- 如果返回一个0，则认为两个元素相等，则不交换位置
代码举例：
var arr3 = [5, 2, 11, 3, 4, 1];
// 自定义排序规则
var result = arr3.sort(function(a, b) {
if (a > b) { // 如果 a 大于 b，则交换 a 和 b 的位置
return 1;
} else if (a < b) { // 如果 a 小于 b，则位置不变
return -1;
} else { // 如果 a 等于 b，则位置不变
return 0;
}
});
console.log("arr3 =" + JSON.stringify(arr3));
console.log("result =" + JSON.stringify(result));
打印结果：
arr3 =[1,2,3,4,5,11]
result =[1,2,3,4,5,11]
上方代码的写法太啰嗦了，其实也可以简化为如下写法：
代码优化：（冒泡排序）
var arr3 = [5, 2, 11, 3, 4, 1];
// 自定义排序规则
var result = arr3.sort(function(a, b) {
return a - b; // 升序排列
// return b - a; // 降序排列
});
console.log("arr3 =" + JSON.stringify(arr3));
console.log("result =" + JSON.stringify(result));
打印结果：
arr3 =[1,2,3,4,5,11]
result =[1,2,3,4,5,11]
练习
splice()练习：数组去重
代码实现：
//创建一个数组
var arr = [1, 2, 3, 2, 2, 1, 3, 4, 2, 5];
//去除数组中重复的数字
//获取数组中的每一个元素
for (var i = 0; i < arr.length; i++) {
//console.log(arr[i]);
/*获取当前元素后的所有元素*/
for (var j = i + 1; j < arr.length; j++) {
//console.log("---->"+arr[j]);
//判断两个元素的值是否相等
if (arr[i] == arr[j]) {
//如果相等则证明出现了重复的元素，则删除j对应的元素
arr.splice(j, 1);
//当删除了当前j所在的元素以后，后边的元素会自动补位
//此时将不会在比较这个元素吧，我需要在比较一次j所在位置的元素
//使j自减
j--;
}
}
}
console.log(arr);
| 方法 | 描述 | 备注 |
|---|---|---|
| indexOf(value) | 从前往后索引，获取 value 在数组中的第一个下标 | |
| lastIndexOf(value) | 从后往前索引，获取 value 在数组中的最后一个下标 | |
| find(function()) | 找出第一个满足「指定条件返回true」的元素。 | |
| findIndex(function()) | 找出第一个满足「指定条件返回true」的元素的index | |
| Array.from(arrayLike) | 将伪数组转化为真数组 | |
| Array.of(value1, value2, value3) | 将一系列值转换成数组。 |
数组的其他方法
indexOf() 和 lastIndexOf()：获取数据的索引
语法：
索引值 = 数组.indexOf(value);
索引值 = 数组.lastIndexOf(value);
解释：
-
indexOf(value)：从前往后索引，获取 value 在数组中的第一个下标。
-
lastIndexOf(value) ：从后往前索引，获取 value 在数组中的最后一个下标。
作用：
利用这个方法，我们可以判断某个值是否在指定的数组中。如果没找到则返回-1。
举例1：
var arr = ["a","b","c","d","e","d","c"];
console.log(arr.indexOf("c")); //从前往后，找第一个"c"在哪个位置
console.log(arr.lastIndexOf("d")); //从后往前，找第一个"d"在哪个位置
打印结果：
举例2：判断某个值是否在数组中
var arr = ["29926392220", "29965620629", "28003663436", " ", "28818504366"];
var str = [
{name:"smyh", id: "12334"},
{name:"vae", id: "28818504366"}
];
str.filter(item => {
console.log(arr.indexOf(item.id));
})
find()
语法：
find(function(item, index, arr){return true})
作用：找出第一个满足「指定条件返回true」的元素。
举例：
let arr = [2, 3, 2, 5, 7, 6];
let result = arr.find(function (item, index) {
return item > 4; //遍历数组arr，一旦发现有第一个元素大于4，就把这个元素返回
});
console.log(result); //打印结果：5
findIndex()
语法：
findIndex(function(item, index, arr){return true})
作用：找出第一个满足「指定条件返回true」的元素的index。
举例：
我们直接把上面的代码中的find方法改成findIndex，来看看效果。
let arr = [2, 3, 2, 5, 7, 6];
let result = arr.findIndex(function (item, index) {
return item > 4; //遍历数组arr，一旦发现有第一个元素大于4，就把这个元素的index返回
});
console.log(result); //打印结果：3
Array.from()
语法：
array = Array.from(arrayLike)
作用：将伪数组或可遍历对象转换为真数组。
举例：
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script>
let btnArray = document.getElementsByTagName('button');
console.log(btnArray);
console.log(btnArray[0]);
</script>
</body>
上面的布局中，有三个button标签，我们通过getElementsByTagName获取到的btnArray实际上是伪数组，并不是真实的数组：
既然btnArray是伪数组，它就不能使用数组的一般方法，否则会报错：
解决办法：采用Array.from方法将btnArray这个伪数组转换为真数组即可：
Array.from(btnArray);
然后就可以使用数组的一般方法了：
伪数组与真数组的区别：
伪数组的原型链中没有 Array.prototype，而真数组的原型链中有 Array.prototype。因此伪数组没有 pop、join等属性。
Array.of()
语法：
Array.of(value1, value2, value3)
作用：将一系列值转换成数组。
举例：
//Array.of(value1, value2, value3) : 将一系列值转换成数组
let arr = Array.of(1, 'abc', true);
console.log(arr);
其他
isArray()：判断是否为数组
布尔值 = Array.isArray(被检测的值) ;
以前，我们会通过 A instanceof B来判断 A 是否属于 B 类型。但是在数组里，这种 instanceof 方法已经用的不多了，因为有下面isArray()方法。
toString()：转换数组
字符串 = 数组.toString();
解释：把数组转换成字符串，每一项用,分割。
valueOf()：返回数组本身
数组本身 = 数组.valueOf();
这个方法的意义不大。因为我们指直接写数组对象的名字，就已经是数组本身了。
清空数组
清空数组，有以下几种方式：
var array = [1,2,3,4,5,6];
array.splice(0); //方式1：删除数组中所有项目
array.length = 0; //方式2：length属性可以赋值，在其它语言中length是只读
array = []; //方式3：推荐
数组练习
练习1
问题：将一个字符串数组输出为|分割的形式，比如“千古|宿敌|素颜”。使用两种方式实现。
答案：
方式1：（不推荐）
var arr = ["千古","宿敌","素颜"];
var str = arr[0];
var separator = "|";
for(var i = 1;i< arr.length;i++) {
str += separator+arr[i]; //从第1个数组元素开始，每个元素前面加上符号"|"
}
console.log(str);
输出结果：
不推荐这种方式，因为：由于字符串的不变性，str拼接过多的话，容易导致内存溢出（很多个str都堆放在栈里）。
方式2：（推荐。通过array数组自带的api来实现）
var arr = ["千古","宿敌","素颜"];
console.log(arr.join("|"));
结果：
练习2
题目：将一个字符串数组的元素的顺序进行反转，使用两种种方式实现。提示：第i个和第length-i-1个进行交换。
答案：
方式1：
function reverse(array) {
var newArr = [];
for (var i = array.length - 1; i >= 0; i--) {
newArr[newArr.length] = array[i];
}
return newArr;
}
方式2：（算法里比较常见的方式）
function reverse(array){
for(var i=0;i<array.length/2;i++){
var temp = array[i];
array[i] = array[array.length-1-i];
array[array.length-1-i] = temp;
}
return array;
}
方式3：（数组自带的reverse方法）
现在我们学习了数组自带的api，我们就可以直接使用reverse()方法。
练习3
问题：针对工资的数组[1500,1200,2000,2100,1800]，把工资超过2000的删除。
答案：
var arr1 = [1500, 1200, 2000, 2100, 1800];
var arr2 = arr1.filter(function (ele, index, array) {
if (ele < 2000) {
return true;
}
return false;
})
console.log(arr1);
console.log(arr2);
结果：
练习4
问题：找到数组[“c”,“a”,“z”,“a”,“x”,“a”]中每一个元素出现的次数。
分析：这道题建议用json数据来做，因为我们想知道a出现了几次，c出现了几次，x出现了几次。恰好k:v .. k:v这种键值对的形式就比数组方便很多了。
键值对的形式：用key代表数组中的元素，用value代表元素出现的次数。
略难，答案暂略。
练习5：数组去重
问题：编写一个方法去掉一个数组中的重复元素。
分析：创建一个新数组，循环遍历，只要新数组中有老数组的值，就不用再添加了。
答案：
// 编写一个方法 去掉一个数组的重复元素
var arr = [1,2,3,4,5,2,3,4];
console.log(arr);
var aaa = fn(arr);
console.log(aaa);
//思路：创建一个新数组，循环遍历，只要新数组中有老数组的值，就不用再添加了。
function fn(array){
var newArr = [];
for(var i=0;i<array.length;i++){
//开闭原则
var bool = true;
//每次都要判断新数组中是否有旧数组中的值。
for(var j=0;j<newArr.length;j++){
if(array[i] === newArr[j]){
bool = false;
}
}
if(bool){
newArr[newArr.length] = array[i];
}
}
return newArr;
}
JavaScript的内置对象：
| 内置对象 | 对象说明 |
|---|---|
| Arguments | 函数参数集合 |
| Array | 数组 |
| Boolean | 布尔对象 |
| Date | 日期时间 |
| Error | 异常对象 |
| Function | 函数构造器 |
| Math | 数学对象 |
| Number | 数值对象 |
| Object | 基础对象 |
| RegExp | 正则表达式对象 |
| String | 字符串对象 |
| 方法 | 描述 | 备注 |
|---|---|---|
| Math.abs() | 返回绝对值 | |
| Math.floor() | 向下取整（向小取） | |
| Math.ceil() | 向上取整（向大取） | |
| Math.round() | 四舍五入取整（正数四舍五入，负数五舍六入） | |
| Math.random() | 生成0-1之间的随机数 | 不包含0和1 |
| Math.max(x, y, z) | 返回多个数中的最大值 | |
| Math.min(x, y, z) | 返回多个数中的最小值 | |
| Math.pow(x,y) | 返回 x 的 y 次幂 | |
| Math.sqrt() | 对一个数进行开方运算 |
常见的事件如下：
onload事件
有一点我们要知道：js的加载是和html同步加载的。因此，如果使用元素在定义元素之前，容易报错。这个时候，onload事件就能派上用场了，我们可以把使用元素的代码放在onload里，就能保证这段代码是最后执行。
建议是：整个页面上所有元素加载完毕在执行js内容。所以，window.onload可以预防使用标签在定义标签之前。
当页面加载（文本和图片）完毕的时候，触发onload事件。
JavaScript基础分为三个部分：
- ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
- **DOM**：文档对象模型（Document object Model），操作**网页上的元素**的API。比如让盒子移动、变色、轮播图等。
- **BOM**：浏览器对象模型，操作**浏览器部分功能**的API。比如让浏览器自动滚动。
节点
节点（Node）：构成 HTML 网页的最基本单元。网页中的每一个部分都可以称为是一个节点，比如：html标签、属性、文本、注释、整个文档等都是一个节点。
虽然都是节点，但是实际上他们的具体类型是不同的。
常见节点分为四类：
- 文档节点（文档）：整个 HTML 文档。整个 HTML 文档就是一个文档节点。
- 元素节点（标签）：HTML标签。
- 属性节点（属性）：元素的属性。
- 文本节点（文本）：HTML标签中的文本内容（包括标签之间的空格、换行）。
节点的类型不同，属性和方法也都不尽相同。所有的节点都是Object。
什么是DOM
DOM：Document Object Model，文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
DOM就是由节点组成的。
解析过程：
HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。**
DOM树：（一切都是节点）
DOM的数据结构如下：
上图可知，在HTML当中，一切都是节点（非常重要）。节点的分类，在上一段中，已经讲了。
整个html文档就是一个文档节点。所有的节点都是Object。
DOM可以做什么
-
找对象（元素节点）
-
设置元素的属性值
-
设置元素的样式
-
动态创建和删除元素
-
事件的触发响应：事件源、事件、事件的驱动程序
元素节点的获取
DOM节点的获取方式其实就是获取事件源的方式。关于事件，上一篇文章中已经讲到了。
想要操作元素节点，必须首先要找到该节点。有三种方式可以获取DOM节点：
var div1 = document.getElementById("box1"); //方式一：通过 id 获取 一个 元素节点（为什么是一个呢？因为 id 是唯一的）
var arr1 = document.getElementsByTagName("div"); //方式二：通过 标签名 获取 元素节点数组，所以有s
var arr2 = document.getElementsByClassName("hehe"); //方式三：通过 类名 获取 元素节点数组，所以有s
既然方式二、方式三获取的是标签数组，那么习惯性是先遍历之后再使用。
特殊情况：数组中的值只有1个。即便如此，这一个值也是包在数组里的。这个值的获取方式如下：
document.getElementsByTagName("div1")[0]; //取数组中的第一个元素
document.getElementsByClassName("hehe")[0]; //取数组中的第一个元素
DOM访问关系的获取
DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问。如下：
节点的访问关系，是以属性的方式存在的。
JS中的父子兄访问关系：
这里我们要重点知道parentNode和children这两个属性的用法。下面分别介绍。
获取父节点
调用者就是节点。一个节点只有一个父节点，调用方式就是
节点.parentNode
获取兄弟节点
1、下一个节点 | 下一个元素节点：
Sibling的中文是兄弟。
（1）nextSibling：
-
火狐、谷歌、IE9+版本：都指的是下一个节点（包括标签、空文档和换行节点）。
-
IE678版本：指下一个元素节点（标签）。
（2）nextElementSibling：
- 火狐、谷歌、IE9+版本：都指的是下一个元素节点（标签）。
总结：为了获取下一个元素节点，我们可以这样做：在IE678中用nextSibling，在火狐谷歌IE9+以后用nextElementSibling，于是，综合这两个属性，可以这样写：
下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling
2、前一个节点 | 前一个元素节点：
previous的中文是：前一个。
（1）previousSibling：
-
火狐、谷歌、IE9+版本：都指的是前一个节点（包括标签、空文档和换行节点）。
-
IE678版本：指前一个元素节点（标签）。
（2）previousElementSibling：
- 火狐、谷歌、IE9+版本：都指的是前一个元素节点（标签）。
总结：为了获取前一个元素节点，我们可以这样做：在IE678中用previousSibling，在火狐谷歌IE9+以后用previousElementSibling，于是，综合这两个属性，可以这样写：
前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling
3、补充：获得任意一个兄弟节点：
节点自己.parentNode.children[index]; //随意得到兄弟节点
获取单个的子节点
**1、第一个子节点 | 第一个子元素节点**：
（1）firstChild：
- 火狐、谷歌、IE9+版本：都指的是第一个子节点（包括标签、空文档和换行节点）。
- IE678版本：指第一个子元素节点（标签）。
（2）firstElementChild：
- 火狐、谷歌、IE9+版本：都指的是第一个子元素节点（标签）。
总结：为了获取第一个子元素节点，我们可以这样做：在IE678中用firstChild，在火狐谷歌IE9+以后用firstElementChild，于是，综合这两个属性，可以这样写：
第一个子元素节点 = 节点.firstElementChild || 节点.firstChild
2、最后一个子节点 | 最后一个子元素节点：
（1）lastChild：
-
火狐、谷歌、IE9+版本：都指的是最后一个子节点（包括标签、空文档和换行节点）。
-
IE678版本：指最后一个子元素节点（标签）。
（2）lastElementChild：
- 火狐、谷歌、IE9+版本：都指的是最后一个子元素节点（标签）。
总结：为了获取最后一个子元素节点，我们可以这样做：在IE678中用lastChild，在火狐谷歌IE9+以后用lastElementChild，于是，综合这两个属性，可以这样写：
最后一个子元素节点 = 节点.lastElementChild || 节点.lastChild
获取所有的子节点
（1）childNodes：标准属性。返回的是指定元素的子节点的集合（包括元素节点、所有属性、文本节点）。是W3C的亲儿子。
- 火狐 谷歌等高本版会把换行也看做是子节点。
用法：
子节点数组 = 父节点.childNodes; //获取所有节点。
（2）children：非标准属性。返回的是指定元素的子元素节点的集合。【重要】
- 它只返回HTML节点，甚至不返回文本节点。
- 在IE6/7/8中包含注释节点（在IE678中，注释节点不要写在里面）。
虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。
用法：（用的最多）
子节点数组 = 父节点.children; //获取所有节点。用的最多。
DOM节点的操作（重要）
上一段的内容：节点的访问关系都是属性。
本段的内容：节点的操作都是函数（方法）。
创建节点
格式如下：
新的标签(元素节点) = document.createElement("标签名");
比如，如果我们想创建一个li标签，或者是创建一个不存在的adbc标签，可以这样做：
<script type="text/javascript">
var a1 = document.createElement("li"); //创建一个li标签
var a2 = document.createElement("adbc"); //创建一个不存在的标签
console.log(a1);
console.log(a2);
console.log(typeof a1);
console.log(typeof a2);
</script>
打印结果：
插入节点
插入节点有两种方式，它们的含义是不同的。
方式1：
父节点.appendChild(新的子节点);
解释：父节点的最后插入一个新的子节点。
方式2：
父节点.insertBefore(新的子节点,作为参考的子节点)
解释：
- 在参考节点前插入一个新的节点。
- 如果参考节点为null，那么他将在父节点里面的最后插入一个子节点。
我们可以看到，li标签确实被插入到了box1标签的里面，和box2并列了。
方式2的举例：
我们可以看到，b1标签被插入到了box1标签的里面，和a1标签并列，在a1标签的前面。
特别强调：
关于方式1的appendChild方法，这里要强调一下。比如，现在有下面这样一个div结构：
<div class="box11">
<div class="box12">生命壹号</div>
</div>
<div class="box21">
<div class="box22">永不止步</div>
</div>
上方结构中，子盒子box12是在父亲box11里的，子盒子box22是在父亲box21里面的。现在，如果我调用方法box11.appendChild(box22)，最后产生的结果是：box22会跑到box11中（也就是说，box22不在box21里面了）。这是一个很神奇的事情：
删除节点
格式如下：
父节点.removeChild(子节点);
解释：用父节点删除子节点。必须要指定是删除哪个子节点。
如果我想删除自己这个节点，可以这么做：
node1.parentNode.removeChild(node1);
复制节点（克隆节点）
格式如下：
要复制的节点.cloneNode(); //括号里不带参数和带参数false，效果是一样的。
要复制的节点.cloneNode(true);
括号里带不带参数，效果是不同的。解释如下：
-
不带参数/带参数false：只复制节点本身，不复制子节点。
-
带参数true：既复制节点本身，也复制其所有的子节点。
设置节点的属性
我们可以获取节点的属性值、设置节点的属性值、删除节点的属性。
我们就统一拿下面这个标签来举例：
<img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">
下面分别介绍。
1、获取节点的属性值
方式1：
元素节点.属性名;
元素节点[属性名];
举例：（获取节点的属性值）
<body>
<img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">
<script type="text/javascript">
var myNode = document.getElementsByTagName("img")[0];
console.log(myNode.src);
console.log(myNode.className); //注意，是className，不是class
console.log(myNode.title);
console.log("------------");
console.log(myNode["src"]);
console.log(myNode["className"]); //注意，是className，不是class
console.log(myNode["title"]);
</script>
</body>
上方代码中的img标签，有各种属性，我们可以逐一获取，打印结果如下：
方式2：
元素节点.getAttribute("属性名称");
举例：
console.log(myNode.getAttribute("src"));
console.log(myNode.getAttribute("class")); //注意是class，不是className
console.log(myNode.getAttribute("title"));
打印结果：
方式1和方式2的区别在于：前者是直接操作标签，后者是把标签作为DOM节点。推荐方式2。
2、设置节点的属性值
方式1举例：（设置节点的属性值）
myNode.src = "images/2.jpg" //修改src的属性值
myNode.className = "image2-box"; //修改class的name
方式2：
元素节点.setAttribute(属性名, 新的属性值);
方式2举例：（设置节点的属性值）
myNode.setAttribute("src","images/3.jpg");
myNode.setAttribute("class","image3-box");
myNode.setAttribute("id","你好");
3、删除节点的属性
格式：
元素节点.removeAttribute(属性名);
举例：（删除节点的属性）
myNode.removeAttribute("class");
myNode.removeAttribute("id");
总结：
获取节点的属性值和设置节点的属性值，都有两种方式，但这两种方式是有区别的。
-
方式一的
元素节点.属性和元素节点[属性]:绑定的属性值不会出现在标签上。 -
方式二的
get/set/removeAttribut: 绑定的属性值会出现在标签上。
这其实很好理解，方式一操作的是属性而已，方式二操作的是标签本身。
另外，需要注意的是：这两种方式不能交换使用，get值和set值必须使用用一种方法。
举例：
<body>
<div id="box" title="主体" class="asdfasdfadsfd">我爱你中国</div>
<script>
var div = document.getElementById("box");
//采用方式一进行set
div.aaaa = "1111";
console.log(div.aaaa); //打印结果：1111。可以打印出来，但是不会出现在标签上
//采用方式二进行set
div.setAttribute("bbbb","2222"); //bbbb作为新增的属性，会出现在标签上
console.log(div.getAttribute("aaaa")); //打印结果：null。因为方式一的set，无法采用方式二进行get。
console.log(div.bbbb); //打印结果：undefined。因为方式二的set，无法采用方式一进行get。
</script>
</body>
DOM对象的属性
DOM对象的属性和HTML的标签属性几乎是一致的。例如：src、title、className、href等。
innerHTML和innerText的区别
-
value：标签的value属性。
-
innerHTML：双闭合标签里面的内容（识别标签）。
-
innerText：双闭合标签里面的内容（不识别标签）。（老版本的火狐用textContent）
获取内容举例：
如果我们想获取innerHTML和innerText里的内容，看看会如何：（innerHTML会获取到标签本身，而innerText则不会）
修改内容举例：（innerHTML会修改标签本身，而innerText则不会）
nodeType属性
这里讲一下nodeType属性。
-
nodeType == 1 表示的是元素节点（标签） 。记住：元素就是标签。
-
nodeType == 2 表示是属性节点。
-
nodeType == 3 是文本节点。
nodeType、nodeName、nodeValue
我们那下面这个标签来举例：
<div id="box" value="111">
生命壹号
</div>
上面这个标签就包含了三种节点：
-
元素节点（标签）
-
属性节点
-
文本节点
获取这三个节点的方式如下：
var element = document.getElementById("box1"); //获取元素节点（标签）
var attribute = element.getAttributeNode("id"); //获取box1的属性节点
var txt = element.firstChild; //获取box1的文本节点
var value = element.getAttribute("id"); //获取id的属性值
console.log(element);
console.log("--------------");
console.log(attribute);
console.log("--------------");
console.log(txt);
console.log("--------------");
console.log(value);
打印结果如下：
既然这三个都是节点，如果我想获取它们的nodeType、nodeName、nodeValue，代码如下：
var element = document.getElementById("box1"); //获取元素节点（标签）
var attribute = element.getAttributeNode("id"); //获取box1的属性节点
var txt = element.firstChild; //获取box1的文本节点
//获取nodeType
console.log(element.nodeType); //1
console.log(attribute.nodeType); //2
console.log(txt.nodeType); //3
console.log("--------------");
//获取nodeName
console.log(element.nodeName); //DIV
console.log(attribute.nodeName); //id
console.log(txt.nodeName); //#text
console.log("--------------");
//获取nodeValue
console.log(element.nodeValue); //null
console.log(attribute.nodeValue); //box1
console.log(txt.nodeValue); //生命壹号
打印结果如下：
文档的加载
浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行。如果将script标签写到页面的上边，在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载，会导致无法获取到DOM对象。
onload 事件：
onload 事件会在整个页面加载完成之后才触发。为 window 绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了。
代码举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<script type="text/javascript">
// 【方式一：先加载，后执行】这段 js 代码是写在 <head> 标签里的，所以建议放在 window.onload 里面。
window.onload = function() {
// 获取id为btn的按钮
var btn = document.getElementById("btn");
// 为按钮绑定点击事件
btn.onclick = function() {
alert("hello");
};
};
</script>
</head>
<body>
<button id="btn">点我一下</button>
<script type="text/javascript">
// 【方式二：后加载，后执行】这段 js 代码是写在 <body> 标签里的，代码的位置是处在页面的下方。这么做，也可以确保：在页面加载完毕后，再执行 js 代码。
// 获取id为btn的按钮
var btn = document.getElementById("btn");
// 为按钮绑定点击事件
btn.onclick = function() {
alert("hello");
};
</script>
</body>
</html>
event 有很多属性，比如：
DOM事件流
事件传播的三个阶段是：事件捕获、事件冒泡和目标。
-
事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标 target。（从祖先元素往子元素查找，DOM树结构）。在这个过程中，事件相应的监听函数是不会被触发的。
-
事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。
-
事件冒泡阶段：事件从事件目标 target 开始，往上冒泡直到页面的最上一级标签。（从子元素到祖先元素冒泡）
如下图所示：
PS：这个概念类似于 Android 里的 touch 事件传递。
**说明**：捕获阶段，事件依次传递的顺序是：window --> document --> html--> body --> 父元素、子元素、目标元素。
PS1：第一个接收到事件的对象是 **window**（有人会说body，有人会说html，这都是错误的）。
PS2：JS中涉及到DOM对象时，有两个对象最常用：window、doucument。它们俩也是最先获取到事件的。
事件冒泡
事件冒泡: 当一个元素上的事件被触发的时候（比如说鼠标点击了一个按钮），同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
height: 5000px;
}
img {
position: absolute;
padding: 10px 0;
border: 1px solid #ccc;
cursor: pointer;
background-color: yellowgreen;
}
</style>
</head>
<body>
<img src="" width="100" height="100"/>
<script>
//需求：点击页面的任何地方，图片跟随鼠标移动到点击位置。
//思路：获取鼠标在页面中的位置，然图片缓慢运动到鼠标点击的位置。
// 兼容ie67做pageY和pageX；
// 原理： 鼠标在页面的位置 = 被卷去的部分+可视区域部分。
//步骤：
//1.老三步。
//2.获取鼠标在页面中的位置。
//3.利用缓动原理，慢慢的运动到指定位置。（包括左右和上下）
//1.老三步。
var img = document.getElementsByTagName("img")[0];
var timer = null;
var targetx = 0;
var targety = 0;
var leaderx = 0;
var leadery = 0;
//给整个文档绑定点击事件获取鼠标的位置。
document.onclick = function (event) {
//新五步
//兼容获取事件对象
event = event || window.event;
//鼠标在页面的位置 = 被卷去的部分+可视区域部分。
var pagey = event.pageY || scroll().top + event.clientY;
var pagex = event.pageX || scroll().left + event.clientX;
targety = pagey - 30;
targetx = pagex - 50;
//要用定时器，先清定时器
clearInterval(timer);
timer = setInterval(function () {
//为盒子的位置获取值
leaderx = img.offsetLeft;
//获取步长
var stepx = (targetx - leaderx) / 10;
//二次处理步长
stepx = stepx > 0 ? Math.ceil(stepx) : Math.floor(stepx);
leaderx = leaderx + stepx;
//赋值
img.style.left = leaderx + "px";
//为盒子的位置获取值
leadery = img.offsetTop;
//获取步长
var stepy = (targety - leadery) / 10;
//二次处理步长
stepy = stepy > 0 ? Math.ceil(stepy) : Math.floor(stepy);
leadery = leadery + stepy;
//赋值
img.style.top = leadery + "px";
//清定时器
if (Math.abs(targety - img.offsetTop) <= Math.abs(stepy) && Math.abs(targetx - img.offsetLeft) <= Math.abs(stepx)) {
img.style.top = targety + "px";
img.style.left = targetx + "px";
clearInterval(timer);
}
}, 30);
}
</script>
</body>
</html>
通俗来讲，冒泡指的是：子元素的事件被触发时，父盒子的同样的事件也会被触发。取消冒泡就是取消这种机制。
不是所有的事件都能冒泡
以下事件不冒泡：blur、focus、load、unload、onmouseenter、onmouseleave。意思是，事件不会往父元素那里传递。
我们检查一个元素是否会冒泡，可以通过事件的以下参数：
event.bubbles
如果返回值为true，说明该事件会冒泡；反之则相反。
阻止冒泡的兼容代码如下：
box3.onclick = function (event) {
alert("child");
//阻止冒泡
event = event || window.event;
if (event && event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
构造函数的扩展
callback && callback()的含义
callback && callback()
含义是：如果callback存在，则执行callback()函数。
这个 callback 通常作为函数的参数使用。举例：
function foo(callback) {
{
// do something
}
callback && callback() // 不传 callback 参数，则不会执行 callback() 函数
}
foo(); // 只执行do something中的代码
foo(callback);//callback是另一个函数，将此函数传入 foo，将会执行callback()
事件委托的参考链接：
7244
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
