对象+DOM
一、对象
1.数据类型
1)基本数据类型:String、Number、
Boolean、Undefined、Null
•基本数据类型的值是无法修改的,是不可变的。
•基本数据类型的比较是值的比较,也就是只要两个变量的值相等,我们就认为这两个变量相等。
2)引用数据类型
•引用类型的值是保存在内存中的对象。
•当一个变量是一个对象时,实际上变量中保存的并不是对象本身,而是对象的引用。
•当从一个变量向另一个变量复制引用类型的值时,会将对象的引用复制到变量中,并不是创建一个新的对象。
2.Object对象
•它是一种复合值,它将很多值聚合到一起,可以通过名字访问这些值。
•对象也可以看做是属性的无序集合,每个属性都是一个名/值对。
•除了字符串、数字、true、false、null和undefined之外,JS中的值都是对象。
3.创建对象
第一种方式:
第二种方式:
4.对象属性的访问
访问属性的两种方式:
–.访问
•对象.属性名
–[]访问
•对象[‘属性名’]
5.数组
1)一种用于表达有顺序关系的值的集合的语言结构。
2)创建数组:
– vararray= [1,44,33];
6.函数
1)函数是由一连串的子程序(语句的集合)所组成的,可以
被外部程序调用。向函数传递参数之后,函数可以返回一
定的值。
2)通常情况下,JavaScript代码是自上而下执行的,不过函数体内部的代码则不是这样。如果只是对函数进行了声明,其中的代码并不会执行。只有在调用函数时才会执行函数体内部的代码。
注:JavaScript中的函数也是一个对象,所以函数和其他对象一样也可以作为一个参数传递给另外一个函数。
但是要注意的是使用函数作为参数时,变量后 边千万不要加(),不加()表示将函数本身作为 参数,加上以后表示将函数执行的结果作为参 数。
7.函数的声明
var sum = function(a,b){return a+b};
其中()中的内容表示执行函数时需要的参数,{}中的内容表示函数的主体
- 函数声明语句以关键字function开始,其后跟有函数名、参数列表和函数体。
- 其语法如下所示:
8.函数的调用
function sum(a,b){
return a+b;
}
var result = sum(123,456);
这样表示调用sum这个函数,并将123和456作为实参传递给函数,函数中会将两个参数求和并赋值给result。
9.函数内部属性
•在函数内部,有两个特殊的对象:
–arguments
•该对象实际上是一个数组,用于保存函数的参数。
•同时该对象还有一个属性callee来表示当前函数。
–this
•this引用的是一个对象。对于最外层代码与函数内部的情况,其
引用目标是不同的。
•此外,即使在函数内部,根据函数调用方式的不同,引用对象也会有所不同。
注:this 引用会根据代码的上下文语境自动改变其引用对象。
10.this引用的规则
•在最外层代码中,this引用的是全局对象。
•在函数内,this根据函数调用方式的不同而有所不同。
11.instanceof
•typeof对于对象来说却不是那么好用,因为任何对象使用typeof都会返回Object。而我们想要获取的是对象的具体类型。
•这时就需要使用instanceof运算符了,它主要用来检查一个对象的具体类型。
•语法:
– var result = 变量 instanceof 类型
二、DOM
1.什么是DOM
DOM,全称DocumentObjectModel文档对象模型。
文档
–文档表示的就是整个的HTML网页文档
对象
–对象表示将网页中的每一个部分都转换为了一个对象。
模型
–使用模型来表示对象之间的关系,这样方便我们获取对象。
2.节点Node(构成HTML文档最基本的单元)
1)节点Node,是构成我们网页的最基本的组成部分,网页中的
每一个部分都可以称为是一个节点。(比如html标签、属性、文本、注释、整个文档等)
2)虽然都是节点,但是实际上他们的具体类型是不同的。
标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。
3)节点的类型不同,属性和方法也都不尽相同。
常用节点分为四类
1)文档节点:整个HTML文档
•document对象作为window对象的属性存在的,我们不用获取可以直接使用。
•通过该对象我们可以在整个文档访问内查找节点对象,并可以通过该对象创建各种节点对象。
•网页中的所有节点都是它的子节点。
2)元素节点:HTML文档中的HTML标签
•HTML中的各种标签都是元素节点,这也是我们最常用的一个节点。
•浏览器会将页面中所有的标签都转换为一个元素节点,我们可以通过document的方法来获取元素节点。
3)属性节点:元素的属性
•可以通过元素节点来获取指定的属性节点。
•例如:
–元素节点.getAttributeNode(“属性名”);
注:属性节点并非是元素节点的子节点,而是元素节点的一部分。我们一般不使用属性节点。
4)文本节点:HTML标签中的文本内容
•文本节点表示的是HTML标签以外的文本内容,任意非HTML的文本都是文本节点,包括可以字面解释的纯文本内容。
•文本节点一般是作为元素节点的子节点存在的。
•获取文本节点时,一般先要获取元素节点,再通过元素节点获取文本节点。
3.事件
1)事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。
2)JavaScript和HTML之间的交互是通过事件实现的。
4.获取元素节点
通过document对象调用
1)getElementById()
–通过id属性获取一个元素节点对象
2)getElementsByTagName()
–通过标签名获取一组元素节点对象
3)getElementsByName()
–通过name属性获取一组元素节点对象
5.获取元素节点的子节点
通过具体的元素节点调用
1)getElementsByTagName()
–方法,返回当前节点的指定标签名后代节点
2)childNodes
–属性,表示当前节点的所有子节点
3)firstChild
–属性,表示当前节点的第一个子节点
4)lastChild
–属性,表示当前节点的最后一个子节点
6.获取父节点和兄弟节点
通过具体的节点调用
1)parentNode
–属性,表示当前节点的父节点
2)previousSibling
–属性,表示当前节点的前一个兄弟节点
3)nextSibling
–属性,表示当前节点的后一个兄弟节点
7.元素节点的属性
获取,元素对象.属性名例:
element.value
element.id element.className
设置,元素对象.属性名=新的值例:
element.value=“hello”
element.id= “id01”
element.className=“newClass”