第一课时 入门基础
1、window
作用域
- 只要在
script
标签中定义的变量,默认就在window
的作用域之下 - 默认就是
window
这个对象里面写代码
2、数据类型
如何判断js中的数据类型:
-
typeof
、instanceof
、constructor
、prototype
方法比较 -
如何判断
js
中的类型呢,先举几个例子:
|
最常见的判断方法:typeof
|
- 其中
typeof
返回的类型都是字符串形式,需注意,例如:
|
- 另外
typeof
可以判断function
的类型;在判断除Object
类型的对象时比较方便。
判断已知对象类型的方法:instanceof
|
- 注意:
instanceof
后面一定要是对象类型,并且大小写不能错,该方法适合一些条件选择或分支。
根据对象的constructor
判断:constructor
|
-
注意:
constructor
在类继承时会出错 -
例子:
|
- 而
instanceof
方法不会出现该问题,对象直接继承和间接继承的都会报true
:
|
- 言归正传,解决
construtor
的问题通常是让对象的constructor
手动指向自己:
|
通用但很繁琐的方法: prototype
|
- 大小写不能写错,比较麻烦,但胜在通用。
- 通常情况下用
typeof
判断就可以了,遇到预知Object
类型的情况可以选用instanceof
或constructor
方法
Javascript的数据类型有六种(ES6新增了第七种Symbol
)
- 数值(
number
):整数和小数(比如1和3.14) - 字符串(
string
):字符组成的文本(比如”Hello World”) - 布尔值(
boolean
):true(真)和false(假)两个特定值 undefined
:表示 未定义 或不存在,即此处目前没有任何值null
:表示空缺,即此处应该有一个值,但目前为空- 对象(
object
):各种值组成的集合 - 通常,我们将数值、字符串、布尔值称为原始类型(
primitive type
)的值,即它们是最基本的数据类型,不能再细分了。而将对象称为合成类型(complex type
)的值,因为一个对象往往是多个原始类型的值的合成,可以看作是一个存放各种值的容器。至于undefined
和null
,一般将它们看成两个特殊值
内存中一共分为几种对象:
- 变量
DOM
对象- 常量
- 自定义对象
数据类型转换
转换函数
toString()
转换为字符串,在JavaScript中所有数据类型都可以转换为string
类型
|
-
parseInt()
解析出一个string
或者number
类型的整数部分,如果没有可以转换的部分,则返回NaN
(not a number
)var n1 = "12";var n2 = "23hello";var n3 = "hello";parseInt(n1); //12parseInt(n2); //23parseInt(n3); //NaNparseFloat()
解析出一个string
的浮点数部分,如果没有可以转换的部分,则返回NaN
(not a number
)
var n1 = "1.2.3";var n2 = "1.2hello"var n3 = "hello"parseFloat(n1); //1.2parseFloat(n2); //1.2parseFloat(n3); //NaN
强制类型转换
Boolean(value)
- 把给定的值转换成Boolean
型
|
Number(value)
-把给定的值转换成数字(可以是整数或浮点数)
|
-
String(value)
- 把给定的值转换成字符串String( 123); //"123"String([ 1, 2]); //"1,2"String( undefined) //"undefined"String( null) //"null"String({}) //"[object Object]"
隐式转换
- 数字+字符串:数字转换为字符串
console.log(12+"12")
; //1212 - 数字+布尔值:
true
转换为1
,false
转换为0
console.log(12+true)
; //13 - 字符串+布尔值:布尔值转换为true或false
console.log("hello"+true)
; //hellotrue
- 布尔值+布尔值
console.log(true+true)
; //2
null和undefined
undefined
表示一种未知状态,声明了但没有初始化的变量,变量的值是一个未知状态。访问不存在的属性或对象window.xxx
)方法没有明确返回值时,返回值是一个undefined.
当对未声明的变量应用typeof
运算符时,显示为undefined
。null
表示尚未存在的对象,null
是一个有特殊意义的值。可以为变量赋值为null
,此时变量的值为“已知状态”(不是undefined
),即null
。(用来初始化变量,清除变量内容,释放内存)
|
3、javascript脚本执行顺序
- 第一步定义: 分为
var
定义 和函数定义function
- 第二步执行: 其他所有
- 先从上往下定义完所有的后,再从上往下执行 除了
var
function
定义外的 其他都是执行 如:赋值 函数调用 - 在栈里面找到的,就不去堆里面找,因为栈空间小,就近原则【总之:先在栈里面找,找不到再去堆里面找】在栈里面开辟,就能找到堆里面的地址 如:
var b = function(){}
总结一下==
运算的规则:(隐式转换)
-
JS
中的值有两种类型:原始类型(Primitive
)、对象类型(Object
)。 -
原始类型包括:
Undefined
、Null
、Boolean
、Number
和String
等五种。 -
Undefined
类型和Null
类型的都只有一个值,即undefined
和null
;Boolean
类型有两个值:true
和false
;Number
类型的值有很多很多;String
类型的值理论上有无数个。 -
所有对象都有
valueOf()
和toString()
方法,它们继承自Object
,当然也可能被子类重写 -
undefined == null
,结果是true
。且它俩与所有其他值比较的结果都是false
。 -
String == Boolean
,需要两个操作数同时转为Number
。 -
String/Boolean == Number
,需要String/Boolean
转为Number
。 -
Object == Primitive
,需要Object
转为Primitive
(具体通过valueOf
和toString
方法)
第二课时
上节回顾:
-
1、
window
作用域- 只要在
script
标签中定义的变量,默认就在window
的作用域之下 - 默认就是
window
这个对象里面写代码
- 只要在
-
2、数据类型
number
:数字string
:字符类型,必须用引号引起来boolean
:布尔类型true
false
null
:变量引用了一块堆中一个空的空间object
:引用对象类型(存在于堆里面)array
:数组类型function
:函数数据类型
-
对象数据类型:
object
,array
,function
-
3、
javascript
脚本执行顺序- 定义
var
function
- 执行 其他所有
- 定义
知识点:
1、运算符
-
算术运算符(
+
,-
,*
,/
,%
,++
,--
)- 如果引用所指的地方是
null
的话,那么在运算中就会自动变成0
%
运算符 如:4%5
取模 模是4
7%5
取模 模是7-5=2
- 如果引用所指的地方是
-
字符串和数字相加的情况:
- 左右都是数字:数字相加
- 左右有一个字符串:字符串拼接
- 左右边有一个
null
:null
看做0
- 左右边有一个
undefined
:结果是NAN
(not is number
)
-
赋值运算符(
=
,-=
,+=
,*=
,/=
,%=
) -
比较运算符(
==
,===
,!=
,>
,<
,>=
,<=
)- 先执行表达式计算再赋值
==
和!=
在比较之前首先让双方的值做隐士类型转换,===
不转换
-
逻辑运算符(
||
,&&
,!
)||
在js中和PHP中是不一样的 js中返回逻辑或的左边或右边的一个结果 PHP返回||
或出来以后的结果即:true
false
- 特殊性(注意)—一定要记住(这个特性和其他编程语言不一样):在
js
里返回不是布尔值 ||
短路运算 第一个条件为真 后面不执行&&
把表达式最后一个值返回(注意这里)
条件运符(表达式1?表达式2:表达式3
)三元运算符
表达式1?表达式2:表达式3
表达式1为真 返回表达式2 否则返回表达式3- 三元运算符 可以多层次嵌套使用
2、在js中 有四种被认为是非
:
undefined
null
false
0
- 例子:
var age = prompt("温馨提示:","请输入您的年龄")||0
- 当点击取消的时候,如果出现
undefined
null
fasle
0
表示非的逻辑 那么||
就会过滤,取右边的值0
第三课时
上节回顾:
-
1、运算符
- 算术运算符(
+
,-
,*
,/
,%
,++
,--
) - 如果
+
号左边和右边有一边是字符串类型的数据的话,这个时候就变成字符串拼接 var str = "你好"+123;
//你好123var count = 2;
var str1 = "你叫了我第"-count+"次";
//你叫了我第2次- 如果引用所指的地方是
null
的话,那么在运算中就会自动变成0
- 算术运算符(
-
2、赋值运算符*(
=
,-=
,+=
,`=,
/=,
%=`) -
3、 比较运算符(
==,===,!=,>,<,>=,<=
)- 先执行表达式计算再赋值
==
和!=
在比较之前首先让双方的值做隐士类型转换,===
不转换
- 4、逻辑运算符(
||,&&,!
) - 5、条件运算符(
1>2?3:4
)
知识点:
1、console.log
调试程序
- 开发中大量使用这个 而不用
alert
2、条件结构
if
javascript
中if
语句优化写法
- 使用常见的三元操作符
|
- 使用
and(&&)
和or(||)
运算符
|
if...else
if...else if...else
- 当通过判断返回某个值的时候,优先使用三元表达式
- 当通过判断执行
N
段逻辑代码的时候,只能用条件结构
第四课时
上节回顾:
- 1、
console.log
调试程序 - 2、条件结构
if
if...else
if...else if...else
- 当通过判断返回某个值的时候,优先使用三元表达式
- 当通过判断执行
N
段逻辑代码的时候,只能用条件结构
知识点:
1、switch
-
switch case break default
条件 判断 退出 默认- a.只要匹配上一个
case
,那么它下面的所有的case
都会执行包括default
- b.
break
的意思跳出当前结构
- a.只要匹配上一个
2、for
- 循环有三个要素
- a.循环变量
- b.判断(循环体)
- c.改变循环变量
- d.
continue
的意思结束本次循环进入下次循环
continue
结束本次循环,继续下一次循环 当前这次循环不做 直接做下面的break
结束后面的循环不做了
第五课时
上节回顾:
1、switch
switch case break default
条件 判断 退出 默认- a.只要匹配上一个
case
,那么它下面的所有的case
都会执行包括default
- b.
break
的意思跳出当前结构
- a.只要匹配上一个
2、for
- 循环有三个要素
- a.循环变量
- b.判断条件(循环体)
- c.改变循环变量
- d.
continue
的意思结束本次循环进入下次循环
知识点:
1、while/do...while
没有谁好谁坏 只有适应场景不同
- 比如:先吃饭 在买单
do..while
用户体验高 有风险 扫雷游戏也是先体验 在问是否退出 提高体验 - 比如:先买单 在吃饭
while
用户体验不高 - 一般情况下面,如果条件判断是
数字的
比较==<>
,for
循环优先. - 如果是
非数值相关的
比较循环,while
优先
2、代码内存解析
闭包
- a.程序永远是先定义后执行
- b.执行永远从上到下
- c.函数定义的话在堆(只是一个地址而已)
- d.函数调用的时候,就会有自己的堆和栈(
闭包
)
闭包 作用域
- 记住:先定义
var
function
在从上往下执行 - 定义定义在自己的栈里面 执行在自己的堆里面
- 运行在运行的环境中
- 函数每调用前 只是一个地址
- 只要调用一次函数就会动态开辟一块内存 创建一个封闭的空间 在自己的封闭的空间的栈中定义
var
在执行 - 函数执行完 里面的东西全部销毁
|
|
|
4、object对象
5、面向对象的程序设计
- a.
function
构造器 - b.
prototype
原型 - c.
foreach
- c.作用域
- d.继承
第六课时
上节回顾:
- 1.
switch
-
2.
while/do...while
- 一般情况下面,如果条件判断是数字的比较
==<>
,for
循环优先. - 如果是非数值相关的比较循环,
while
优先
- 一般情况下面,如果条件判断是数字的比较
-
3.
function
函数 - 4.代码内存解析
- 闭包
- a.程序永远是先定义后执行
- b.执行永远从上之下
- c.函数定义的话在堆(只是一个地址而已)
- d.函数调用的时候,就会有自己的堆和栈(闭包)
- 闭包
知识点:
1、object对象
new
关键字代表的是新开辟一块内存空间-
没有被引用的内存空间,会在适当的时候被销毁
-
两句代码含义等同
var person = new Object()
;var person = {};
-
-
访问对象的属性除了用 对象引用
.属性
key
以外,还可以使用对象引用[属性key]
new 原理详细解析
- 无论什么时候,只要创建一个新函数,就会根据一组特定的规则为该函数创建一个
prototype
属性,这个属性指向函数的原型对象。 - 在默认情况下,所有原型对象都会自动获得一个
constructor
(构造函数)属性,这个属性包含一个指向prototype
属性所在函数的指针(就是指向新创建的函数)。 - 通过这个构造函数(原型对象的构造函数),可以继续为原型对象添加其他属性和方法。
- 当调用构造函数创建一个新实例后,该实例的内部将包含一个指针(内部属性),指向构造函数的原型对象。
ECMA-262
第5版管这个指针叫[[Prototype]]
。脚本中没有标准的方式访问[[Prototype]]
,但Firefox
、Safari
和Chrome
在每个对象上都支持一个属性__proto__
;而在其他实现中,这个属性对脚本是完全不可见的。不过,要明确的真正重要的一点就是,这个连接存在于实例和构造函数的原型对象之间,而不是存在于实例和构造函数之间
new创建对象的步骤
- 创建一个新的对象
- 将构造函数的作用域赋给新对象
- 执行构造函数的代码,为这个新对象添加属性
- 返回新对象
|
2、面向对象的程序设计
-
function
构造器- 共同点:
- 动态创建一块内存空间,闭包
- 不同点:
- 函数调用是没有办法拿到空间的地址的,而且这块地址是一块临时地址,执行完函数之后,就会销毁
new
开辟内存空间,把这块空间的地址返回,这块空间就有可能长期的被引用
- 共同点:
prototype
原型- 通过原型使通过同样一个构造器所
new(创建)
出来的对象具有相同的属性和行为 prototype
本质就是一个对象
- 通过原型使通过同样一个构造器所
foreach
this
指代当前创建的这块内存this.name=name
指代当前内存中的这个name
属性 接收外界传过来的值继承
多种构造函数
传统的创建对象
|
工厂模式
|
构造函数
|
原型模式
|
简单原型模式
|
构造函数和原型模式
|
动态原型模式
|
稳妥构造函数
|
其他:
- 函数调用后一定有返回值,没有返回值就是
undefined
第七课时
上节回顾:
1.object对象
new
关键字代表的是新开辟一块内存空间- 没有被引用的内存空间,会在适当的时候被销毁
- 两句代码含义等同
var person = new Object();
var person = {};
- 访问对象的属性除了用 对象引用属性
key
以外,还可以使用对象引用[属性key]
2.面向对象的程序设计
- a.
function
构造器- 共同点:
- 动态创建一块内存空间,闭包
- 不同点:
- 函数调用是没有办法拿到空间的地址的,而且这块地址是一块临时地址,执行完函数之后,就会销毁
new
开辟内存空间,把这块空间的地址返回,这块空间就有可能长期的被引用
- 共同点:
- b.
prototype
原型- 通过原型使通过同样一个构造器所
new
(创建)出来的对象具有相同的属性和行为 prototype
本质就是一个对象
- 通过原型使通过同样一个构造器所
- c.
foreach
- c.
this
- d.继承
知识点:
1.prototype内存解析
prototype
是原型,是一块所有对应构造器创建的对象都共享的内存空间- 在面向对象设计程序的时候,属性应该是对应的空间的,而功能应该是
prototype
公共空间的
2.通过prototype扩展功能
- 所有的构造器都是继承于
Object
构造器的,因此只要Object
的原型里有的功能,所有的对象都有
|
第八课时
回顾:
1、prototype内存解析
prototype
是原型,是一块所有对应构造器创建的对象都共享的内存空间- 在面向对象设计程序的时候,属性应该是对应的空间的,而功能应该是
prototype
公共空间的
2、通过prototype扩展功能
- 所有的构造器都是继承于
Object
构造器的,因此只要Object
的原型里有的功能,所有的对象都有 - 构造器在定义的时候 就默认创建了一个空的原型
3、封装
- 1:找对象 小头爸爸 大头儿子 饭
- 2:抽象(类,构造器)
-
3:创建对象并且建立关系(操作对象)
-
面向对象例子
|
第九课时
上节回顾:
1.继承
- 本质就是从一个
prototype
对象中把它的功能都copy
到另一个prototype
对象 - 继承为什么要循环
2.call apply方法的使用
func.call(obj)
:调用func
的时候,以obj
这个对象的作用域去调用- 改变函数在调用的时候里面闭包的作用域
call(obj,arg1,arg2,arg3)
;call
第一个参数传对象,可以是null
。参数以逗号分开进行传值,参数可以是任何类型。
apply(obj,[arg1,arg2,arg3])
;apply
第一个参数传对象,参数可以是数组或者arguments
对象
知识点:
API application program interface
- 第一:遇到问题
- 第二:查资料或者学习 -> 解决问题
- 第三:记住有这个功能
- 第四:查资料(百度)
常用API
- 1.
String
- 2.
Array
- 3.
Math Math.random();
- 4.
Date
日期型函数Date
- 声明
|
- 获取时间的某部份
|
- 计算之前或未来的时间
|
- 计算两个日期的偏移量
|
- 检查有效日期
|
字符串String型函数API
- 声明
|
- 字符串连接
|
- 截取字符串
|
- 转换大小写
|
- 字符串比较
|
- 检索字符串
|
- 查找替换字符串
|
-
特殊字符
\b
: 后退符\t
: 水平制表符\n
: 换行符\v
: 垂直制表符\f
: 分页符\r
: 回车符\”
: 双引号\’
: 单引号\\ 反斜杆
- 将字符转换成
Unicode
编码
|
- 将字符串转换成URL编码
|
- 扩展阅读
Math对象型
-
Math.abs(num)
: 返回num
的绝对值 -
Math.acos(num)
: 返回num
的反余弦值 -
Math.asin(num)
: 返回num
的反正弦值 -
Math.atan(num)
: 返回num
的反正切值 -
Math.atan2(y,x)
: 返回y
除以x
的商的反正切值 -
Math.ceil(num)
: 返回大于num
的最小整数 -
Math.cos(num)
: 返回num
的余弦值 -
Math.exp(x)
: 返回以自然数为底,x次幂的数 -
Math.floor(num)
: 返回小于num
的最大整数 -
Math.log(num)
: 返回num
的自然对数 -
Math.max(num1,num2)
: 返回num1
和num2
中较大的一个 -
Math.min(num1,num2)
: 返回num1
和num2
中较小的一个 -
Math.pow(x,y)
: 返回x
的y
次方的值 -
Math.random()
: 返回0
到1
之间的一个随机数 -
Math.round(num)
: 返回num
四舍五入后的值 -
Math.sin(num)
: 返回num
的正弦值 -
Math.sqrt(num)
: 返回num
的平方根 -
Math.tan(num)
: 返回num
的正切值 -
Math.E
: 自然数(2.718281828459045
) -
Math.LN2
:2
的自然对数(0.6931471805599453
) -
Math.LN10
:10
的自然对数(2.302585092994046
) -
Math.LOG2E
:log 2
为底的自然数(1.4426950408889634
) -
Math.LOG10E
:log 10
为底的自然数(0.4342944819032518
) -
Math.PI
:π(3.141592653589793)
-
Math.SQRT1_2
:1/2
的平方根(0.7071067811865476
) -
Math.SQRT2
:2
的平方根(1.4142135623730951
)
Number型 常用的数字函数
- 声明
|
- 字符串与数字间的转换
|
- 判断是否为有效的数字
|
- 数字型比较
|
- 格式化显示数字
|
- X进制数字的转换
|
- 随机数
|
5.Regex
|
第十课时
上节回顾:
- 1.
String
- 2.
Math
Math.random()
知识点:
- 1.
Date
日期类 - 2.
Array
- 3.
Regex
- a.
[]
一个字符的范围 - b.有顺序要求的
- c.
\w==[a-zA-Z0-9_]
\d==[0-9]
- d.
{count}
设置匹配数量比如\w{5}
- e.
//
的正则表达式匹配局部,/^$/
的正则表达式是匹配全部 - f.
()
的作用就是为了分组匹配
- a.
- 简单封装一个对象案例
|
|
第十一课时
上节回顾:
- 1.
Date
期类 - 2.
Array
- 3.
Regex
- a.
[]
一个字符的范围 - b.有顺序要求的
- c.
\w==[a-zA-Z0-9_]
\d==[0-9]
- d.
{count}
设置匹配数量比如\w{5}
,{c1,c2}
- e.
//
的正则表达式匹配局部,/^$/
的正则表达式是匹配全部 - f.
()
的作用就是为了分组匹配
- a.
新知识点:
- 1.
Regex
- g.
+
代表的是1-N
个,*
代表的是0-N
个 - h.
?
代表该字符要不没有要不就有一个 - i.
.
代表的是任意字符 - j.
\转义符
- g.
- 2.
BOM
第十二课时
上节回顾:
- 1.Regex
- a.
[]
一个字符的范围 - b.有顺序要求的
- c.
\w==[a-zA-Z0-9_]
\d==[0-9]
- d.
{count}
设置匹配数量比如\w{5}
,{c1,c2}
- e.
//
的正则表达式匹配局部,/^$/
的正则表达式是匹配全部 - f.
()
的作用就是为了分组匹配 - g.+代表的是
1-N
个,*
代表的是0-N
个 - h.
?
代表该字符要不没有要不就有一个 - i.
.
代表的是任意字符 - j.
\转义符
- a.
新知识:
window
是Window
构造器造出来的一个对象alert(window instanceof Window)
document
是Document
构造器造出来的一个对象- 任何对象在我们的内存中他都是由某个构造器创建出来的 也就是说 有构造器一定有对应的原型prototype
- 例如:
div
是由HTMLDivElement
这个构造器创建的一个实例div = new HTMLDivElement()
span = new HTMLSpanElement()
- 查看某个对象对应的构造器:
console.log();
- 整个浏览器的实现就是一个面向对象的编程思想 一切皆是对象
1.BOM 浏览器对象模型
- a.
screen
指的不是浏览器的宽度,指的是整个电脑屏幕的分辨率- 可以拿到屏幕可用分辨率
- b.
navigator
- 可以通过
userAgent
判断当前浏览器信息
- 可以通过
- c.
location
URL
:统一资源定位符Union Resource Location
- 可以通过
href
属性重定向(改变)页面的URL,进行页面跳转
- d.
history
go
方法能够让我们进行历史回退或者前进
-
e.
frames
- 获得当前窗体的子页面(
iframe
)
- 获得当前窗体的子页面(
-
f.
document
DOM
模型的核心对象
2.DOM
文档对象模型
-
document
- 功能
getElementById
$('#aaa')
getElementByTagName
$('div')
getElementsByClassName
$('.aaa')
getElementsByName
只用在表单元素中
- 功能
-
document
object
- 属性:
className
,style
id
name
,value
(表单元素)href
,src
…(对应的元素)innerHTML
children
parentNode
- 功能方法:
setAttribute/getAttribute
appendChild
- 属性:
第十三课时
上节回顾:
- 1.BOM 浏览器对象模型
- a.
screen
指的不是浏览器的宽度,指的是整个电脑屏幕的分辨率- 可以拿到屏幕可用分辨率
- b.
navigator
- 可以通过
userAgent
判断当前浏览器信息
- 可以通过
- c.
location
URL
:统一资源定位符Union Resource Location
- 可以通过
href
属性重定向(改变)页面的URL,进行页面跳转
- d.
history
go
方法能够让我们进行历史回退或者前进
- e.
frames
获得当前窗体的子页面(`iframe`)
- f.
document
DOM
模型的核心对象
- a.
- 所有的
DOM
对象都是在堆内存创建的 都是有一个构造器生成的 - 查看对象的构造器器方法:
- step1:查看标签的对象以及构造器
var body = document.body;console.log(body.toString())
- step2:查看对象是否是这个构造器创建出来的
console.log(body instanceof HTMLBodyElement)
- step1:查看标签的对象以及构造器
新知识点:
1.DOM 文档对象模型
document
- 功能
getElementById
:通过传入的ID,返回标识了这个ID的唯一对象的内存地址getElementsByTagName
:通过传入的标签名字,返回所有该标签对象(HTMLCollection
)getElementsByClassName
:通过类的名字,返回所有该类的元素对象(HTMLCollection
)createElement
:想要创建出来的元素能够绘制在页面中,那么它必须在DOM树中- 总结
document
对象是DOM原型的核心对象,它是内存DOM树的根,所以它提供了很多功能让我们快速的找到DOM树中的某些DOM节点(对象)
- 总结
element
-
功能方法:(自定义属性非常灵活好用)
setAttribute/getAttribute
//getAttribute获取标签的属性 –用来操作标签的属性setAttribute
设置标签的属性appendChild
:添加子元素
-
属性:
id
className
,style
name
,value
(只有表单元素有 其他是没有的)href
,src
…(对应的元素)innerHTML/innerText
innerText
返回文本信息children
://子元素集合parentNode
//父元素
- 总结:元素的功能属性直接可以通过元素对象
点
出来,除此意外的自定义属性
,请通过get/setAtribute
去操作
DOM 操作:
- 图片切换的相册效果
tab
切换效果- 表单验证
- 特效就是
DOM
操作的具体应用DOM
操作就是用js
来写HTML
代码 - 节点/元素/标签:
- 三种常用的节点类型:
- 元素节点
- 属性节点
- 文本节点
- 三种常用的节点类型:
操作DOM对象:
- 修改:–找到这个节点
- 删除:–找到这个节点
- 添加:–先造出一个节点 然后插入 插入到哪里?找节点来定位
- 这些都离不开节点的查找
节点的查找:(最重要)
- 1、
document.getElementById
—根据id
查找节点 [返回的是节点本身] - 2、
document.getElementsByTagName
–根据标签名字来查找[返回的是数组]document.getElementsByTagName[i]
- 3、
document.getElemenstByName
–根据name
属性来查找节点(一般用在表单中)[返回的是数组]document.getElemenstByName[i]
-
注意:早期浏览器都认为
name
只出现在表单中 -
因此
document.getElemenstByName
只对表单中的元素发挥作用 后来部分浏览器把Name
属性扩展到一般的元素 如:div
但是IE浏览器还是只能对表单使用byName
因此处于兼容性 我们只能对表单使用byName
DOM
中查找节点的思路:(由大到小 个别情况 由子到父)
-
由大到小:(通过下面的来定位)
- 1、
document.getElementById
—根据id查找节点 [返回的是节点本身] - 2、
document.getElementsByTagName
–根据标签名字来查找[返回的是数组]document.getElementsByTagName[i]
- 3、
document.getElemenstByName
–根据name
属性来查找节点(一般用在表单中)[返回的是数组]document.getElemenstByName[i]
- 1、
- 如果还没有查到自己想要的节点,还可以继续根据上面已经找到的节点再次定位来查找
- 怎么继续定位?
- 答:
childNodes/child
- 答:
继续查找:
- 1、查找子元素
children[index]/childNodes
- 2、查找父元素
node.parentNode
–>获取父元素 - 3、查找兄弟元素
nextSibling
previousSibling
- 4、
nextSibling
previousSibling
firstChild
lastChild
这四个属性容易受到空白文本
的影响建议不用
|
-
5、对于查到的某个元素里面的子元素非常多 这时候还可利用
getElementsByTagname
进一步筛选 -
注意 对于元素对象和
document
对象相比 元素对象只能利用getElementsByTagName
函数 其他两个不能用
-
节点查找也是通过由大到小来定位:找到大的元素进一步细化 完全可以找到页面上任意一个元素控制他
-
子元素 不好找 就找他的父元素
-
要过滤空白文本节点,用
children
取他的文本节点
DOM与节点的关系:
- node:
childNodes[]
parentNode
firstChild
getElementsByTagName('元素标签')
lastchild
nextSibling
previousSibling
children[index]
children
不是w3c
标准 但是各大浏览器兼容性很好
-
通过给原型添加方法在元素后面创建标签
-
启示:在项目中,很多很多地方都需要一个方法但是系统没提供,这时可以通过原型扩展
|
DOM属性小结
-
Attributes
存储节点的属性列表(只读) -
childNodes
存储节点的子节点列表(只读) -
dataType
返回此节点的数据类型 -
Definition
以DTD
或XML
模式给出的节点的定义(只读) -
Doctype
指定文档类型节点(只读) -
documentElement
返回文档的根元素(可读写) -
firstChild
返回当前节点的第一个子节点(只读) -
Implementation
返回XMLDOMImplementation
对象 -
lastChild
返回当前节点最后一个子节点(只读) -
nextSibling
返回当前节点的下一个兄弟节点(只读) -
nodeName
返回节点的名字(只读) -
nodeType
返回节点的类型(只读) -
nodeTypedValue
存储节点值(可读写) -
nodeValue
返回节点的文本(可读写) -
ownerDocument
返回包含此节点的根文档(只读) -
parentNode
返回父节点(只读) -
Parsed
返回此节点及其子节点是否已经被解析(只读) -
Prefix
返回名称空间前缀(只读) -
preserveWhiteSpace
指定是否保留空白(可读写) -
previousSibling
返回此节点的前一个兄弟节点(只读) -
Text
返回此节点及其后代的文本内容(可读写) -
url
返回最近载入的XML文档的URL
(只读) -
Xml
返回节点及其后代的XML
表示(只读)
DOM方法小结
cloneNode
返回当前节点的拷贝createAttribute
创建新的属性
-
节点操作
DOMDocument
属性和方法-
createCDATASection
创建包括给定数据的CDATA
段 -
createComment
创建一个注释节点 -
createDocumentFragment
创建DocumentFragment
对象 -
createElement_x_x
创建一个元素节点 -
createEntityReference
创建EntityReference
对象 -
createNode
创建给定类型,名字和命名空间的节点 -
createPorcessingInstruction
创建操作指令节点 -
createTextNode
创建包括给定数据的文本节点 -
getElementsByTagName
返回指定名字的元素集合 -
hasChildNodes
返回当前节点是否有子节点 -
insertBefore
在指定节点前插入子节点 -
Load
导入指定位置的XML文档 -
loadXML
导入指定字符串的XML文档 -
removeChild
从子结点列表中删除指定的子节点 -
replaceChild
从子节点列表中替换指定的子节点 -
Save 把
XML`文件存到指定节点 -
selectNodes
对节点进行指定的匹配,并返回匹配节点列表 -
selectSingleNode
对节点进行指定的匹配,并返回第一个匹配节点 -
transformNode
使用指定的样式表对节点及其后代进行转换 -
transformNodeToObject
使用指定的样式表将节点及其后代转换为对象 -
document.documentElement
返回文档的根节点 -
document.activeElement
返回当前文档中被击活的标签节点 -
event.fromElement
返回鼠标移出的源节点 -
event.toElement
返回鼠标移入的源节点 -
event.srcElement
返回激活事件的源节点 -
node.parentNode,node.parentElement
返回父节点 -
node.childNodes
返回子节点集合(包含文本节点及标签节点) -
node.children
返回子标签节点集合 -
node.textNodes
返回子文本节点集合 -
node.firstChild
返回第一个子节点 -
node.lastChild
返回最后一个子节点 -
node.nextSibling
返回同属下一个节点 -
node.previousSibling
返回同属上一个节点 -
node.a(oNode)
追加子节点: -
node.applyElment(oNode,sWhere)
-
sWhere
有两个值:outside
/ inside
应用标签节点 -
node.insertBefore()
-
node.insertAdjacentElement()
-
node.replaceAdjacentText()
-
-
插入节点
node.remove()
node.removeChild()
node.removeNode()
-
删除节点
node.replaceChild()
node.replaceNode()
node.swapNode()
-
替换节点
node.cloneNode(bAll)
返回复制复制节点引用node.contains()
是否有子节点node.hasChildNodes()
是否有子节点
- 扩展阅读
第十四课时
上节回顾:
1.DOM 文档对象模型
document
- 功能
getElementById
:通过传入的ID,返回标识了这个ID的唯一对象的内存地址getElementsByTagName
:通过传入的标签名字,返回所有该标签对象(HTMLCollection
)getElementsByClassName
:通过类的名字,返回所有该类的元素对象(HTMLCollection
)createElement
:想要创建出来的元素能够绘制在页面中,那么它必须在DOM树中- 总结:
document
对象是DOM原型的核心对象,它是内存DOM树的根,所以它提供了很多功能让我们快速的找到DOM树中的某些DOM节点(对象)
- 总结:
element
- 功能方法:(自定义属性非常灵活好用)
setAttribute/getAttribute
//getAttribute获取标签的属性 –用来操作标签的属性setAttribute
设置标签的属性appendChild
:添加子元素
- 属性:
id
className
,style
name
,value
(只有表单元素有 其他是没有的)href
,src
…(对应的元素)innerHTML/innerText
innerText返回文本信息children
://子元素集合parentNode
//父元素- 总结:元素的功能属性直接可以通过元素对象
点
出来,除此意外的自定义属性
,请通过get/setAtribute
去操作
- 功能方法:(自定义属性非常灵活好用)
新知识点:
1.事件(事故)基础
- 白话含义:就是当一个事物遇到某个事情的时候,要做的事情
- (事件源)
- (事件监听名称)
- (事件处理程序)
2.常用事件
onclick:
当事件源被点击的时候调用处理程序onmouseover:
鼠标进入事件onmouseout:
鼠标移出事件onmousedown:
鼠标按下去的时候onmouseup:
鼠标抬起来的时候onscroll:
当事件源滚动条滚动的时候onkeydown:
当键盘按下的时候onkeypress:
当键盘按下去的时候onkeyup:
当键盘弹上来的时候onfocus:
当事件源获得光标onblur:
当事件源失去光标onchange:
当事件源blur
的时候内容改变了的话
浏览器事件注意事项:
- 1.以后我们不要把事件写在标签上,而使用
js
方式操作 - 2.js方式操作的话:
- 非
IE
浏览器第一个对象就会传入event
事件源对象 - IE浏览器第一个对象就不会传入
event
事件源对象(event = event||window.event
;) - 非
IE
浏览器的事件源属性是target
属性(event.target = event.target||event.srcElement
;) IE
浏6览器的事件源属性是srcElement
属性
- 非