#JavaScript的数据类型
知识点罗列：
1: 字面量、变量、标识符
2: JavaScript的6种数据类型：
基本数据类型：String 字符串类型 Number数值类型 Boolean 布尔类型
Null 空值类型 Undefined 未定义类型
引用数据类型：Object 对象类型
3:JavaScript数据的强制类型转换
主要是将其他数据类型转换为String Number Boolean。
①将其他的数据类型转换为String类型
方法一：
- 调用被转换数据类型的toString()方法
- 该方法不会影响原变量，它会将转换的结果返回
- 注意：null和undefined这两个值没有toString()方法，如果调用该方法程序会报错
方法二：
- 调用String()函数，并将被转换的数据作为参数传递给函数
- 使用String()函数做强制类型转换时，对于Number Boolean实际上
是调用的toString()方法。但是对于null和undefined，
就不会调用toString()方法。
它会将null直接准换为"null"（字符串）
它会将undefined直接准换为"undefined"（字符串）
②将其他数据类型转换为Number类型
使用Number()函数
- 字符串–>数字
1.如果是纯数字的字符串，则可以直接转换为数字
2.如果字符串中有非数字的内容，则转换为NaN
3.如果字符串是一个空串或者是一个全是空格的字符串，则转换为0
- 布尔值–>数字 true准换为1 false转换为0
- null–>数字 0
- undefined–>数字 NaN
第二种方式：
- 这种方式专门用来对付字符串类型
- parseInt() 把一个字符串转换为一个整数
- parseFloat() 把一个字符串转换为一个浮点数
③其他数据类型转换为Boolean类型
使用Boolean()函数
- 数字 -->布尔 除了0和NaN是false,其余的全部都是true
- 字符串–>布尔 除了空串是false,其余的全部都是true
- null 和undefined都会转换为false
- 对象也会转换为true
可以使用运算符typeof检测数据类型
语法：typeof 变量
4:运算符:
1.javaScript算法运算符:
JavaScript运算符
(1.)运算符也叫做操作符
(2.)通过运算符可以对一个或则多个值进行运算，并获取运算结果。
(3.)- 算数运算符
1:+ 加
(1.)可以对两个值进行加法运算，
(2)如果是两个字符串则进行字符串拼接
(3.)任何值和字符串做加法运算，都会先转为字符串，然后再和字符串做拼接操作
(4.)也可以通过"+"完成隐式转换
(同级运算，从左到右)
2: - 减 *乘 / 除
(1.)可以对两个值进行减法运算，并返回运算结果
(2.)任何值做 “- 减” “*乘” " / 除" 运算时自动转换为 "数值(Number)"可以利用这一特性完成隐式转换
3: % 取模
(1.)取模运算(取余数)
4: ++ 自增 – 自减
2:javaScript逻辑运算符:
JavaScript逻辑运算符
JS中为我们提供了三种逻辑运算符:
1. ! 非
(1.) !可以用来对一个值进行非运算
(2.)所谓非运算就是对一个布尔值进行取反操作 false变为true ，true变为false
(3.)如果对一个值(布尔值)进行2次非运算，它的值不改变
(4.)如果对非布尔值进行运算，则先将它准换为布尔值，再取反操作利用这一特点，
可以将一个值转换为布尔类型：两次非运算
2. && 与
(1.) &&可以对符号两则的值进行与运算并返回结果
(2.) 运算规则：两个值只要有一个false，则返回false 两个值都是true的情况下，返回true
(3.) JS中的"与"，只要第一个为false，则返回false。
3. || 或
(1.)||可以对符号两则的值进行或运算并返回结果
(2.) 运算规则：两个值只要有一个true，则返回true
3:javaScript赋值运算符:
1: JavaScript赋值运算
(1.)= 赋值符
可以将符号右侧的值赋值给左侧的变量
(2.)+=
num+=2 =>等价于 num=num+2;
(3.)-=
num-=2 =>等价于 num=num-2;
(4)*=
num*=2 =>等价于 num=num*2;
(5.)/=
num/=2 =>等价于 num=num/2;
(6.)%=
num%=2 =>等价于 num=num%2;
4:javaScript关系运算符:
1: JavaScript关系运算符:
(1.)> 大于
例1: var a=3>5;
console.log("a="+a);
(输出结果为 "布尔值false"(错误的）运算结果为布尔值)
(2.)>= 大于等于
例2: var a=3>=5;
console.log("a="+a);
(输出结果为 "布尔值false"(错误的）运算结果为布尔值)
(3.)< 小于
例3: var a=3<5;
console.log("a="+a);
(输出结果为 "布尔值true"(正确的）运算结果为布尔值)
(4.)<=小于等于
例4: var a=3<=5;
console.log("a="+a);
(输出结果为 "布尔值true"(正确的）运算结果为布尔值)
(5.)运算的结果为布尔值
5:javaScrpt条件运算符:
1.JavaScript条件运算法 :
(1.)条件运算符也叫做三元运算符
(2.) 语法：条件表达式?语句1:语句2;
(3.)执行的流程：
(4.)条件运算符在执行时，首先对表达式进行求值。
(5.)如果该值为true，则执行语句1,并返回执行结果
(6.)如果该值为false，则执行语句2,并返回执行结果
2.JavaScript相等运算符:
(1.) == 表示相等的意思
(2.) != 表示不等的意思
(3.) === 全等（数据类型与值都相等）
(4.) !== 不全等
(5.) 运算的结果为布尔值
6:javaScript运算符优先级:
1. JavaScript运算符优先级:
(1.)JS中的优先级就跟我们数学中的优先级一样，
(2.)比如在数学中:先乘除 再加减 有括号先算括号里面的
2.
(1.)算术操作符 (+ 、- 、、 /、++、–、%) 第一
(2.)(关系运算符)比较操作符(<、>、、=、<=、>=、!=) 第二
(3.)逻辑操作符(&&、||、!) 第三
(4.)"="赋值符号(=、+=、-=、=、/=) 第四
5:JavaScript流程控制语句:
什么是流程？ ()
程序中的三种基本流程结构：
1. 顺序结构:
(1.) 顺序结构：按照顺序一条一条的执行代码，从上到下
2. 分支结构:
(2.) 分支结构：执行代码的时候，可以根据条件进行选择，
条件越多对应的结果越多，分支也就越多。例如if…else…语句,switch语句
3. 循环结构:
(3.)循环语句：用来重复不断的做一件事,for循环，while循环，do…while循环
(4.)if…else语句是在指定的条件成立时执行代码，在条件不成立时执行else后的代码。
语法：
if(条件){
条件成立时执行的代码
}
else{
条件不成立时执行的代码
}
(5.) 多重判断（if..else嵌套语句）
要在多组语句中选择一组来执行，使用if…else嵌套语句。
语法:
I f(条件1){
条件1成立时执行的代码
}
else if(条件2){
条件2成立时执行的代码
}
else if(条件n){
条件n成立时执行的代码
}
else{
条件1、2至n不成立时执行的代码
}
for循环
for循环是编程语言中一种循环语句，而循环语句由循环体及循环的判定条件两部分组成，for语句结构：
6:JavaScript对象:
1.JavaScript事件简介
事件
(1.)事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间
(2.) JavaScript 与 HTML 之间的交互是通过事件实现的。
(3.) 对于 Web 应用来说，有下面这些代表性的事件：单击事件、鼠标移入移出事件、键盘按下/弹起事件
(4.)事件就是用户与浏览器的交互行为 (如点击按钮浏览器弹出一个弹出框)
(5.)常用的事件:
onclick 鼠标点击某个对象
ondblclick 鼠标双击某个对象
onerror 当加载文档或图像时发生某个错误
onfocus 元素获得焦点
onblur 元素失去焦点
onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下或按住
onkeyup 某个键盘的键被松开
onload 某个页面或图像被完成加载
onmousedown 某个鼠标按键被按下
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上
onmouseup 某个鼠标按键被松开
onreset 重置按钮被点击
onresize 窗口或框架被调整尺寸
onselect 文本被选定
onsubmit 提交按钮被点击
onunload 用户退出页面
2.javaScript事件对象(Event):
(2.)事件对象:
当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递传递进响应函数,
在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标 键盘那个按键被按下，
鼠标滚轮滚动的方向
(3.)在IE8中，响应函数被触发时，浏览器不会传递事件对象，
在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
(4.)clientX 可以获取鼠标指针的水平坐标
clientY 可以获取鼠标指针的垂直坐标
var X=event.clientX;
var Y=event.clientY;
tex.innerHTML = “X=”+X+" Y="+Y;
(获取到鼠标当前实时坐标输出; IE8以上的，响应函数被触发时，浏览器不会传递事件对象，)
3.javaScript对象-属性名与属性值:
1：属性名：
(1.)对象的属性名不强制要求遵守标识符规则
(2.)什么名称都可以，但是不允许这里使用，我们自己定义的使用都必须遵守标识符规则
(3.) in运算符
通过该运算符检查一个对象中是否含有指定的属性
如果含有则返回true，如果没有则返回false
语法 ：“属性名” in 对象
4.javaScript对象字面量:
1: JavaScript对象字面量
(1.)创建一个对象
var obj=new Object();
(2.)使用对象字面量来创建一个对象
2: 使用对象字面量，可以在创建对象时，直接指定对象中的属性:
(1.)语法：{属性名1:属性值1,属性名2:属性值2,…}
(2.)对象字面量的属性名可以加引号，也可以不加，建议不加
(3.)如果要使用一些特殊的属性名，则必须加上引号
3: 属性名与属性值是一组键值对结构，键与值之间用":“冒号连接，对个键值对之间使用”,“逗号隔开，如果一个属性之后没有其他的属性了，就不要写”,"逗号
7:JavaScript函数:
1.javaScrpt函数简介:
JavaScript函数
1:函数function
(1.) 函数也是一个对象
(2.) 函数中可以封装一些功能(代码),在需要的使用可以执行这些功能(代码)
(3.)函数中可以保存一些代码在需要的时候调用
(4.)用typeof检查一个函数对象时，会返回function
(5.).使用构造函数创建一个函数对象
(6.)使用函数声明创建一个函数
(7.)使用函数表达式创建一个函数/匿名函数
2:我们在开发的时候不建议使用这种方式
(1.)可以将要封装的代码以字符串的形式传递给构造函数
(2.)封装到函数中的代码不会即刻执行
(3.)函数中的代码会在函数调用的时候执行
(4.)调用函数：语法 函数对象();
(5.)当调用函数时，函数中封装的代码会按照顺序执行
3:使用函数声明来创建一个函数（建议使用方式):
(1.) 语法：function 函数名([形参1,形参2,...,形参N]){
语句
}
(2.) 说明：[形参1,形参2,...,形参N]这里的[]表示可以使用参数也可以不使用参数
函数的调用：函数名([实参1,实参2,...])
4: 匿名函数:
使用函数表达式创建一个函数/匿名函数
2.javaScript函数的参数:
1: 定义一个用来求两个数和的函数:
(1.)可以在函数的()中来指定一个或多个形参(形式参数)
(2.)多个形参之间使用","隔开，声明形参就相当于在函数内部声明了对应的变量
但是并不赋值
常用的: function sum(){
var add=233+233;
console.log(add);
}
sum();
(输出为466，这个方法只能单一的算出一个和)
2: (1.)调用函数时解析器不会检查实参的类型,所以要注意，是否有可能会接收到非法的参数，如果有可能则需要对参数进行类型的检查
(2.)调用函数时，解析器也不会对检查实参的数量，多余的参数将不会被赋值
如果实参少于形参的数据，则没有对应实参的形参将是"未定义undefined"
3.函数的返回值与立即执行函数:
1:JavaScript函数的返回值：
(1.)创建一个函数，用来计算三个数的和
(2.)可以通过return 来返回函数的返回值 (语法：return 值;)
(3.)return 后面值将会作为函数的执行结果返回，
可以定义一个变量来接收函数的返回值
(4.)在函数return后的语句都不会执行
(5.)如果return语句后不跟任何值，就相当于返回一个undefined
2:立即执行函数:
(1.)函数定义完，立即被调用，这种函数叫做立即执行函数
(2.)立即执行函数往往只会执行一次
4.函数声明:
1: 函数声明提前:
(1.)使用函数声明形式创建的函数function(){}
它会在所有的代码执行之前就被创建，所以我们在可以函数声明前来调用函数
使用函数表达式创建的函数不会被声明提前
//函数声明的方式创建的函数，可以在创建前调用:
2:在函数作用域中也有声明提前的特性
(1.)函数声明也会在函数中所有的代码执行前声明
5.构造函数:
1:JavaScript构造函数:
在创建一个Person构造函数
(1.)在创建Person构造函数中，为每个对象都添加了一个sayhello方法
(2.)目前我们的方法都是在构造方法内部创建的，也就是构造函数每执行一次就会创建一个新的sayhello方法，也就是说所有实例的sayhello都是唯一的，这样就导致了构造函数执行一次就会创建一个新的方法
(3.)执行多少次就会创建多少个新的方法，而这些方法都是一模一样的，
这样就导致了内存空间的浪费，其实我们可以让所有对象共享同一个方法
2:因此我们使用可以让所有对象共享同一个方法:
2:javascript构造函数2
1:
(1.)使用工厂方法创建的对象，使用的构造函数都是Object
(2.)所以创建的对象都是Object这个类型
就导致我们无法区分出多种不同类型的对象
2:创建一个构造函数，专门用来创建Person对象
(1.)构造函数就是一个普通的函数，创建方式和普通函数没有区别，
不同的是构造函数习惯上首字母大写
(2.)构造函数和普通函数的区别就是调用方式的不同
普通函数是直接调用，而构造函数需要使用new关键字来调用
3: 构造函数的执行流程
1.立刻创建一个新的对象
(obj 新创建的对象)
2.将新建的对象设置给函数中的this,在构造函数中可使用this来引用新建的对象
(obj==>this)
3.逐行执行函数中的代码
(给obj添加属性或方法 通过this.属性名)
4.将新建的对象作为返回值返回
(将obj 作为一个返回值进行返回 return obj)
4:对this的情况进行总结：
1.当以函数的形式调用时，this就是window对象
2.当以方法的形式调用时，this就是调用方法的这个对象
3.当以构造函数的形式调用时，this就是新创建的对象
6:javaScript函数的方法:
1:call()与apply()
(1.)这两个方法都是函数对象的方法，需要通过函数对象来调用
(2.) 当对函数调用call()和apply()都会去调用函数执行
(3.) 在调用call()与apply()可以将一个对象指定为第一个参数，
此时这个对象将会成为函数执行时的this
(4.)call()方法可以将实参在对象之后依次传递
(5.) apply() 方法需要将实参封装到一个数组中统一传递
2:this的总结：
1.以函数的形式调用时，this始终都是window对象
2.以方法的形式调用时，this就是调用方法的对象
3.以构造方法的形式调用时，this是新创建的那个对象
4.使用call与apply调用时，this是指定的那个对象
7:javaScript函数中的_arguments：
1:JavaScript__arguments:
(1.)在调用函数时，浏览器每次都会传递进来两个隐含的参数：
1.函数的上下文对象 this
2.封装实参的对象arguments
(1.)arguments是一个类数组对象，它也可以通过索引来操作数组，也可以获取长度
(2.) 在调用函数时，我们所传递的实参都会在arguments中保存
(3.) arguments.length可以用来获取实参的长度
(4.) 我们即使不定义形参，也可以通过arguments来使用实参，比较麻烦
arguments[0] 表示第一个实参
arguments[1] 表示第二个实参
(6.)它里面有一个属性叫做callee,这个属性对应一个函数对象，就是当前正在执行的函数对象
8:JavaScript内建对象:
1.1javaScript_Date对象:
1:日期对象Date
(1.)Date对象(内建对象)
在JS中使用Date对象来表示一个时间
(2.)创建一个Date对象
如果时间使用构造函数创建一个Date对象,则会封装为当前代码执行的时间
2:创建一个指定的时间对象
(1.)需要在构造函数中传递一个表示时间的字符串作为参数
(2.)getDate() - 获取当前日期对象时几日
(3.)getDay() - 获取当前日期是星期几
会返回一个0~6的值
0 表示周日
1 表示周一
...
6 表示周六
(4.)getMonth() - 获取当前日期对象的月份
会返回一个0~11的值
0 表示 一月
1 表示二月
...
11 表示十二月
(5.)getFullYear() - 获取对象以四位数字返回年份
//获取当前日期对象的小时
var hours=d.getHours();
//获取当前日期对象的分钟
var minute=d.getMinutes();
//获取当前日期对象的秒数
var second=d.getSeconds(); (输出报错)
var str=hours+":"+minute+":"+second;
console.log(str);
(输出结果为:10:33:20当时时间)
(6.)getTime()
- 获取当前日期对象的时间戳
- 时间戳，指的是从格林威治标准时间的1970年1月1日，0时0分0秒
到当前日期所花费的毫秒数（1秒=1000毫秒）
- 计算机底层在保存时间时使用都是时间戳
(7.)可以使用时间戳来测试代码的执行性能
2.javaScript_Math对象:
1:Math对象和其他对象不同，它不是一个构造函数，
(1.)它属于一个工具类不用创建对象，它里面封装了数学运算相关的属性和方法
(2.)Math.abs(x) - 返回一个数的绝对值
2:
(1.)Math.ceil() 可以对一个数进行向上取整，小数位只要有值就自动进1
ceil向上取整:
(2.)Math.floor() - 可以对一个数进行向下取整，小数部分会被舍掉
floor 向下取整:
(3.)Math.round() - 可以对一个数进行四舍五入取整
round 四舍五入取整:
3:
(1.) Math.random(): 可以用来生成一个0-1之间的随机数 公式: Math.random()
(2.)可以用来生成一个0-10之间的随机数(整数) 公式: Math.round(Math.random()*10)
(3.)可以用来生成一个0-X之间的随机数(整数) 公式: Math.round(Math.random()*X)
(4.)可以用来生成一个1-10之间的随机数(整数) 公式:Math.round(Math.random()9)+1
(5.)可以用来生成一个Y-X之间的随机数(整数) 公式: Math.round(Math.random()(X-Y))+Y
5(X)到23(Y)之间的随机数
(6.)最大值、最小值:
9:JavaScript正则表达式:
1.JavaScript正则表达式简介：
(1.) 正则表达式：又称规则表达式
英文名为Regular Expression，在代码中常简写为regex、RegExp或RE
(2.)正则表达式用于定义一些字符串的规则，计算机可以根据正则表达式，
来检查一个字符串是否符合规则，可以将字符中符合规则的内容提取出来
(3.)手机号的规则：
首先 13893443823（11位数字）
1.以1开头
2.第二位（3-9）
3.第三位以后任意9个数字
(4.)语法： var 变量=new RegExp ("正则表达式","匹配模式");
使用typeof检查正则对象，则会返回object:
var reg=new RegExp("a"); 这个表达式可以用来检查一个字符串中是否含有字符a
(5.)在构造函数中可以传递一个匹配模式作为第二个参数:
i : 忽略大小写
g: 全局匹配
(6.)正则表达式的方法：
test():
使用这个方法可以用来检查一个字符串中是否符合正则表达式的规则
如果符合则返回true，否则返回false
2:JavaScript正则表达式
(1.)使用字面量来创建正则表达式:
语法： var 变量=/正则表达式/匹配模式
(2.) 使用字面量的方法创建更加简单
(3.) 使用构造函数创建更加灵活
(4.)创建一个正则表达式，去检查一个字符串中是否含有a或b或c
(5.)创建一个正则表达式，去检查一个字符串中是否含有字母
(6.)
[] 使用中括号表示范围
[abc] 等价于 a|b|c
[a-z] 表示匹配所有的小写字母
[A-Z] 表示匹配所有的大写字母
[A-z] 表示匹配所有的字母（包含大小写）
[0-9] 表示匹配所有的数字
(7.)检查一个字符串中是否含有abc 或 adc 或则aec
(8.)创建一个正则表达式，去检查一个字符串中是否含有除了abc以外的字符
公式:[^] //shift+6
2:字符串与正则表达式相关的方法：
1:JavaScript字符串与正则表达式相关的方法
(1.)支持正则表达式的String对象的方法:
search() - 检索与正则表达式相匹配的值。
match() - 找到一个或多个正则表达式的匹配。
replace() - 替换与正则表达式匹配的子串。
split() - 把字符串分割为字符串数组。
(2.)split()
#1: 把字符串分割为字符串数组。
#2: 该方法可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分
#3: 该方法即使不指定全局匹配，也会全部拆分字符串
(3.)search()
#1: 可以搜索字符串中是否含有指定内容
#2: 如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到到返回-1
#3: 它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串
#4: serach() 只会查找第一个，即使设置全局匹配也没用
(4.）macth()
#1: 可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
#2: 默认情况下我们的macth只会找到第一个符合要求的内容，找到以后就停止检索
我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容
可以为一个正则表达式设置多个匹配模式，且顺序无所谓
#3: match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果
( 5.)replace()
#1: 可以将字符串中指定内容替换为新的内容
#2: 参数说明：
1.被替换的内容
2.新的内容
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
3:javaScript正则表达式语法(量词)
1.JavaScript正则表达式语法(量词)
(1.)创建一个正则表达式检查一个字符串中是否含有aaa:
(2.) 量词：
#1: 通过量词可以设置一个内容出现的次数
#2: 量词只对它前面一个内容起作用
#3: {n} 出现n次
#4: {m,n} 出现m次到n次
#5: {n,} 出现n次以上
#6: + 至少出现一次
#7: * 出现零次或则零次以上
#8: ? 出现一次或则零次
(3.) 检查一个字符串中是否以a开头
#1: ^ 表示开头
#2:$ 表示结尾
2.创建一个正则表达式，用来检查一个字符串是否是一个合法手机号
手机号的规则：
13893443823（11位）;
#1.以1开头
#2.第二位（3-9） (第二位数是从3到9的数字)
#3.第三位以后任意9个数字 (第三位的至最后一位数是从0到9任意数字)
4:javaScript正则表达式语法(元字符):
1.JavaScript正则表达式语法:
(1.) 检查一个字符串中是否含有"." ("."表示匹配任意字符)
(2.) 在正则表达式中\反斜杠 作为转义字符
(3.) 若想要匹配字符"."正则表达式为 \.
(4.) 表示匹配一个反斜杠\
2.
(1.) 表示匹配任意字符
(2.) \w 匹配任意字母、数字、"_" 下划线，等价于==》[A-z0-9_]
(3.) \W 匹配除了字母、数字、"_" 下划线==》[^A-z0-9_]
(4.) \d 匹配数字[0-9]
(5.) \D 除了数字[^0-9]的任意字符
(6.) \s 匹配空格
(7.) \S 匹配除了空格的任意字符
(8.) \b 匹配单词边界
(9.) \B 匹配非单词边界
10:JavaScript DOM文档对象模型:
1.javaScript_DOM文档对象模型简介:
1:对象属于一种复合的数据类型，在对象中可以存储多个不同数据类型的属性
对象的分类：
（1.）内建对象:
由ES标准中定义的对象，在任何ES的实现中都可以使用
(ES:可以在极短的时间内存储、搜索和分析大量的数据。通常作为具有复杂搜索场景情况下的核心发动机)
例如：数字函数对象Math 、字符String 、数值Number 、布尔Boolean 、功能Function 、对象Object...
(2.)宿主对象:
由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象
比如：BOM(浏览器对象模型) DOM(文档对象模型)
例如 :我们常用的console.log() 就是DOM 中的对象
(3.)自定义对象
由咱们开发人员自己定义的对象
2:宿主对象：DOM对象 BOM对象
什么是DOM?
(1.) DOM，全称Document Object Model文档对象模型
(2.) JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的
操作WEB页面
(3.) 文档
- 文档表示的就是整个的HTML网页文档, (我们创建的HTML)
(4.)对象
- 对象表示将网页中的每一个部分都转换为了一个对象, (HTML中的标签如:<div>、<body>)
(5.)模型
- 使用模型来表示对象之间的关系，这样方便我们获取对象,
注释:(用模型进行一个HTML文档的关系链接如<head>和<bady>标签是HTML的子分类。例如:想找到<a>标签那么就能从<body>标签里找到<a>标签)
2:javaScript_DOM文档对象模型的节点简介:
1.节点
节点Node:
(1.)是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点
注释:( 比如：html标签、属性、文本、注释、整个文档等都是一个节点)
(2.) 虽然都是节点，但是实际上他们的具体类型是不同的
(3.)比如：标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点
注释:(标签=元素节点、属性=属性节点、文本=文本节点、文档=文档节点)
(4.)节点的类型不同，属性和方法也都不尽相同。
(5.)节点：Node——构成HTML文档最基本的单元。
常用节点分为四类:
#1: 文档节点：整个HTML文档
#2: 元素节点：HTML文档中的HTML标签
#3: 属性节点：元素的属性
#4: 文本节点：HTML标签中的文本内容
(6.)节点的属性：
nodeName节点名称
nodeType 节点类型
nodeValue节点的值
2:文档节点（document）：
(1.) 文档节点document，代表的是整个HTML文档，网页中的所有节点都是它的子节点。
(2.)document对象作为window对象的属性存在的，我们不用获取可以直接使用
(3.)通过该对象我们可以在整个文档访问内查找节点对象，并可以通过该对象创建各种节点对象
3:元素节点（Element）:
(1.)HTML中的各种标签都是元素节点，这也是我们最常用的一个节点。(<div>、<h1>...)
(2.) 浏览器会将页面中所有的标签都转换为一个元素节点，我们可以通过document的方法来获取元素节点。
比如：document.getElementById()
(3.) 根据id属性值获取一个元素节点对象。
4:文本节点（Text）:
(1.) 文本节点表示的是HTML标签以外的文本内容，任意非HTML的文本都是文本节点。
(2.) 它包括可以字面解释的纯文本内容
(3.)文本节点一般是作为元素节点的子节点存在
(4.) 获取文本节点时，一般先要获取元素节点。在通过元素节点获取文本节点
注释:(除了HTML文档节点、<body>元素节点; 代码、注释等等就是文本节点;是作为元素节点的子节点存在;就是要找到文本就得找到元素作为搜索对象)
(5.) 例如：
#1: 元素节点.firstChild;
#2: 获取元素节点的第一个子节点，一般为文本节点
注释:(元素节点中<h1 id="demo">hello javascript<h1>)
5:属性节点（Attr）
(1.)属性节点表示的是标签中的一个的属性，这里要注意的是属性节点并非是元素节点的子节点，
而是元素节点的一部分
(2.)可以通过元素节点来获取指定的属性节点
(3.) 例如：
元素节点.getAttributeNode("属性名");
注释:(元素节点中<h1 id="demo">hello javascript<h1>; id="demo"就是属性
注释:(注意！！！：我们一般不使用属性节点。)
6:节点的属性：
1: nodeName节点名称 :
一、nodeName 属性: 节点的名称，是只读的。
(1). 元素节点的 nodeName 与标签名相同
(2). 属性节点的 nodeName 是属性的名称
(3). 文本节点的 nodeName 永远是 #text
(4). 文档节点的 nodeName 永远是 #document
2:nodeType 节点类型:
三、nodeType 属性: 节点的类型，是只读的。以下常用的几种节点类型:
四、 元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
3:nodeValue节点的值:
二、nodeValue 属性：节点的值
(1). 元素节点的 nodeValue 是 undefined 或 null
(2). 文本节点的 nodeValue 是文本自身
(3). 属性节点的 nodeValue 是属性的值
3:javaScript_DOM节点的操作:
1:获取元素节点
通过document对象调用
(1.) getElementById() 通过id属性获取一个元素节点对象
(2.) getElementsByTagName() 通过标签名获取一组元素节点对象
(3.) getElementsByName() 通过name属性获取一组元素节点对象
(4.)getElementsByClassName() 通过标类名获取一组元素节点对象，该方法不支持IE8及以下版本
2.获取元素节点的子节点:
通过具体的元素节点调用:
(1.) getElementsByTagName()
–方法，返回当前节点的指定标签名后代节点
(2.) childNodes
–属性，表示当前节点的所有子节点
注释:(获取了所有的节点包括空白节点如:回车键)
(3.) firstChild
– 属性，表示当前节点的第一个子节点
(4.)lastChild
– 属性，表示当前节点的最后一个子节点
3.获取父节点和兄弟节点
通过具体的节点调用:
(1.) parentNode
– 属性，表示当前节点的父节点
(2.) previousSibling
– 属性，表示当前节点的前一个兄弟节点
(3.) nextSibling
– 属性，表示当前节点的后一个兄弟节点
4.元素节点的属性 (属性节点是元素节点的一部分)
(1.) 获取:元素对象.属性名:
想要获取的例：element.value
element.id
element.className
(2.) 设置，元素对象.属性名=新的值
想要设置的例：element.value = "hello"
element.id = "id01"
element.className = "newClass"
(3.)其他属性
#1: nodeValue
– 文本节点可以通过nodeValue属性获取和设置文本节点的内容
#2: innerHTML
– 元素节点通过该属性获取和设置标签内部的html代码
5.使用CSS选择器进行查询:
(1.)querySelector()
(2.)querySelectorAll()
#1: 这两个方法都是用document对象来调用，两个方法使用相同，都是传递一个选择器字符串作为参数，方法会自动根据选择器字符串去网页中查找元素。
#2: 不同的地方是querySelector()只会返回找到的第一个元素，而querySelectorAll()会返回所有符合条件的元素。
6.节点的修改
这里的修改我们主要指对元素节点的操作
• 创建节点
– document.createElement("标签名")
• 删除节点
– 父节点.removeChild(子节点)
• 替换节点
– 父节点.replaceChild(新节点 , 旧节点)
• 插入节点
– 父节点.appendChild(子节点)
– 父节点.insertBefore(新节点 , 旧节点)
4:javaScript_DOM元素样式的获取:
1.JS修改元素的样式：元素.style.样式名=样式值
读取方式：元素.style.样式名
通过style属性设置和读取的都是内联样式
2.获取元素的当前显示样式:
语法：元素.currentStyle.属性名 或 元素.currentStyle[属性名]
currentStyle可以用来读取当前元素正在显示的样式，如果当前元素没有设置该样式，
则获取它的默认值。例如：如果没有设置width，获取到的值为auto
(注意：！！！该属性只有IE支持，其他的浏览器都不支持)
3.在其他浏览器中可以使用 (获取元素显示样式)
(1.)getComputedStyle()这个方法获取当前元素的显示样式, 这个方法是window的方法，可以直接使用
(2.)参数说明：
1.需要获取样式的元素
2.可以传递一个伪元素，一般都传null
(3.)说明：该方法返回一个对象，对象中封装了当前元素对应的样式
var obj=getComputedStyle(element,null); (该方法的使用说明)
(4.)获取元素显示样式：
obj.属性名 或则 obj["属性名"]
如果获取的样式没有设置，则会获取到真实的值，而不是默认值。
例如：如果没有设置width，获取到的值为1200px(元素实际的值)
(注意：！！！该方法不支持IE8及以下的浏览器)
4.定义一个函数，用来获取指定元素的当前样式:
参数：
1. element 要获取样式的元素
2. name 需要获取的样式名
5:javaScript_DOM元素的属性与方法:
1.Element属性和方法:
下面的属性和方法可用于所有 HTML 元素上：
属性 / 方法 描述
element.accessKey 设置或返回元素的快捷键。
element.appendChild() 向元素添加新的子节点，作为最后一个子节点。
element.attributes 返回元素属性的 NamedNodeMap。
element.childNodes 返回元素子节点的 NodeList。
element.className 设置或返回元素的 class 属性。
element.clientHeight 返回元素的可见高度。
element.clientWidth 返回元素的可见宽度。
element.cloneNode() 克隆元素。
element.compareDocumentPosition() 比较两个元素的文档位置。
element.contentEditable 设置或返回元素的文本方向。
element.dir 设置或返回元素的内容是否可编辑。
element.firstChild 返回元素的首个子。
element.getAttribute() 返回元素节点的指定属性值。
element.getAttributeNode() 返回指定的属性节点。
element.getElementsByTagName() 返回拥有指定标签名的所有子元素的集合。
element.getFeature() 返回实现了指定特性的 API 的某个对象。
element.getUserData() 返回关联元素上键的对象。
element.hasAttribute() 如果元素拥有指定属性，则返回true，否则返回 false。
element.hasAttributes() 如果元素拥有属性，则返回 true，否则返回 false。
element.hasChildNodes() 如果元素拥有子节点，则返回 true，否则 false。
element.id 设置或返回元素的 id。
element.innerHTML 设置或返回元素的内容。
element.insertBefore() 在指定的已有的子节点之前插入新节点。
element.isContentEditable 设置或返回元素的内容。
element.isDefaultNamespace() 如果指定的 namespaceURI 是默认的，则返回 true，否则返回 false。
element.isEqualNode() 检查两个元素是否相等。
element.isSameNode() 检查两个元素是否是相同的节点。
element.isSupported() 如果元素支持指定特性，则返回 true。
element.lang 设置或返回元素的语言代码。
element.lastChild 返回元素的最后一个子元素。
element.namespaceURI 返回元素的 namespace URI。
element.nextSibling 返回位于相同节点树层级的下一个节点。
element.nodeName 返回元素的名称。
element.nodeType 返回元素的节点类型。
element.nodeValue 设置或返回元素值。
element.normalize() 合并元素中相邻的文本节点，并移除空的文本节点。
element.offsetHeight 返回元素的高度。
element.offsetWidth 返回元素的宽度。
element.offsetLeft 返回元素的水平偏移位置。
element.offsetParent 返回元素的偏移容器。
element.offsetTop 返回元素的垂直偏移位置。
element.ownerDocument 返回元素的根元素（文档对象）。
element.parentNode 返回元素的父节点。
element.previousSibling 返回位于相同节点树层级的前一个元素。
element.removeAttribute() 从元素中移除指定属性。
element.removeAttributeNode() 移除指定的属性节点，并返回被移除的节点。
element.removeChild() 从元素中移除子节点。
element.replaceChild() 替换元素中的子节点。
element.scrollHeight 返回元素的整体高度。
element.scrollLeft 返回元素左边缘与视图之间的距离。
element.scrollTop 返回元素上边缘与视图之间的距离。
element.scrollWidth 返回元素的整体宽度。
element.setAttribute() 把指定属性设置或更改为指定值。
element.setAttributeNode() 设置或更改指定属性节点。
element.setIdAttribute()
element.setIdAttributeNode()
element.setUserData() 把对象关联到元素上的键。
element.style 设置或返回元素的 style 属性。
element.tabIndex 设置或返回元素的 tab 键控制次序。
element.tagName 返回元素的标签名。
element.textContent 设置或返回节点及其后代的文本内容。
element.title 设置或返回元素的 title 属性。
element.toString() 把元素转换为字符串。
nodelist.item() 返回 NodeList 中位于指定下标的节点。
nodelist.length 返回 NodeList 中的节点数。
2.注: (1.)element.clientHeight
(2.)element.clientWidth
#1: 这两个属性可以获取元素的可见宽度和高度
#2: 这些属性都是不带px的，返回都是一个数字，可以直接进行计算
#3: 会获取元素宽度和高度，包括内容区和内边距
#4: 这些属性都是只读的，不能修改
3. (1.)element.offsetHeight
(2.)element.offsetWidth
获取元素的整个的宽度和高度，包括内容区、内边距和边框
4 .element.offsetParent
(1.)可以获取当前元素的定位父元素
(2.)会获取到距离当前元素最近的设置定位的祖先元素
(3.)如果所有的祖先元素都没有设置定位，则返回body
5.(1.)element.offsetLeft
#1: 当前元素相对应其定位元素的水平偏移量
(2.)element.offsetTop
#2: 当前元素相对应其定位元素的垂直偏移量
6.(1.)element.scrollWidth
(2.)element.scrollHeight
#1: 可以获取元素整个滚动区域的宽度和高度
7.(1.)element.scrollLeft
#1: 可以获取水平滚动条滚动的距离
(2.)element.scrollTop
#2: 可以获取垂直滚动条滚动的距离
6:javaScript_DOM_scrollTop应用:
1:如果把文档中第二个
标签中的标签的"disabled"注释那么就不用把服务条款完直接点同意就行
11:JavaScript事件:
1:事件简介:
1. JavaScript事件简介
事件
(1.)事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间
(2.) JavaScript 与 HTML 之间的交互是通过事件实现的。
(3.) 对于 Web 应用来说，有下面这些代表性的事件：单击事件、鼠标移入移出事件、键盘按下/弹起事件等等
(4.)事件就是用户与浏览器的交互行为 (如点击按钮浏览器弹出一个弹出框)
(5.)常用的事件:
onclick 鼠标点击某个对象
ondblclick 鼠标双击某个对象
onerror 当加载文档或图像时发生某个错误
onfocus 元素获得焦点
onblur 元素失去焦点
onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下或按住
onkeyup 某个键盘的键被松开
onload 某个页面或图像被完成加载
onmousedown 某个鼠标按键被按下
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上
onmouseup 某个鼠标按键被松开
onreset 重置按钮被点击
onresize 窗口或框架被调整尺寸
onselect 文本被选定
onsubmit 提交按钮被点击
onunload 用户退出页面
2：javaScript文档的加载中 onload 事件:
(1.)onload事件会在整个页面加载完成之后触发，为window绑定一个onload事件
(2.)(从性能方面考虑，写在下边更好！为了大家养成良好的习惯，强制要求写在下面 )
(3.) (将js代码写在页面的下面，就是为了保证执行代码的时候页面已经加载完毕)
(4.)( window.onload 在页面上只能出现一次，后面的代码会覆盖前面的代码)
(5.)(如果有两个"window.onload"事件它会执行后面的那个，后面的代码会覆盖前面的代码)
3:JavaScript事件对象(Event):
1:鼠标 / 键盘属性
属性 描述
altKey 返回当事件被触发时，"ALT" 是否被按下。
button 返回当事件被触发时，哪个鼠标按钮被点击。
clientX 返回当事件被触发时，鼠标指针的水平坐标。
clientY 返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。
metaKey 返回当事件被触发时，"meta" 键是否被按下。
relatedTarget 返回与事件的目标节点相关的节点。
screenX 返回当某个事件被触发时，鼠标指针的水平坐标。
screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey 返回当事件被触发时，"SHIFT" 键是否被按下。
(1.)onmousemove ，该事件将会在鼠标在元素中移动时被触发
(2.)事件对象:
当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递传递进响应函数,
在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标 键盘那个按键被按下，
鼠标滚轮滚动的方向
2.第二个
222
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
