【Web前端学习系列03-1】—JavaScript入门
仅为博主自用学习笔记，本篇学习平台：http://www.lvyestudy.com/javascript
推荐的学习路线:
HTML→CSS→JavaScript→jQuery→HTML5→CSS3→ES6→Vue.js→webpack→Node.js
JavaScript入门
简介
前端最核心的3个技术是HTML、CSS和JavaScript。
HTML用于控制网页的结构，CSS用于控制网页的外观，而JavaScript控制着网页的行为。
单纯只有HTML和CSS的页面一般只供用户浏览，而JavaScript的出现，使得用户可以与页面进行交互（如定义各种鼠标效果），让网页实现更多绚丽的效果。
HTML和CSS只是描述性的语言，单纯使用这两个没办法做出那些特效，而必须使用编程的方式来实现。JS，是一种嵌入到HTML页面中的编程语言，由浏览器一边解释一边执行。
JavaScript与Java
JavaScript最初的确是受Java启发而开始设计的，而且设计的目的之一就是“看上去像Java”，因此语法上有不少类似之处，JavaScript很多名称和命名规则也借自Java。
JavaScript和Java虽然名字相似，但是本质上是不同的，主要有以下2个方面。
（1）JavaScript往往都是在网页中使用，而Java却可以在软件、网页、手机App等各个领域中使用。
（2）从本质上讲，Java是一门面向对象的语言，而JavaScript更像是一门函数式编程语言。
我的页面加入了JavaScript特效，那这个页面是静态页面，还是动态页面呢？
静态页面和动态页面的区别在于：是否与服务器进行数据交互。或者简单来说，是否用到了后端技术（如PHP、JSP、ASP.NET）。
即使你的页面用了JavaScript，它也不一定是动态页面，除非你还用到了后端技术。
JavaScript引入方式
想要在HTML中引入JavaScript，一般有3种方式。
（1）外部JavaScript
（2）内部JavaScript
（3）元素事件JavaScript
跟CSS的3种引入方式（外部样式表、内部样式表、行内样式表）是非常相似的。
外部JavaScript
指的是把HTML代码和JavaScript代码单独放在不同文件中，然后在HTML文档中使用“script标签”来引入JavaScript代码。
外部JavaScript是最理想的JavaScript引入方式。
内部JavaScript
指的是把HTML代码和JavaScript代码放在同一个文件中。其中JavaScript代码写在标签对内。
同样的，内部JavaScript文件不仅可以在head中引入，也可以在body中引入。一般情况下，我们都是在head中引入。
<script></script>
是一种简写形式，它其实等价于：
<script type="text/javascript">
……
</script>
一般情况下，使用简写形式比较多。对于上面这种写法，我们也需要了解一下，因为不少地方采用上面这种旧写法。
元素属性JavaScript
指的是在元素的“事件属性”中直接编写JavaScript或调用函数。
<script>
document.write("绿叶学习网，给你初恋般的感觉~");
</script>
<body>
<input type="button" value="按钮" onclick="alert('绿叶学习，给你初恋般的感觉')"/>
</body>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function alertMes()
{
alert("绿叶学习网，给你初恋般的感觉");
}
</script>
</head>
<body>
<input type="button" value="按钮" onclick="alertMes()"/>
</body>
语法基础
变量与常量
变量
在JavaScript中，变量指的是一个可以改变的量。也就是说，变量的值在程序运行过程中是可以改变的。
在JavaScript中，给一个变量命名，我们需要遵循以下两个方面的原则。
（1）变量由字母、下划线、美元符号或数字组成，并且第一个字母必须是“字母、下划线或$”。
（2）变量不能是系统关键字和保留字。
JavaScript关键字和保留字如下表所示。
JavaScript关键字
break else new typeof
case false null var
catch for switch void
continue function this while
default if throw with
delete in true
do instanceof try
ECMA-262标准的保留字
abstract enum int short
boolean export interface static
byte extends long super
char final native synchronized
class float package throws
const goto private transient
debugger implements protected volatile
double import public
浏览器定义的保留字
alert eval location open
array focus math outerHeight
blur funtion name parent
boolean history navigator parseFloat
date image number regExp
document isNaN object status
escape length onLoad string
变量的命名一定要区分大小写，例如变量“age”与变量“Age”在JavaScript中就是两个不同的变量。
变量的声明与赋值
var 变量名 = 值;
var a=10,b=20,c=30;
常量
在JavaScript中，我们可以把常量看成是一种特殊的变量，之所以特殊，是因为它的值是不会变的。
一般情况下，常量名全部大写。
var DEBUG = 1
数据类型
在JavaScript中，数据类型可以分为两种：
一种是“基本数据类型”；
另外一种是“引用数据类型”。
基本数据类型只有一个值，而引用数据类型可以含有多个值。
基本数据类型：数字、字符串、布尔值、未定义值和空值。
引用数据类型：数组
基本数据类型
五种，数字、字符串、布尔值、未定义值和空值。
数字
数字是最基本的数据类型。
JavaScript中的数字是不区分“整型（int）”和“浮点型（float）”的。小伙伴们记住这一句话就可以了：在JavaScript中，所有变量都是用var声明。
字符串
在JavaScript中，字符串都是用英文单引号或英文双引号（注意都是英文）括起来的。
单引号括起来的字符串中可以包含双引号
双引号括起来的字符串中可以包含单引号
布尔值
布尔类型的值只有2个：true和false。
未定义值
在JavaScript中，未定义值，指的是如果一个变量虽然已经用var来声明了，但是并没有对这个变量进行赋值，此时该变量的值就是“未定义值”。其中，未定义值用undefined表示。
空值
在JavaScript中，空值用null表示。如果一个变量的值等于null，如“var n = null”，则表示系统没有给这个变量n分配内存空间。
运算符
算数运算符
+ 加 10+5 //返回15
－ 减 10-5 //返回5
* 乘 10*5 //返回50
/ 除 10/5 //返回2
% 求余 10%4 //返回2
++ 自增 var i=10;i++; //返回11
– – 自减 var i=10;i– –; //返回9
加法运算符
数字 + 数字 = 数字
字符串 + 字符串 = 字符串
字符串 + 数字 = 字符串
自增运算符
i++指的是在使用i之后，再让i的值加上1。
“++i”指的是在使用i之前，先让i的值加上1。
自减运算符 同上
赋值运算符
= var str=“绿叶学习网”
+= var a+=b等价于var a=a+b
-= var a-=b等价于var a=a-b
*= var a*=b等价于var a=a*b
/= var a/=b等价于var a=a/b
比较运算符
> 大于 2>1 //返回true
< 小于 2<1 //返回false
>= 大于等于 2>=2 //返回true
<= 小于等于 2<=2 //返回true
== 等于 1==2 //返回false
!= 不等于 1!=2 //返回true
逻辑运算符
&& “与”运算
|| “或”运算
! “非”运算
条件运算符
也叫“三目运算符”。在JavaScript中，条件运算符用英文问号（?）表示。
var a = 条件 ? 表达式1 : 表达式2;
当条件为true时，我们选择的是“表达式1”，也就是“var a=表达式1”；
当条件为false时，我们选择的是“表达式2”，也就是“var a=表达式2”。
类型转换
指的是将“一种数据类型”转换为“另外一种数据类型”。
在JavaScript中，共有2种类型转换。
（1）隐式类型转换
（2）显式类型转换
隐式类型转换，指的是JavaScript自动进行的类型转换。
显式类型转换，指的是需要我们手动用代码强制进行的类型转换。
显式类型转换
在JavaScript中，想要将字符串转换为数字，可以有2种方式。
（1）Number()
（2）parseInt()和parseFloat()
Number()方法可以将任何“数字型字符串”转换为数字。那什么是数字型字符串呢？像"123"、“3.1415”，这些只有数字的字符串就是数字型字符串,而"hao123"、"100px"等就不是。
parseInt()和parseFloat是提取“首字母为数字的任意字符串”中的数字，其中，parseInt()提取的是整数部分，parseFloat()不仅会提取整数部分，还会提取小数部分。
<script>
document.write("parseInt('123')：" + parseInt("123") + "<br/>");
document.write("parseInt('3.1415')：" + parseInt("3.1415") + "<br/>");
document.write("parseInt('hao123')：" + parseInt("hao123") + "<br/>");
document.write("parseInt('100px')：" + parseInt("100px"));
</script>
parseInt()会从左到右进行判断，如果第1个字符是数字，则继续判断，直到出现非数字为止（小数点也是非数字）；如果第1个字符是非数字，则直接返回NaN。
对于parseInt()来说，如果第1个字符不是数字，则返回NaN。
但是当第1个字符是加号（+）或减号（-），也就是非数字，parseInt()同样也是可以转换的。因为加号和减号在数学上其实就是表示一个数的正和负，所以parseInt()可以接受第1个字符是加号或减号。同样的，parseFloat()也有这个特点。
parseFloat()跟parseInt()非常类似，都是从第1个字符从左到右开始判断。如果第1个字符是数字，则继续判断，直到出现除了数字和小数点之外的字符为止；如果第1个字符是非数字，则直接返回NaN。
数字转换为字符串
（1）与空字符串相加
（2）toString()
var a = 2018 + "";
如果想要将一个数字转换为字符串，而又不增加多余的字符，我们可以将这个数字加上一个空字符串。
var a = 2018;
var b = a.toString() + 1000;
在实际开发中，如果想要将数字转换为字符串来用，我们很少使用toString()方法，而更多使用隐式类型转换的方式（也就是直接跟一个字符串相加）就行了。
转义字符
转义字符，指的是在默认情况下某些字符在浏览器是无法显示的，不过为了能够让这些字符能够显示出来，我们可以使用这些字符对应的转义字符来代替。
常见的转义字符：
’ 英文单引号
" 英文双引号
\n 换行符
字符串的换行
（1）如果是在document.write()中换行，则应该用：<br/>
（2）如果是在alert()中换行，则应该用：\n
document.write("绿叶，<br/>初恋般的感觉~");
alert("绿叶，\n初恋般的感觉");
\n是转义字符，一般用于对话框文本的换行。这里如果用
就无法实现了。
注释
HTML注释、CSS注释和JavaScript注释是不一样的。
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*这是CSS注释*/
body{color:Red;}
</style>
<script>
//这是JavaScript注释（单行）
/* 多行注释 */
document.write("不要把无知当个性");
</script>
</head>
<body>
<!--这是HTML注释-->
<div></div>
</body>
流程控制
流程控制，是任何一门编程语言都有的一个语法，指的是控制程序按照怎样的顺序执行的。
在JavaScript中，共有3种流程控制方式（其实任何语言也只有这3种）。
顺序结构
选择结构
循环结构
选择结构
选择结构有3种：单向选择、双向选择以及多向选择。
在JavaScript中，选择结构共有两种方式：一种是if语句；另外一种是switch语句。
if
（1）单向选择：if…
（2）双向选择：if…else…
（3）多向选择：if…else if…else…
（4）if语句的嵌套
switch
switch(判断值)
{
case 取值1:
语块1;break;
case 取值2:
语块2;break;
……
case 取值n:
语块n;break;
default:
语句块n+1;
}
我们使用default来定义默认情况
循环结构
while
do while
do…while语句首先是无条件执行循环体一次，然后再判断是否符合条件。
如果符合条件，则重复执行循环体；如果不符合条件，则退出循环。
do…while语句结尾处括号后有一个分号（;），该分号一定不能省略
在实际开发中，我们一般都是用while语句，而不是用do…while语句
for
初识函数
函数一般是在两种种情况下使用：
一种是“重复使用的功能”，
另外一种是“特定的功能”。
函数的定义
函数可以分两种：一种是“没有返回值的函数”；另外一种就是“有返回值的函数”。
函数用function来定义
对于函数的参数，是可以省略的（即不写），当然也可以是1个、2个或n个。如果是多个参数，则参数之间用英文逗号（,）隔开。此外，函数参数的个数，一般取决于你实际开发的需要。
function addSum(a,b){…}
是函数的定义，这里的a、b是参数，也叫“形参”。
addSum(1,2)是函数的调用，这里的1、2也是参数，叫“实参”。
函数的调用，其实就是把“实参”（即1和2）传递给“形参”（即a和b），然后把函数执行一遍。
全局变量和局部变量
全局变量一般在主程序中定义，其有效范围是从定义开始，一直到整个程序结束为止。全局变量在任何地方都可以用。
局部变量一般在函数中定义，其有效范围只限于在函数之中，函数执行完了就没了。局部变量只能在函数中使用，函数之外是不能使用函数之内定义的变量的。
函数的调用
直接调用
在表达式中调用
在超链接中调用
在超链接中调用，指的是在a元素的href属性中使用“javascript:函数名”的形式来调用函数。当用户点击超链接时，就会调用该函数。
<a href="javascript:函数名"></a>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function expressMes()
{
alert("她：我爱helicopter。\n我：oh~my，= =?!");
}
</script>
</head>
<body>
<a href="javascript:expressMes()">表白对话</a>
</body>
这里使用转义字符\n来实现alert()方法中文本的换行。
在事件中调用
JavaScript是基于事件的一门语言，像鼠标移动是一个事件、鼠标单击也是一个事件，类似的事件很多。当一个事件产生的时候，我们就可以调用某个函数来针对这个事件作出响应。
<head>
<meta charset="utf-8" />
<title></title>
<script>
function alertMes()
{
alert("绿叶，给你初恋般的感觉~");
}
</script>
</head>
<body>
<input type="button" onclick="alertMes()" value="提交" />
</body>
内置函数
在JavaScript中，函数还可以分为“自定义函数”和“内置函数”。
内置函数
parseInt() 提取字符串中的数字，只限提取整数
parseFloat() 提取字符串中的数字，可以提取小数
isFinite() 判断某一个数是否是一个有限数值
isNaN() 判断一个数是否是NaN值
escape() 对字符串进行编码
unescape() 对字符串进行解码
eval() 把一个字符串当做一个表达式一样去执行
内置对象
在JavaScript中，对象是非常重要的知识点。对象可以分为两种：一种是“自定义对象”；另外一种是“内置对象”。
自定义对象，指的是需要我们自己定义的对象，跟“自定义函数”是一样的道理；
内置对象，指的是不需要我们自己定义（即系统已经定义好的）、可以直接使用的对象，跟“内置函数”也是一样的道理。
在JavaScript中，常用的内置对象有4种。
（1）字符串对象：String
（2）数组对象：Array
（3）日期对象：Date
（4）数值对象：Math
字符串对象
获取字符串长度（属性）
字符串名.length
length属性:调用对象的属性，我们用的是点运算符（.），可以将其理解为“的”，例如str.length可以看成是“str的length（长度）”。
大小写转换（方法）
字符串名.toLowerCase()
字符串名.toUpperCase()
调用的方法，不过属性和方法不太一样，方法后面需要加上小括号()，而属性则不需要。
s = s.toLowerCase();
获取某一个字符（方法）
字符串名.charAt(n)
n是整数，表示字符串中第n+1个字符。注意，字符串第1个字符的下标是0，第2个字符的下标是1，……，第n个字符的下标是n-1，以此类推。
<script>
var str = "how are you doing？";
//定义一个空字符串，用来保存字符
var result = "";
for (var i = 0; i < str.length; i++)
{
if (str.charAt(i) < "s")
{
result += str.charAt(i) + ",";
}
}
document.write(result);
</script>
截取字符串
使用substring()方法来截取字符串的某一部分。
字符串名.substring(start, end)
start表示开始位置，end表示结束位置。start和end都是整数，一般都是从0开始，其中end大于start。
substring(start,end)截取范围为：[start,end)，也就是包含start，不包含end。
其中，end可以省略。当end省略时，截取的范围为：start到结尾。
一定要注意，截取的下标是从0开始的，也就是说0表示第1个字符，1表示第2个字符……n表示第n+1个字符。对于字符串操作来说，凡是涉及下标，都是从0开始。
替换字符串
使用replace()方法来用一个字符串替换另外一个字符串的某一部分。
字符串名.replace(原字符串, 替换字符串)
字符串名.replace(正则表达式, 替换字符串)
<script>
var str = "I am loser, you are loser, all are loser.";
var str_new = str.replace(/loser/g, "hero");
document.write(str_new);
</script>
str.replace(/loser/g, “hero”)表示使用正则表达式/loser/g结合替换字符串"hero"，来将字符串str中的所有字符“loser”替换成“hero”。
str.replace(“loser”, “hero”),只会替换第1个“loser”。
在实际开发中，当我们直接使用字符串无法实现时，记得考虑使用正则表达式。
分割字符串
使用split()方法把一个字符串分割成一个数组，这个数组存放的是原来字符串的所有字符片段。有多少个片段，数组元素个数就是多少。
字符串名.split("分割符")
分割符可以是一个字符、多个字符或一个正则表达式。
此外，分割符并不作为返回数组元素的一部分。
split(" “)和split(”")是不一样的！前者两个引号之间是有空格的，所以表示用空格作为分割符来分割。后者两个引号之间是没有空格的，所以可以用来分割字符串每一个字符。
检索字符串的位置
indexOf()方法来找出“某个指定字符串”在字符串中首次出现的下标位置
lastIndexOf()来找出“某个指定字符串”在字符串中最后出现的下标位置
字符串名.indexOf(指定字符串)
字符串名.lastIndexOf(指定字符串)
如果字符串中不包含“指定字符串”，indexOf()或lastIndexOf()就会返回-1。
indexOf()和lastIndexOf()不仅可以用于检索字符串，还可以用于检索单个字符。
数组对象
数组的创建
创建数组，常见的有两种形式：一种是“完整形式”；另外一种是“简写形式”。
var 数组名 = new Array(元素1, 元素2, ……, 元素n); //完整形式
var 数组名 = [元素1, 元素2, ……, 元素n]; //简写形式
简写形式，是使用中括号[]括起来的。它其实就是一种快捷方式，在编程语言中一般又被称为“语法糖”。
在实际开发中，我们更倾向于使用简写形式来创建一个数组。
var arr = []; //创建一个空数组
var arr = ["HTML","CSS", "JavaScript"]; //创建一个包含3个元素的数组
获取数组长度
数组名.length
length属性一般都是结合for循环来遍历数组中的每一个元素。
截取数组部分
使用slice()方法来获取数组的某一部分。slice，就是“切片”的意思。
数组名.slice(start, end);
start表示开始位置，end表示结束位置。start和end都是整数，都是从0开始，其中end大于start。
slice(start,end)截取范围为：[start,end)，也就是“包含start但不包含end”。其中，end可以省略。当end省略时，获取的范围为：start到结尾。slice()方法跟上一章学的substring()非常像。
添加数组元素
使用unshift()方法在数组开头添加新元素，并且可以得到一个新的数组（也就是原数组变了）。
数组名.unshift(新元素1, 新元素2, ……, 新元素n)
“新元素1, 新元素2, ……, 新元素n”表示在数组开头添加的新元素。
在数组结尾添加元素：push()
数组名.push(新元素1, 新元素2, ……, 新元素n)
当我们不知道数组有多少个元素的时候，我们就没法用下标这种方式来给数组添加新元素。此时，push()方法就相当有用了，因为它不需要知道你有多少个元素，它的目的就是在你数组的最后面添加新元素。
删除数组元素
删除数组中第一个元素：shift()
使用shift()方法来删除数组中的第一个元素，并且可以得到一个新的数组（也就是原数组变了）。
数组名.shift()
删除数组最后一个元素：pop()
使用pop()方法来删除数组的最后一个元素，并且可以得到一个新数组（也就是原数组变了）。
数组名.pop()
unshift()、push()、shift()、pop()这4个元素都会改变数组的结构，因此数组的长度（length属性）也会改变
数组大小比较
sort()方法来对数组中所有元素进行大小比较，然后按从大到小或者从小到大进行排序。
数组名.sort(函数名)
函数名”是定义数组元素排序的函数的名字。
<script>
//定义一个升序函数
function up(a, b)
{
return a - b;
}
//定义一个降序函数
function down(a, b)
{
return b - a;
}
//定义数组
var arr = [3, 9, 1, 12, 50, 21];
arr.sort(up);
document.write("升序：" + arr.join("、") + "<br/>");
arr.sort(down);
document.write("降序：" + arr.join("、"));
</script>
数组颠倒顺序
使用reverse()方法来实现数组中所有元素的反向排列，也就是颠倒数组元素的顺序。
数组名.reverse();
将数组元素连接成字符串
使用join()方法来将数组中的所有元素连接成一个字符串。
数组名.join("连接符");
连接符是可选参数，用于指定连接元素之间的符号。默认情况下，则采用英文逗号（,）作为连接符来连接。
<script>
var arr = ["HTML", "CSS", "JavaScript", "jQuery"];
document.write(arr.join() + "<br/>");
document.write(arr.join("*"));
</script>
join("")：实现字符之间没有任何东西。
join(" “)和join(”")是不一样的！前者两个引号之间是有空格的，所以表示用空格作为连接符来连接，而后者两个引号之间是没有空格的。
<script>
var str1 = "绿*叶*学*习*网";
var str2 = str1.split("*").join("#");
document.write(str2);
</script>
str1.split("*")表示以星号（*）作为分割符来分割字符串str1，从而得到一个数组，之后再用数组的join()方法，将数组元素连接成字符串。
可以分两步来写，等价于：
var arr = str1.split("*");
var str2 = arr.join("#");
时间对象
在JavaScript中，我们可以使用时间对象Date来处理时间。
var 日期对象名 = new Date();
创建一个日期对象，必须使用new关键字。
Date对象的方法有很多，主要分为两大类：getXxx()和setXxx()。
getFullYear() 获取年份，取值为4位数字
getMonth() 获取月份，取值为0（一月）到11（十二月）之间的整数
getDate() 获取日数，取值为1~31之间的整数
getHours() 获取小时数，取值为0~23之间的整数
getMinutes() 获取分钟数，取值为0~59之间的整数
getSeconds() 获取秒数，取值为0~59之间的整数
setFullYear() 可以设置年、月、日
setMonth() 可以设置月、日
setDate() 可以设置日
setHours() 可以设置时、分、秒、毫秒
setMinutes() 可以设置分、秒、毫秒
setSeconds() 可以设置秒、毫秒
虽然时间对象Date看似用途挺多，但是在实际开发中却用得比较少，除非是在特定领域，如电影购票、餐饮订座。
操作年月日
获取年月日
在JavaScript中，我们可以使用getFullYear()、getMonth()和getDate()方法分别来获取当前时间的年、月、日。
getFullYear() 获取年份，取值为4位数字
getMonth() 获取月份，取值为0（一月）到11（十二月）之间的整数（实际月份需要+1）
getDate() 获取日数，取值为1~31之间的整数
设置年月日
setFullYear()可以用来设置年、月、日。
setMonth()可以用来设置月、日。
setDate()可以用来设置日。
时间对象.setFullYear(year,month,day);
时间对象.setMonth(month, day);
时间对象.setDate(day);
第一个参数必选，后面都是可选。
getFullYear()只能获取年，但setFullYear()却可以同时设置年、月、日。同理，setMonth()和setDate()也有这个特点。
操作时分秒
获取时分秒
getHours() 获取小时数，取值为0~23之间的整数
getMinutes() 获取分钟数，取值为0~59之间的整数
getSeconds() 获取秒数，取值为0~59之间的整数
设置时分秒
setHours()可以用来设置时、分、秒、毫秒。
setMinutes()可以用来设置分、秒、毫秒。
setSeconds()可以用来设置秒、毫秒。
时间对象.setHours(hour, min, sec, millisec);
时间对象.setMinutes( min, sec, millisec);
时间对象.setSeconds(sec, millisec);
以setHours为例：
hour是必选参数，表示时，取值为0~23之间的整数。
min是可选参数，表示分，取值为0~59之间的整数。
sec是可选参数，表示秒，取值为0~59之间的整数。
millisec是可选参数，表示毫秒，取值为0~999之间的整数。
getHours()只能获取小时数，但setHours()却可以同时设置时、分、秒、毫秒。同理，setMinutes()和setSeconds()也有这个特点。
获取星期几
使用getDay()方法来获取表示今天是星期几的一个数字。
时间对象.getDay();
getDay()返回一个数字，其中0表示星期天，1表示星期一……6表示星期六。
getDay()方法返回的是一个数字，如果我们想要将数字转换为中文。
<script>
var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
var d = new Date();
document.write("今天是" + weekday[d.getDay()]);
</script>
getDay()方法返回的数字作为数组的下标，这样就可以通过下标的形式来获取星期几。
数学对象
Math对象跟其他对象不一样，我们不需要使用new关键字来创造，而是直接使用它的属性和方法就行。
Math.属性
Math.方法
Math对象的属性
PI 圆周率 π
LN2 2的自然对数 ln(2)
LN10 10的自然对数 ln(10)
LOG2E 以2为底的e的对数 log2e
LOG10E 以10为底的e的对数 log10e
SORT2 2的平方根 √2
SORT1_2 2的平方根的倒数 1/√2
Math的属性都是常量，所以它们都是大写的。对于Math对象的属性，我们只需要掌握Math.PI这一个就够了，其他的不需要去记忆，等需要的时候再回这里查一下即可。
在实际开发中，所有角度都是以“弧度”为单位的，例如180°就应该写成Math.PI，而360°就应该写成Math.PI*2，以此类推。
在实际开发中推荐这种写法：“度数 * Math.PI/180”，因为这种写法可以让我们一眼就能看出角度是多少。
120*Math.PI/180 //120°
150*Math.PI/180 //150°
上面这个技巧非常重要，在以后的各种开发（如JavaScript动画、HTML5 Canvas动画等）中用得也非常多.
对于圆周率，有些小伙伴喜欢用数字（如3.1415）来表示。这种是不精确的，而且会导致计算误差。正确的方法应该是使用Math.PI来表示。
Math对象的方法
max(a,b,…,n) 返回一组数中的最大值
min(a,b,…,n) 返回一组数中的最小值
sin(x) 正弦
cos(x) 余弦
tan(x) 正切
asin(x) 反正弦
acos(x) 反余弦
atan(x) 反正切
atan2(y, x) 反正切（注意y、x顺序）
floor(x) 向下取整
ceil(x) 向上取整
random() 生成随机数
abs(x) 返回x的绝对值
sqrt(x) 返回x的平方根
log(x) 返回x的自然对数（底为e）
pow(x,y) 返回x的y次幂
exp(x) 返回e的指数
最大值与最小值
使用max()方法求出一组数中的最大值，也可以使用min()方法求出一组数组中的最小值。
Math.max(a, b, …, n);
Math.min(a, b, …, n);
找出一组数的最大值与最小值，大多数的人想到的是使用冒泡排序法来实现，却没想到JavaScript还有Math.max()和Math.min()这两个简单的方法。
取整运算
向下取整：floor()
使用floor()方法对一个数进行向下取整。所谓“向下取整”，指的是返回小于或等于指定数的“最近的那个整数”。
Math.floor(x)
向上取整：ceil()
使用ceil()方法对一个数进行向上取整。所谓“向上取整”，指的是返回大于或等于指定数的“最近的那个整数”
Math.ceil(x)
三角函数
sin(x) 正弦
cos(x) 余弦
tan(x) 正切
asin(x) 反正弦
acos(x) 反余弦
atan(x) 反正切
atan2(y, x) 反正切（注意y、x顺序）
atan2(y, x)跟atan(x)是不一样的，atan2(y, x)能够精确判断角度对应哪一个角，而atan(x)不能。
因此在高级动画开发时，我们大多数用的是atan2(y, x)，基本用不到atan(x)。
常用的有：sin()、cos()和atan2()。
生成随机数
在JavaScript中，我们可以使用random()方法来生成0-1之间的一个随机数。random，就是“随机”的意思。特别注意一下，这里的0~1是只包含0不包含1的，也就是[0, 1)。
Math.random()
随机生成某个范围内的“任意数”
（1）Math.random()*m
表示生成0~m之间的随机数，例如“Math.random()*10”表示生成0-10之间的随机数。
（2）Math.random()*m+n
表示生成n~m+n之间的随机数，例如“Math.random()*10+8”表示生成8-18之间的随机数。
（3）Math.random()*m-n
表示生成-n~m-n之间的随机数，例如“Math.random()*10-8”表示生成-8-2之间的随机数。
（4）Math.random()*m-m
表示生成-m~0之间的随机数，例如“Math.random()*10-10”表示生成-10-0之间的随机数。
随机数生成某个范围内的“整数”
（1）Math.floor(Math.random()*(m+1))
生成0到m之间的随机整数
（2）Math.floor(Math.random()*m)+1
生成1到m之间的随机整数（包括1和m）
（3）Math.floor(Math.random()*(m-n+1))+n
生成n到m之间的随机整数（包括n和m）
DOM基础
DOM是什么
Document Object Model（文档对象模型）
在实际开发中，我们有时候需要实现鼠标移到某个元素上面时就改变颜色，或者动态添加元素或者删除元素等。其实这些效果就是通过DOM提供的方法来实现的。
简单来说，DOM里面有很多方法，我们通过它提供的方法来操作一个页面中的某个元素。
DOM操作，可以简单理解成“元素操作”。
DOM采用的是“树形结构”，用“树节点”形式来表示页面中的每一个元素。
<html>
<head>
<meta charset="utf-8" />
<title></title>
<body>
<h1>绿叶学习网</h1>
<p>绿叶学习网是一个……</p>
<p>绿叶学习网成立于……</p>
</body>
</html>
每一个元素就是一个节点，而每一个节点就是一个对象。也就是说，我们在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作
节点类型
DOM节点共有12种类型，不过常见的只有3种（其他的不用管）
（1）元素节点
（2）属性节点
（3）文本节点
<div id="wrapper">绿叶学习网</div>
实际上，这里有3个节点。
JavaScript会把元素、属性以及文本当作不同的节点来处理。
表示元素的叫做“元素节点”，表示属性的叫做“属性节点”，而表示文本的当然也就叫做“文本节点”。
很多人认为节点就一定等于元素，这样的理解是错的，因为节点有好多种。总而言之：节点跟元素是不一样的概念，节点是包括元素的。
使用nodeType属性来判断一个节点的类型。
不同节点的nodeType属性值
元素节点 1
属性节点 2
文本节点 3
nodeType的值是一个数字
重点总结：
（1）一个元素就是一个节点，这个节点称之为“元素节点”。
（2）属性节点和文本节点看起来像是元素节点的一部分，但实际上，它们是独立的节点，并不属于元素节点。
（3）只有元素节点才可以拥有子节点，属性节点和文本节点都无法拥有子节点.
获取元素
获取元素，准确来说，就是获取“元素节点（注意不是属性节点或文本节点）”。
对于一个页面，我们想要对某个元素进行操作，就必须通过一定的方式来获取该元素，只有获取到了，才能对其进行相应的操作。
在JavaScript中，我们可以通过以下6种方式来获取指定元素。
（1）getElementById()
（2）getElementsByTagName()
（3）getElementsByClassName()
（4）querySelector()和querySelectorAll()
（5）getElementsByName()
（6）document.title和document.body
请注意，JavaScript是严格区分大小写的
getElementById()
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oDiv = document.getElementById("div1");
oDiv.style.color = "red";
}
</script>
</head>
<body>
<div id="div1">JavaScript</div>
</body>
window.onload = function ()
{
……
}
表示在整个页面加载完成后执行的代码块。
浏览器是从上到下解析一个页面的。这个例子的JavaScript代码在HTML代码的上面，如果没有window.onload，浏览器解析到document.getElementById(“div1”)就会报错.
因此我们必须使用window.onload，使得浏览器把整个页面解析完了再去解析window.onload内部的代码，这样就不会报错了。
注意，getElementById()方法中的id是不需要加上井号（#）的，如果你写成getElementById(”#div1")就是错的。
getElementById()获取的是一个DOM对象，我们在给变量命名的时候，习惯性地以英文“o”开头，以便跟其他变量区分开来，让我们一眼就看出来这是一个DOM对象。
getElementsByTagName()
get elements by tag name（通过标签名来获取元素）
document. getElementsByTagName("标签名")
getElementsByTagName()方法中“elements”是一个复数，写的时候别漏掉了“s”。这是因为getElementsByTagName()获取的是多个元素（即集合），而getElementById()获取的仅仅是一个元素。
getElementsByTagName()方法获取的是一个“类数组”（也叫伪数组），这不是真正意义上的数组。为什么这样说呢？因为我们只能使用到数组的length属性以及下标的形式，但是对于push()等方法是没办法在这里用的。
getElementsByClassName()
getElementsByClassName()获取的也是一个类数组。
querySelector()和querySelectorAll()
JavaScript新增了querySelector()和querySelectorAll()两个方法，使得我们可以使用CSS选择器的语法来获取所需要的元素。
document.querySelector("选择器");
document.querySelectorAll("选择器");
querySelector()表示选取满足选择条件的第1个元素，querySelectorAll()表示选取满足条件的所有元素。
写法跟CSS选择器的写法是完全一样
document.querySelector("#main")
document.querySelector("#list li:nth-child(1)")
document.querySelectorAll("#list li")
document.querySelectorAll("input:checkbox")
对于id选择器来说，由于页面只有一个元素，建议大家用getElementById()，而不是用querySelector()或querySelectorAll()这两个。因为getElementById()方法效率更高，性能也更快。
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oLi = document.querySelector("#list li:nth-child(3)");
oLi.style.color = "red";
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
</body>
document.querySelector("#list li:nth-child(3)")表示选取id为list的元素下的第3个元素
nth-child(n)属于CSS3的选择器
我们也可以使用document.querySelectorAll("#list li:nth-child(3)")[0]来实现，两者效果是一样的。特别注意一点，querySelectorAll()方法得到的是一个类数组，即使你获取的只有一个元素，也必须使用下标[0]才可以正确获取。
getElementsByName()
对于表单元素来说，它有一个一般元素都没有的name属性。如果想要通过name属性来获取表单元素，我们可以使用getElementsByName()方法来实现。
getElementsByName()获取的也是一个类数组，如果想要准确得到某一个元素，可以使用数组下标形式来获取。
getElementsByName()只用于表单元素，一般只用于单选按钮和复选框。
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oInput = document.getElementsByName("status");
oInput[2].checked = true;
}
</script>
</head>
<body>
你的最高学历:
<label><input type="radio" name="status" value="本科" />本科</label>
<label><input type="radio" name="status" value="硕士" />硕士</label>
<label><input type="radio" name="status" value="博士" />博士</label>
</body>
</html>
document.title和document.body
由于一个页面只有一个title元素和一个body元素，因此对于这两个元素的选取，JavaScript专门为我们提供了两个非常方便的方法：document.title和document.body。
<script>
window.onload = function ()
{
document.title = "梦想是什么？";
document.body.innerHTML = "<strong style='color:red'>梦想就是一种让你感到坚持就是幸福的东西。</strong>";
}
</script>
创建元素
使用createElement()来创建一个元素节点，也可以使用createTextNode()来创建一个文本节点，然后可以将元素节点与文本节点“组装”成为我们平常所看到的“有文本内容的元素”。这种方式又被称为“动态DOM操作”。
动态DOM：使用JavaScript创建的元素，这个元素一开始在HTML中是不存在的。
var e1 = document.createElement("元素名"); //创建元素节点
var txt = document.createTextNode("文本内容"); //创建文本节点
e1.appendChild(txt); //把文本节点插入元素节点中
e2.appendChild(e1); //把组装好的元素插入已存在的元素中
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oDiv = document.getElementById("content");
var oStrong = document.createElement("strong");
var oTxt = document.createTextNode("绿叶学习网");
//将文本节点插入strong元素
oStrong.appendChild(oTxt);
//将strong元素插入div元素（这个div在HTML已经存在）
oDiv.appendChild(oStrong);
}
</script>
</head>
<body>
<div id="content"></div>
</body>
其实在HTML中直接添加元素，这是静态方法。而使用JavaScript添加元素，这是动态方法。在实际开发中，使用静态方法是实现不了动画效果的。
创建复杂元素（带属性）
<script>
window.onload = function ()
{
var oInput = document.createElement("input");
oInput.id = "submit";
oInput.type = "button";
oInput.value = "提交";
document.body.appendChild(oInput);
}
</script>
<script>
window.onload = function ()
{
var oImg = document.createElement("img");
oImg.className = "pic";
oImg.src = "img/haizei.png";
oImg.style.border = "1px solid silver";
document.body.appendChild(oImg);
}
</script>
在操作动态DOM时，设置元素class用的是className而不是class
因为：JavaScript有很多关键字和保留字，其中class已经作为保留字（可以回去翻一下），所以就另外起了一个className来用。
插入元素
appendChild()
使用appendChild()把一个新元素插入到父元素的内部子元素的末尾 。
A.appendChild(B);
insertBefore()
使用insertBefore()方法将一个新元素插入到父元素中的某一个子元素“之前”。
A.insertBefore(B,ref);
A表示父元素，B表示新子元素。ref表示指定子元素，在这个元素之前插入新子元素。
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
var oUl = document.getElementById("list");
var oTxt = document.getElementById("txt");
//将文本框的内容转换为“文本节点”
var textNode = document.createTextNode(oTxt.value);
//动态创建一个li元素
var oLi = document.createElement("li");
//将文本节点插入li元素中
oLi.appendChild(textNode);
//将li元素插入到ul的第1个子元素前面
oUl.insertBefore(oLi, oUl.firstElementChild);
}
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<input id="txt" type="text"/><input id="btn" type="button" value="插入" />
</body>
oUl.firstElementChild表示获取ul元素下的第一个子元素。
删除元素
使用removeChild()方法来删除父元素下的某个子元素。
A.removeChild(B);
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
var oUl = document.getElementById("list");
//删除最后一个子元素
oUl.removeChild(oUl.lastElementChild);
}
}
</script>
oUl.lastElementChild表示ul中的最后一个子元素。
要把整个列表删除,直接对ul元素进行removeChild()操作
复制元素
使用cloneNode()方法来实现复制元素。
obj.cloneNode(bool)
参数obj表示被复制的元素，而参数bool是一个布尔值
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
var oUl = document.getElementById("list");
document.body.appendChild(oUl.cloneNode(1));
}
}
</script>
在body中把整个列表复制并插入
替换元素
使用replaceChild()方法来实现替换元素
A.replaceChild(new,old);
A表示父元素，new表示新子元素，old表示旧子元素。
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
//获取body中的第1个元素
var oFirst = document.querySelector("body *:first-child");
//获取2个文本框
var oTag = document.getElementById("tag");
var oTxt = document.getElementById("txt");
//根据2个文本框的值来创建一个新节点
var oNewTag = document.createElement(oTag.value);
var oNewTxt = document.createTextNode(oTxt.value);
oNewTag.appendChild(oNewTxt);
document.body.replaceChild(oNewTag, oFirst);
}
}
</script>
</head>
<body>
<p>JavaScript</p>
<hr/>
输入标签：<input id="tag" type="text" /><br />
输入内容：<input id="txt" type="text" /><br />
<input id="btn" type="button" value="替换" />
</body>
DOM进阶
HTML属性操作
HTML属性操作，指的是使用JavaScript来操作一个元素的HTML属性。像下面有一个input元素，指的就是操作它的id、type、value等，其他元素也类似。
<input id="btn" type="button" value="提交"/>
在JavaScript中，有两种操作HTML元素属性的方式：一种是使用“对象属性”；另外一种是使用“对象方法”。
不管是用“对象属性”方式，还是用“对象方法”方式，都涉及以下2种操作。
（1）获取HTML属性值
（2）设置HTML属性值
元素操作（上一章），准确来说，操作的是“元素节点”。属性操作，准确来说，操作的是“属性节点”。
对象属性
获取HTML属性值
获取HTML元素的属性值，一般都是通过属性名，来找到该属性对应的值。
obj.attr
obj是元素名，是一个DOM对象。
所谓的DOM对象，指的是getElementById()、getElementsByTagName()等方法获取到的元素节点。
想要获得某个属性的值，首先需要使用getElementById()等方法找到这个元素节点，然后才可以获取到该属性的值。
如果想要获取一个元素的class，写成oBtn.class是错误的，正确的应该写成oBtn.className。
在实际开发中，更多情况下我们想要获取的是表单元素的值。其中获取文本框、单选按钮、复选框、下拉列表中的值，都是通过value属性来获取的。
getElementsByName()只限用于表单元素，它获取的也是一个元素集合，也就是类数组。
设置HTML属性值
obj.attr = "值";
对于动态DOM来说，我们不仅可以使用obj.attr，也可以使用下一节介绍的setAttribute()方法
对象方法
为了操作HTML元素的属性，JavaScript为我们提供了4种方法。
getAttribute()
obj.getAttribute("attr")
注意，attr是要用英文引号括起来的。
obj.getAttribute("attr")
obj.attr
这两种方式都可以用来获取静态HTML的属性值以及动态DOM的属性值。
为什么JavaScript要提供两种方式来操作HTML属性呢？
自定义属性，指的是这个属性是用户自己定义的而不是元素自带的。
此时我们使用obj.attr（也就是对象属性方式）是无法实现的，只能用getAttribute(“attr”)（也就是对象方法方式）来实现。
setAttribute()
obj.setAttribute("attr","值")
removeAttribute()
使用removeAttribute()方法来删除元素的某个属性。
obj.removeAttribute("attr")
想要删除元素的某个属性，我们只有removeAttribute()这一个方法。
removeAttribute()更多情况下是结合class属性来“整体”控制元素的样式属性的.
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.main{color:red;font-weight:bold;}
</style>
<script>
window.onload = function ()
{
var oP = document.getElementsByTagName("p");
var oBtnAdd = document.getElementById("btn_add");
var oBtnRemove = document.getElementById("btn_remove");
//添加class
oBtnAdd.onclick = function () {
oP[0].className = "main";
};
//删除class
oBtnRemove.onclick = function () {
oP[0].removeAttribute("class");
};
}
</script>
</head>
<body>
<p>你偷走了我的影子，无论你在哪里，我都会一直想着你。</p>
<input id="btn_add" type="button" value="添加样式"/>
<input id="btn_remove" type="button" value="删除样式"/>
</body>
想要为一个元素删除一个class，可以使用：
oP[0].className = "";
或
oP[0].removeAttribute("class");
hasAttribute()
使用hasAttribute()方法来判断元素是否含有某个属性。
obj.hasAttribute("attr")
hasAttribute()方法返回一个布尔值
实际上我们直接使用removeAttribute()删除元素的属性是不太正确的，比较严谨的做法是先用hasAttribute()判断这个属性是否存在，如果存在，才去删除。
总结：
（1）“对象属性方式”和“对象方法方式”，这两种方式都不仅可以操作静态HTML的属性，也可以操作动态DOM的属性。
（2）只有“对象方法方式”才可以操作自定义属性。
CSS属性操作
CSS属性操作，指的是使用JavaScript来操作一个元素的CSS样式。
在JavaScript中，CSS属性操作同样有2种。
获取CSS属性值。
设置CSS属性值。
获取CSS属性操作
使用getComputedStyle()方法来获取一个CSS属性的取值。
getComputedStyle(obj).attr
等价于
getComputedStyle(obj)["attr"]。
事实上，凡是对象的属性都有这两种写法，例如oBtn.id可以写成oBtn[“id”]，document.getElementById(“btn”)可以写成document"getElementById"
obj表示DOM对象，也就是通过getElementById()、getElementsByTagName()等方法获取的元素节点。
attr表示CSS属性名。
我们要特别注意一点，这里的属性名使用的是“骆驼峰型”的CSS属性名。何为“骆驼峰型”呢？举个例子，font-size应该写成fontSize，border-bottom-width应该写成borderBottomWidth（有没有感觉像骆驼峰），以此类推。
举个例子：在obj.style.backgroundColor中，backgroundColor其实也是一个变量，变量中是不允许出现中划线的，因为中划线在JavaScript中是减号的意思。
get computed style（获取计算后的样式）。所谓“计算后的样式”，即不管是内部样式，还是行内样式，最终获取的是根据CSS优先级计算后的结果。
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#box{width:150px !important;}
</style>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
var oBox = document.getElementById("box");
oBtn.onclick = function ()
{
var width = getComputedStyle(oBox).width;
alert("元素宽度为：" + width);
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="获取宽度" />
<div id="box" style="width:100px;height:100px;background-color:hotpink"></div>
</body>
getComputedStyle()有一定的兼容性，它支持Google、Firefox和IE9及以上，不支持IE6、IE7和IE8。
设置CSS属性值
想要设置一个CSS属性的值，我们有2种方式来实现。
style对象
使用style对象来设置一个CSS属性的值，其实就是在元素的style属性来添加样式，这个设置的是“行内样式”。
obj.style.attr = "值";
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#box
{
width: 100px;
height: 100px;
background-color: hotpink;
}
</style>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
var oBox = document.getElementById("box");
oBtn.onclick = function ()
{
oBox.style.backgroundColor = "lightskyblue";
};
}
</script>
</head>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
var oBox = document.getElementById("box");
oBtn.onclick = function ()
{
//获取两个文本框的值（也就是输入的内容）
var attr = document.getElementById("attr").value;
var val = document.getElementById("val").value;
oBox.style[attr] = val;
};
}
</script>
我们获取的文本框value值其实是字符串，也就是说变量attr和val都是字符串来的。因此是不能使用obj.style.attr这种方式来设置CSS属性的，而必须使用obj.style[“attr”]这种方式，这个我们要认真琢磨清楚。
使用style来设置CSS属性，最终是在元素的style属性添加的。
obj.style.attr可以用于获取元素style属性中设置的CSS属性
cssText属性
在JavaScript中，我们可以使用cssText属性来同时设置多个CSS属性，这也是在元素的style属性来添加的。
obj.style.cssText = "值";
obj表示DOM对象，cssText的值是一个字符串，例如：
oDiv.style.cssText = "width:100px;height:100px;border:1px solid gray;";
注意，这个字符串中的属性名不再使用骆驼峰型写法，而是使用平常的CSS写法.
在实际开发的时候，如果想要为一个元素同时设置多个CSS属性，我们很少使用cssText来实现，更倾向于使用操作HTML属性的方式给元素加上一个class属性值，从而把样式整体给元素添加上。
DOM遍历
对于DOM遍历，可以分为以下3种情况。
（1）查找父元素。
（2）查找子元素。
（3）查找兄弟元素。
是对DOM基础-获取元素的补充。
查找父元素
使用parentNode属性来获得某个元素的父元素。
obj.parentNode
obj是一个DOM对象，指的是使用getElementById()、getElementsByTagName()等方法获取的元素。
查找子元素
我们可以使用以下两组方式来获得父元素中的所有子元素或某个子元素。
（1）childNodes、firstChild、lastChild
（2）children、firstElementChild、lastElementChild
childNodes获取的是所有的子节点。注意，这个子节点是包括元素节点以及文本节点的。而children获取的是所有的元素节点，不包括文本节点。
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oUl = document.getElementById("list");
var childNodesLen = oUl.childNodes.length;
var childrenLen = oUl.children.length;
alert("childNodes的长度为：" + childNodesLen + "\n" + "children的长度为：" + childrenLen);
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
children.length获取的是元素节点的长度，返回结果为3.
childNodes.length获取的是子节点的长度，返回结果是7.
对于ul元素来说，childNodes包括了3个子元素节点和4个子文本节点。我们可以看到每一个li元素之间都是换行的，对吧？每一次换行都是一个空白节点，JavaScript会把这些空白节点当成文本节点来处理
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
var oUl = document.getElementById("list");
oBtn.onclick = function ()
{
oUl.removeChild(oUl.lastChild);
}
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
<input id="btn" type="button" value="删除" />
</body>
点击【删除】按钮时，会发现一个很奇怪的现象：需要点击两次才可以删除一个li元素。
原因是：两个元素之间的“换行空格”其实也是一个节点。因此在删除节点的时候，第1次点击删除的是“文本节点”，第2次点击删除的才是li元素。
解决方法：
（1）将li元素间的“换行空格”去掉。
（2）使用nodeType来判断：我们都知道，元素节点的nodeType属性值为1，文本节点的nodeType属性值为3。
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
var oUl = document.getElementById("list");
oBtn.onclick = function ()
{
if (oUl.lastChild.nodeType == 3) {
oUl.removeChild(oUl.lastChild);
oUl.removeChild(oUl.lastChild);
} else {
oUl.removeChild(oUl.lastChild);
}
}
}
</script>
使用childNodes、firstChild、lastChild这几个来操作元素节点是非常麻烦的，因为它们都把文本节点（一般是空白节点）算进来了。实际上，上面这种是旧的做法.
JavaScript为了让我们可以快速开发，提供了新的方法，也就是只针对元素节点的操作属性：children、firstElementChild、lastElementChild。
firstElementChild获取的是第一个子元素节点，lastElementChild获取的是最后一个子元素节点。如果我们想要获取任意一个子元素节点，可以使用children[i]的方式来实现。
查找兄弟元素
可以使用以下2组方式来获得兄弟元素。
（1）previousSibling、nextSibling
（2）previousElementSibling、nextElementSibling
previousSibling查找前一个兄弟节点，nextSibling查找后一个兄弟节点。previousElementSibling查找前一个兄弟元素节点，nextElementSibling查找后一个兄弟元素节点。
跟查找子元素的两组方式一样，previousSibling和nextSibling查找出来的可能是文本节点（一般是空白节点），因此如果你希望只操作元素节点，建议使用previousElementSibling和nextElementSibling。
innerHTML和innerText
之前，我们是将元素节点、属性节点、文本节点一个个使用appendChild()等方法拼凑起来。如果插入的元素比较简单，这种方法还可以。要是插入的元素非常复杂的话，就不太适合了。
在JavaScript中，我们可以使用innerHTML属性很方便地获取和设置一个元素的“内部元素”，也可以使用innerText属性获取和设置一个元素的“内部文本”。
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oP = document.getElementById("content");
document.getElementById("txt1").value = oP.innerHTML;
document.getElementById("txt2").value = oP.innerText;
}
</script>
</head>
<body>
<p id="content"><strong style="color:hotpink;">绿叶学习网</strong></p>
innerHTML是：<input id="txt1" type="text"><br />
innerText是：<input id="txt2" type="text">
</body>
</html>
innerHTML获取的是元素内部所有的内容，而innerText获取的仅仅是文本内容。
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oDiv = document.getElementsByTagName("div")[0];
oDiv.innerHTML = '<span>绿叶学习网</span>\
<span style="color:hotpink;">JavaScript</span>\
<span style="color:deepskyblue;">入门教程</span>';
}
</script>
</head>
<body>
<div></div>
</body>
一般情况下，代码里面的字符串是不能换行的，但是为了可读性，我们往往希望将字符串截断分行显示。方法很简单，只需要在字符串每一行后面加上个反斜杠（\）就可以了。
还有一个跟innerText等价的属性，那就是textContent。在以前，为了兼容所有浏览器，我们用的都是这个。当然，现在也可以使用textContent来代替innerText，效果是一样的。
6372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
