对象+DOM

对象+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”

猜你喜欢

转载自blog.csdn.net/ttttsuki/article/details/113447493