JavaScript
Posted Liguangyang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript相关的知识，希望对你有一定的参考价值。
数据类型
-
JS中一共分成六种数据类型
-
String 字符串
-
Number 数值
-
Boolean 布尔值
-
Null 空值
-
Undefined 未定义
-
Object 对象
-
-
其中基本数据类型有
-
String 字符串
-
JS中的字符串需要使用引号引起来双引号或单引号都行
-
在字符串中使用作为转义字符 ‘ ==> ‘ " ==> " ==> 换行 ==> 制表符 ==>
-
-
-
-
使用typeof运算符检查字符串时，会返回"string"
-
Number 数值
-
JS中所有的整数和浮点数都是Number类型
-
特殊的数字 Infinity 正无穷 -Infinity 负无穷 NaN 非法数字（Not A Number）
-
其他进制的数字的表示： 0b 开头表示二进制，但是不是所有的浏览器都支持 0 开头表示八进制 0x 开头表示十六进制
-
使用typeof检查一个Number类型的数据时，会返回"number" （包括NaN 和 Infinity）
-
-
Boolean 布尔值
-
布尔值主要用来进行逻辑判断，布尔值只有两个
-
true 逻辑的真
-
false 逻辑的假
-
使用typeof检查一个布尔值时，会返回"boolean"
-
-
Null 空值
-
空值专门用来表示为空的对象，Null类型的值只有一个
-
null
-
使用typeof检查一个Null类型的值时会返回"object"
-
-
Undefined 未定义
-
如果声明一个变量但是没有为变量赋值此时变量的值就是undefined
-
该类型的值只有一个 undefined
-
使用typeof检查一个Undefined类型的值时，会返回"undefined"
-
-
-
引用数据类型
-
Object 对象
-
-
类型转换
-
类型转换就是指将其他的数据类型，转换为String Number 或 Boolean
-
转换为String
-
方式一（强制类型转换）：
-
调用被转换数据的toString()方法
-
例子： var a = 123; a = a.toString();
-
注意：这个方法不适用于null和undefined 由于这两个类型的数据中没有方法，所以调用toString()时会报错
-
-
方式二（强制类型转换）：
-
调用String()函数
-
例子： var a = 123; a = String(a);
-
原理：对于Number Boolean String都会调用他们的toString()方法来将其转换为字符串， 对于null值，直接转换为字符串"null"。对于undefined直接转换为字符串"undefined"
-
-
方式三（隐式的类型转换）: *
-
为任意的数据类型 +""
-
例子： var a = true; a = a + "";
-
原理：和String()函数一样
-
-
-
转换为Number
-
方式一（强制类型转换）：
-
调用Number()函数
-
例子： var s = "123"; s = Number(s);
-
转换的情况： 1.字符串 --> 数字
-
如果字符串是一个合法的数字，则直接转换为对应的数字
-
如果字符串是一个非法的数字，则转换为NaN
-
如果是一个空串或纯空格的字符串，则转换为0 2.布尔值 --> 数字
-
true转换为1
-
false转换为0 3.空值 --> 数字
-
null转换为0 4.未定义 --> 数字
-
undefined 转换为NaN
-
-
-
-
方式二（强制类型转换）：
-
调用parseInt()或parseFloat()
-
这两个函数专门用来将一个字符串转换为数字的
-
parseInt()
-
可以将一个字符串中的有效的整数位提取出来，并转换为Number
-
例子： var a = "123.456px"; a = parseInt(a); //123
-
如果需要可以在parseInt()中指定一个第二个参数，来指定进制
-
-
parseFloat()
-
可以将一个字符串中的有效的小数位提取出来，并转换为Number
-
例子： var a = "123.456px"; a = parseFloat(a); //123.456
-
-
-
方式三（隐式的类型转换）：
-
使用一元的+来进行隐式的类型转换
-
例子： var a = "123"; a = +a;
-
原理：和Number()函数一样
-
-
-
转换为布尔值
-
方式一（强制类型转换）：
-
使用Boolean()函数
-
例子： var s = "false"; s = Boolean(s); //true
-
转换的情况 字符串 --> 布尔
-
除了空串其余全是true
数值 --> 布尔
-
除了0和NaN其余的全是true
null、undefined ---> 布尔
-
都是false
对象 ---> 布尔
-
都是true
-
-
-
方式二（隐式类型转换）：
-
为任意的数据类型做两次非运算，即可将其转换为布尔值
-
例子： var a = "hello"; a = !!a; //true
-
-
-
-
运算符
-
运算符也称为操作符
-
通过运算符可以对一个或多个值进行运算或操作
-
typeof运算符
-
用来检查一个变量的数据类型
-
语法：typeof 变量
-
它会返回一个用于描述类型的字符串作为结果
-
-
算数运算符
-
对两个值进行加法运算并返回结果
-
对两个值进行减法运算并返回结果
-
对两个值进行乘法运算并返回结果 / 对两个值进行除法运算并返回结果 % 对两个值进行取余运算并返回结果
-
除了加法以外，对非Number类型的值进行运算时，都会先转换为Number然后在做运算。
-
而做加法运算时，如果是两个字符串进行相加，则会做拼串操作，将两个字符连接为一个字符串。
-
任何值和字符串做加法，都会先转换为字符串，然后再拼串
-
-
一元运算符
-
一元运算符只需要一个操作数
-
一元的+
-
就是正号，不会对值产生任何影响，但是可以将一个非数字转换为数字
-
例子： var a = true; a = +a;
-
-
一元的-
-
就是负号，可以对一个数字进行符号位取反
-
例子： var a = 10; a = -a;
-
-
自增
-
自增可以使变量在原值的基础上自增1
-
自增使用 ++
-
自增可以使用 前++（++a）后++(a++)
-
无论是++a 还是 a++都会立即使原变量自增1 不同的是++a和a++的值是不同的， ++a的值是变量的新值（自增后的值） a++的值是变量的原值（自增前的值）
-
-
自减
-
自减可以使变量在原值的基础上自减1
-
自减使用 --
-
自减可以使用 前--（--a）后--(a--)
-
无论是--a 还是 a--都会立即使原变量自减1 不同的是--a和a--的值是不同的， --a的值是变量的新值（自减后的值） a--的值是变量的原值（自减前的值）
-
-
-
运算符
逻辑运算符 !
-
非运算可以对一个布尔值进行取反，true变false false边true
-
当对非布尔值使用!时，会先将其转换为布尔值然后再取反
-
我们可以利用!来将其他的数据类型转换为布尔值
-
-
&&
- &&可以对符号两侧的值进行与运算
- 只有两端的值都为true时，才会返回true。只要有一个false就会返回false。
- 与是一个短路的与，如果第一个值是false，则不再检查第二个值
- 对于非布尔值，它会将其转换为布尔值然后做运算，并返回原值
- 规则：
1.如果第一个值为false，则返回第一个值
2.如果第一个值为true，则返回第二个值
||
- ||可以对符号两侧的值进行或运算
- 只有两端都是false时，才会返回false。只要有一个true，就会返回true。
- 或是一个短路的或，如果第一个值是true，则不再检查第二个值
- 对于非布尔值，它会将其转换为布尔值然后做运算，并返回原值
- 规则：
1.如果第一个值为true，则返回第一个值
2.如果第一个值为false，则返回第二个值
赋值运算符
=
- 可以将符号右侧的值赋值给左侧变量
+=
- a += 5 相当于 a = a+5
- var str = "hello"; str += "world";
-=
- a -= 5 相当于 a = a-5
*=
- a *= 5 相当于 a = a*5
/=
- a /= 5 相当于 a = a/5
?
%=
- a %= 5 相当于 a = a%5
关系运算符
- 关系运算符用来比较两个值之间的大小关系的
>
>=
<
<=
- 关系运算符的规则和数学中一致，用来比较两个值之间的关系，
如果关系成立则返回true，关系不成立则返回false。
- 如果比较的两个值是非数值，会将其转换为Number然后再比较。
- 如果比较的两个值都是字符串，此时会比较字符串的Unicode编码，而不会转换为Number。
?
相等运算符
==
- 相等，判断左右两个值是否相等，如果相等返回true，如果不等返回false
- 相等会自动对两个值进行类型转换，如果对不同的类型进行比较，会将其转换为相同的类型然后再比较，
转换后相等它也会返回true
!=
- 不等，判断左右两个值是否不等，如果不等则返回true，如果相等则返回false
- 不等也会做自动的类型转换。
===
- 全等，判断左右两个值是否全等，它和相等类似，只不过它不会进行自动的类型转换，
如果两个值的类型不同，则直接返回false
!==
- 不全等，和不等类似，但是它不会进行自动的类型转换，如果两个值的类型不同，它会直接返回true
特殊的值：
- null和undefined
- 由于undefined衍生自null，所以null == undefined 会返回true。
但是 null === undefined 会返回false。
- NaN
- NaN不与任何值相等，报告它自身 NaN == NaN //false
- 判断一个值是否是NaN
- 使用isNaN()函数
三元运算符：
?:
- 语法：条件表达式?语句1:语句2;
- 执行流程：
先对条件表达式求值判断，
如果判断结果为true，则执行语句1，并返回执行结果
如果判断结果为false，则执行语句2，并返回执行结果
优先级：
- 和数学中一样，JS中的运算符也是具有优先级的，
比如 先乘除 后加减 先与 后或
- 具体的优先级可以参考优先级的表格，在表格中越靠上的优先级越高，
优先级越高的越优先计算，优先级相同的，从左往右计算。
- 优先级不需要记忆，如果越到拿不准的，使用()来改变优先级。
流程控制语句
-
程序都是自上向下的顺序执行的， 通过流程控制语句可以改变程序执行的顺序，或者反复的执行某一段的程序。
-
分类： 1.条件判断语句 2.条件分支语句 3.循环语句
-
条件判断语句
- 条件判断语句也称为if语句
- 语法一：
if(条件表达式){
语句...
}
- 执行流程：
if语句执行时，会先对条件表达式进行求值判断，
如果值为true，则执行if后的语句
如果值为false，则不执行
- 语法二：
if(条件表达式){
语句...
}else{
语句...
}
- 执行流程：
if...else语句执行时，会对条件表达式进行求值判断，
如果值为true，则执行if后的语句
如果值为false，则执行else后的语句
- 语法三：
if(条件表达式){
语句...
}else if(条件表达式){
语句...
}else if(条件表达式){
语句...
}else if(条件表达式){
语句...
}else{
语句...
}
- 执行流程
- if...else if...else语句执行时，会自上至下依次对条件表达式进行求值判断，
如果判断结果为true，则执行当前if后的语句，执行完成后语句结束。
如果判断结果为false，则继续向下判断，直到找到为true的为止。
如果所有的条件表达式都是false，则执行else后的语句
1.对象（Object）
- 对象是JS中的引用数据类型
- 对象是一种复合数据类型，在对象中可以保存多个不同数据类型的属性
- 使用typeof检查一个对象时，会返回object
- 创建对象
- 方式一：
- var obj = new Object();
- 方式二：
- var obj = {};
- 向对象中添加属性
- 语法：
对象.属性名 = 属性值;
对象["属性名"] = 属性值;
- 对象的属性名没有任何要求，不需要遵守标识符的规范，
但是在开发中，尽量按照标识符的要求去写。
- 属性值也可以任意的数据类型。
?
- 读取对象中的属性
- 语法：
对象.属性名
对象["属性名"]
- 如果读取一个对象中没有的属性，它不会报错，而是返回一个undefined
- 删除对象中的属性
- 语法：
delete 对象.属性名
delete 对象["属性名"]
- 使用in检查对象中是否含有指定属性
- 语法："属性名" in 对象
- 如果在对象中含有该属性，则返回true
如果没有则返回false
- 使用对象字面量，在创建对象时直接向对象中添加属性
语法：
var obj = {
属性名:属性值,
属性名:属性值,
属性名:属性值,
属性名:属性值
}
- 基本数据类型和引用数据类型
- 基本数据类型
String Number Boolean Null Undefined
- 引用数据类型
Object
- 基本数据类型的数据，变量是直接保存的它的值。
变量与变量之间是互相独立的，修改一个变量不会影响其他的变量。
- 引用数据类型的数据，变量是保存的对象的引用（内存地址）。
如果多个变量指向的是同一个对象，此时修改一个变量的属性，会影响其他的变量。
- 比较两个变量时，对于基本数据类型，比较的就是值，
对于引用数据类型比较的是地址，地址相同才相同
函数（Function）
-
函数也是一个对象，也具有普通对象的功能
-
函数中可以封装一些代码，在需要的时候可以去调用函数来执行这些代码
-
使用typeof检查一个函数时会返回function
-
创建函数
-
函数声明 function 函数名([形参1,形参2...形参N]){ 语句... }
-
-
- 函数表达式
var 函数名 = function([形参1,形参2...形参N]){
语句...
};
- 调用函数
- 语法：函数对象([实参1,实参2...实参N]);
fun() sum() alert() Number() parseInt()
- 当我们调用函数时，函数中封装的代码会按照编写的顺序执行
?
- 形参和实参
- 形参：形式参数
- 定义函数时，可以在()中定义一个或多个形参，形参之间使用,隔开
定义形参就相当于在函数内声明了对应的变量但是并不赋值，
形参会在调用时才赋值。
- 实参：实际参数
- 调用函数时，可以在()传递实参，传递的实参会赋值给对应的形参,
调用函数时JS解析器不会检查实参的类型和个数，可以传递任意数据类型的值。
如果实参的数量大于形参，多余实参将不会赋值，
如果实参的数量小于形参，则没有对应实参的形参将会赋值undefined
作用域
-
作用域简单来说就是一个变量的作用范围。
-
在JS中作用域分成两种： 1.全局作用域
-
直接在script标签中编写的代码都运行在全局作用域中
-
全局作用域在打开页面时创建，在页面关闭时销毁。
-
全局作用域中有一个全局对象window，window对象由浏览器提供， 可以在页面中直接使用，它代表的是整个的浏览器的窗口。
-
在全局作用域中创建的变量都会作为window对象的属性保存 在全局作用域中创建的函数都会作为window对象的方法保存
-
在全局作用域中创建的变量和函数可以在页面的任意位置访问。 在函数作用域中也可以访问到全局作用域的变量。
-
尽量不要在全局中创建变量
-
-
-
2.函数作用域
- 函数作用域是函数执行时创建的作用域，每次调用函数都会创建一个新的函数作用域。
- 函数作用域在函数执行时创建，在函数执行结束时销毁。
- 在函数作用域中创建的变量，不能在全局中访问。
- 当在函数作用域中使用一个变量时，它会先在自身作用域中寻找，
如果找到了则直接使用，如果没有找到则到上一级作用域中寻找，
如果找到了则使用，找不到则继续向上找，一直会
- 变量的声明提前
- 在全局作用域中，使用var关键字声明的变量会在所有的代码执行之前被声明，但是不会赋值。
所以我们可以在变量声明前使用变量。但是不使用var关键字声明的变量不会被声明提前。
- 在函数作用域中，也具有该特性，使用var关键字声明的变量会在函数所有的代码执行前被声明，
如果没有使用var关键字声明变量，则变量会变成全局变量
- 函数的声明提前
- 在全局作用域中，使用函数声明创建的函数（function fun(){}）,会在所有的代码执行之前被创建，
也就是我们可以在函数声明前去调用函数，但是使用函数表达式(var fun = function(){})创建的函数没有该特性
- 在函数作用域中，使用函数声明创建的函数，会在所有的函数中的代码执行之前就被创建好了。
this（上下文对象）
-
我们每次调用函数时，解析器都会将一个上下文对象作为隐含的参数传递进函数。 使用this来引用上下文对象，根据函数的调用形式不同，this的值也不同。
-
this的不同的情况： 1.以函数的形式调用时，this是window 2.以方法的形式调用时，this就是调用方法的对象 3.以构造函数的形式调用时，this就是新创建的对象
-
构造函数
-
构造函数是专门用来创建对象的函数
-
一个构造函数我们也可以称为一个类
-
通过一个构造函数创建的对象，我们称该对象时这个构造函数的实例
-
通过同一个构造函数创建的对象，我们称为一类对象
-
构造函数就是一个普通的函数，只是他的调用方式不同， 如果直接调用，它就是一个普通函数 如果使用new来调用，则它就是一个构造函数
-
例子： function Person(){
}
-
构造函数的执行流程： 1.创建一个新的对象 2.将新的对象作为函数的上下文对象（this） 3.执行函数中的代码 4.将新建的对象返回
-
instanceof 用来检查一个对象是否是一个类的实例
-
语法：对象 instanceof 构造函数
-
如果该对象时构造函数的实例，则返回true，否则返回false
-
Object是所有对象的祖先，所以任何对象和Object做instanceof都会返回true
-
-
-
枚举对象中的属性 for...in 语法： for(var 属性名 in 对象){
}for...in语句的循环体会执行多次，对象中有几个属性就会执行几次， 每次讲一个属性名赋值给我们定义的变量，我们可以通过它来获取对象中的属性
-
原型（prototype）
-
创建一个函数以后，解析器都会默认在函数中添加一个数prototype prototype属性指向的是一个对象，这个对象我们称为原型对象。
-
当函数作为构造函数使用，它所创建的对象中都会有一个隐含的属性执行该原型对象。 这个隐含的属性可以通过对象.proto来访问。
-
原型对象就相当于一个公共的区域，凡是通过同一个构造函数创建的对象他们通常都可以访问到相同的原型对象。 我们可以将对象中共有的属性和方法统一添加到原型对象中， 这样我们只需要添加一次，就可以使所有的对象都可以使用。
-
当我们去访问对象的一个属性或调用对象的一个方法时，它会先自身中寻找， 如果在自身中找到了，则直接使用。 如果没有找到，则去原型对象中寻找，如果找到了则使用， 如果没有找到，则去原型的原型中寻找，依此类推。直到找到Object的原型为止，Object的原型的原型为null， 如果依然没有找到则返回undefined
-
hasOwnProperty()
-
这个方法可以用来检查对象自身中是否含有某个属性
-
语法：对象.hasOwnProperty("属性名")
-
-
数组（Array）
-
数组也是一个对象，是一个用来存储数据的对象 和Object类似，但是它的存储效率比普通对象要高
-
数组中保存的内容我们称为元素
-
数组使用索引（index）来操作元素
-
索引指由0开始的整数
-
数组的操作：
-
创建数组
-
var arr = new Array();
-
var arr = [];
-
-
-
-
向数组中添加元素
-
语法； 数组对象[索引] = 值; arr[0] = 123; arr[1] = "hello";
-
创建数组时直接添加元素
-
语法： var arr = [元素1,元素2....元素N];
-
例子： var arr = [123,"hello",true,null];
-
-
-
获取和修改数组的长度
-
使用length属性来操作数组的长度
-
获取长度： 数组.length
-
length获取到的是数组的最大索引+1
-
对于连续的数组，length获取到的就是数组中元素的个数
-
-
修改数组的长度 数组.length = 新长度
-
如果修改后的length大于原长度，则多出的部分会空出来
-
如果修改后的length小于原长度，则原数组中多出的元素会被删除
-
-
-
向数组的最后添加元素 数组[数组.length] = 值;
-
-
-
数组的方法
-
push()
-
用来向数组的末尾添加一个或多个元素，并返回数组新的长度
-
语法：数组.push(元素1,元素2,元素N)
-
-
pop()
-
用来删除数组的最后一个元素，并返回被删除的元素
-
-
unshift()
-
向数组的前边添加一个或多个元素，并返回数组的新的长度
-
-
shift()
-
删除数组的前边的一个元素，并返回被删除的元素
-
-
slice()
-
可以从一个数组中截取指定的元素
-
该方法不会影响原数组，而是将截取到的内容封装为一个新的数组并返回
-
参数： 1.截取开始位置的索引（包括开始位置） 2.截取结束位置的索引（不包括结束位置）
-
第二个参数可以省略不写，如果不写则一直截取到最后
-
参数可以传递一个负值，如果是负值，则从后往前数
-
-
-
splice()
-
可以用来删除数组中指定元素，并使用新的元素替换 该方法会将删除的元素封装到新数组中返回
-
参数： 1.删除开始位置的索引 2.删除的个数 3.三个以后，都是替换的元素，这些元素将会插入到开始位置索引的前边
-
-
-
遍历数组
-
遍历数组就是将数组中元素都获取到
-
一般情况我们都是使用for循环来遍历数组： for(var i=0 ; i<数组.length ; i++){ //数组[i] }
-
使用forEach()方法来遍历数组（不兼容IE8）
数组.forEach(function(value , index , obj){
});
forEach()方法需要一个回调函数作为参数， 数组中有几个元素，回调函数就会被调用几次， 每次调用时，都会将遍历到的信息以实参的形式传递进来， 我们可以定义形参来获取这些信息。 value:正在遍历的元素 index:正在遍历元素的索引 obj:被遍历对象
-
正则表达式
- 语法： - 量词 {n} 正好n次 {m,n} m-n次 {m,} 至少m次 + 至少1次 {1,} ? 0次或1次 {0,1} * 0次或多次 {0,}
- 转义字符
在正则表达式中使用作为转义字符
. 表示.
\ 表示
. 表示任意字符
w
- 相当于[A-z0-9_]
W
- 相当于[^A-z0-9_]
d
- 任意数字
D
- 除了数字
s
- 空格
S
- 除了空格
- 单词边界
B
- 除了单词边界
^ 表示开始
$ 表示结束
DOM
-
Document Object Model
-
文档对象模型，通过DOM可以来任意来修改网页中各个内容
-
文档
-
文档指的是网页，一个网页就是一个文档
-
-
对象
-
对象指将网页中的每一个节点都转换为对象 转换完对象以后，就可以以一种纯面向对象的形式来操作网页了
-
-
模型
-
模型用来表示节点和节点之间的关系，方便操作页面
-
-
节点（Node）
-
节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点
-
虽然都是节点，但是节点的类型却是不同的
-
常用的节点
-
文档节点 （Document），代表整个网页
-
元素节点（Element），代表网页中的标签
-
属性节点（Attribute），代表标签中的属性
-
文本节点（Text），代表网页中的文本内容
-
-
-
- DOM操作
- DOM查询
- 在网页中浏览器已经为我们提供了document对象，
它代表的是整个网页，它是window对象的属性，可以在页面中直接使用。
- document查询方法：
- 根据元素的id属性查询一个元素节点对象：
- document.getElementById("id属性值");
- 根据元素的name属性值查询一组元素节点对象:
- document.getElementsByName("name属性值");
- 根据标签名来查询一组元素节点对象：
- document.getElementsByTagName("标签名");
- 元素的属性：
- 读取元素的属性：
语法：元素.属性名
例子：ele.name
ele.id
ele.value
ele.className
- 修改元素的属性：
语法：元素.属性名 = 属性值
- innerhtml
- 使用该属性可以获取或设置元素内部的HTML代码
- 事件（Event）
- 事件指的是用户和浏览器之间的交互行为。比如：点击按钮、关闭窗口、鼠标移动。。。
- 我们可以为事件来绑定回调函数来响应事件。
- 绑定事件的方式：
1.可以在标签的事件属性中设置相应的JS代码
例子：
<button onclick="js代码。。。">按钮</button>
2.可以通过为对象的指定事件属性设置回调函数的形式来处理事件
例子：
<button id="btn">按钮</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
};
</script>
- 文档的加载
- 浏览器在加载一个页面时，是按照自上向下的顺序加载的，加载一行执行一行。
- 如果将js代码编写到页面的上边，当代码执行时，页面中的DOM对象还没有加载，
此时将会无法正常获取到DOM对象，导致DOM操作失败。
- 解决方式一：
- 可以将js代码编写到body的下边
<body>
<button id="btn">按钮</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
};
</script>
</body>
- 解决方式二：
- 将js代码编写到window.onload = function(){}中
- window.onload 对应的回调函数会在整个页面加载完毕以后才执行，
所以可以确保代码执行时，DOM对象已经加载完毕了
<script>
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
};
};
</script>
DOM查询
-
通过具体的元素节点来查询
-
元素.getElementsByTagName()
-
通过标签名查询当前元素的指定后代元素
-
-
- 元素.childNodes
- 获取当前元素的所有子节点
- 会获取到空白的文本子节点
- 元素.children
- 获取当前元素的所有子元素
- 元素.firstChild
- 获取当前元素的第一个子节点
- 元素.lastChild
- 获取当前元素的最后一个子节点
- 元素.parentNode
- 获取当前元素的父元素
- 元素.previousSibling
- 获取当前元素的前一个兄弟节点
- 元素.nextSibling
- 获取当前元素的后一个兄弟节点
innerHTML和innerText
- 这两个属性并没有在DOM标准定义，但是大部分浏览器都支持这两个属性
- 两个属性作用类似，都可以获取到标签内部的内容，
不同是innerHTML会获取到html标签，而innerText会自动去除标签
- 如果使用这两个属性来设置标签内部的内容时，没有任何区别的
读取标签内部的文本内容
<h1>h1中的文本内容</h1>
元素.firstChild.nodeValue
- document对象的其他的属性和方法
document.all
- 获取页面中的所有元素，相当于document.getElementsByTagName("*");
document.documentElement
- 获取页面中html根元素
document.body
- 获取页面中的body元素
document.getElementsByClassName()
- 根据元素的class属性值查询一组元素节点对象
- 这个方法不支持IE8及以下的浏览器
document.querySelector()
- 根据CSS选择器去页面中查询一个元素
- 如果匹配到的元素有多个，则它会返回查询到的第一个元素
document.querySelectorAll()
- 根据CSS选择器去页面中查询一组元素
- 会将匹配到所有元素封装到一个数组中返回，即使只匹配到一个
DOM修改
document.createElement()
-
可以根据标签名创建一个元素节点对象
document.createTextNode()
- 可以根据文本内容创建一个文本节点对象
父节点.appendChild(子节点)
- 向父节点中添加指定的子节点
父节点.insertBefore(新节点,旧节点)
- 将一个新的节点插入到旧节点的前边
父节点.replaceChild(新节点,旧节点)
- 使用一个新的节点去替换旧节点
父节点.removeChild(子节点)
- 删除指定的子节点
- 推荐方式：子节点.parentNode.removeChild(子节点)
DOM对CSS的操作
-
读取和修改内联样式
-
使用style属性来操作元素的内联样式
-
读取内联样式： 语法：元素.style.样式名
-
例子： 元素.style.width 元素.style.height
-
注意：如果样式名中带有-，则需要将样式名修改为驼峰命名法 将-去掉，然后-后的字母改大写
-
比如：background-color --> backgroundColor border-width ---> borderWidth
-
-
-
-
- 修改内联样式：
语法：元素.style.样式名 = 样式值
- 通过style修改的样式都是内联样式，由于内联样式的优先级比较高，
所以我们通过JS来修改的样式，往往会立即生效，
但是如果样式中设置了!important，则内联样式将不会生效。
- 读取元素的当前样式
- 正常浏览器
- 使用getComputedStyle()
- 这个方法是window对象的方法，可以返回一个对象，这个对象中保存着当前元素生效样式
- 参数：
1.要获取样式的元素
2.可以传递一个伪元素，一般传null
- 例子：
获取元素的宽度
getComputedStyle(box , null)["width"];
- 通过该方法读取到样式都是只读的不能修改
?
- IE8
- 使用currentStyle
- 语法：
元素.currentStyle.样式名
- 例子：
box.currentStyle["width"]
- 通过这个属性读取到的样式是只读的不能修改
?
- 其他的样式相关的属性
注意：以下样式都是只读的
?
clientHeight
- 元素的可见高度，指元素的内容区和内边距的高度
clientWidth
- 元素的可见宽度，指元素的内容区和内边距的宽度
offsetHeight
- 整个元素的高度，包括内容区、内边距、边框
offfsetWidth
- 整个元素的宽度，包括内容区、内边距、边框
offsetParent
- 当前元素的定位父元素
- 离他最近的开启了定位的祖先元素，如果所有的元素都没有开启定位，则返回body
offsetLeft
offsetTop
- 当前元素和定位父元素之间的偏移量
- offsetLeft水平偏移量 offsetTop垂直偏移量
scrollHeight
scrollWidth
- 获取元素滚动区域的高度和宽度
scrollTop
scrollLeft
- 获取元素垂直和水平滚动条滚动的距离
判断滚动条是否滚动到底
- 垂直滚动条
scrollHeight - scrollTop = clientHeight
- 水平滚动
scrollWidth - scrollLeft = clientWidth
事件（Event）
-
事件对象
-
当响应函数被调用时，浏览器每次都会将一个事件对象作为实参传递进响应函数中， 这个事件对象中封装了当前事件的相关信息，比如：鼠标的坐标，键盘的按键，鼠标的按键，滚轮的方向。。
-
可以在响应函数中定义一个形参，来使用事件对象，但是在IE8以下浏览器中事件对象没有做完实参传递，而是作为window对象的属性保存
-
例子： 元素.事件 = function(event){ event = event || window.event;
-
-
};
元素.事件 = function(e){
e = e || event;
};
- 事件的冒泡（Bubble）
- 事件的冒泡指的是事件向上传导，当后代元素上的事件被触发时，将会导致其祖先元素上的同类事件也会触发。
- 事件的冒泡大部分情况下都是有益的，如果需要取消冒泡，则需要使用事件对象来取消
- 可以将事件对象的cancelBubble设置为true，即可取消冒泡
- 例子：
元素.事件 = function(event){
event = event || window.event;
event.cancelBubble = true;
};
以上是关于JavaScript的主要内容，如果未能解决你的问题，请参考以下文章