JavaScript_初识

最新推荐文章于 2022-09-30 16:13:08 发布

夜里巡山为块肉

最新推荐文章于 2022-09-30 16:13:08 发布

阅读量688

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/w932776235/article/details/72763606

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、Javascript

1、什么是Javascript

Javascript运行于Javascript【解释器/引擎】中的解释性脚本语言

Javascript运行环境：

1、Javascript解释器：NodeJS

2、嵌入在浏览器中的内核(引擎)

2、Javascript 发展

1、1992年 Nombas公司开发了一款脚本语言 ScriptEase ,可以嵌入在网页中

2、1995年 Netscape公司为 Navigator2.0浏览器开发了一款脚本语言 LiveScript ,为了赶时髦将其命名为 Javascript。Javascript与Java没有一点关系

3、1996年，Microsoft ，为了IE3.0，发布了一个Javascript克隆版本 JScript

4、1997年 Javascript1.1 作为草案提交给了 ECMA（欧洲计算机制造商协会） --> ECMA-262标准 -->ECMAScript

Javascript (JS)的组成:

1、核心(ECMAScript,ES)

2、文档对象模型(DOM,DocumentObject Model)

3、浏览器对象模型(BOM,BorowserObject Model)

Javascript特点

1、任何编辑工具都可以编写Javascript,语法类似于Java,C,...

2、无需编译

3、弱类型语言

由值来决定数据类型

强数据类型：由数据类型决定值

4、基于对象的编程语言

万物皆对象

Javascript的用途

1、客户端Javascript

浏览器中运行

1、客户端数据计算

2、表单验证

非空验证

数据范围验证

3、浏览器事件的触发和处理

4、网页特效制作

5、服务器的异步数据提交（ajax）

2、服务器端Javascript

1、分布式运算

2、实时服务器

3、窗口应用

4、网络应用

2、使用Javascript

1、浏览器内核

负责页面内容的渲染,由两部分组成:

1、内容排版引擎 -- 解析 HTML 和 CSS

2、脚本解释引擎 -- 解析 Javascript

浏览器内核内容引擎脚本引擎

Microsoft IE Trident -- Chakra

Mozilla Firefox Gecko -- Monkey系列

Apple Safari Webkit Webcore Nitro

Google Chrome Webkit Webcore V8

Opera Presto -- Carakan

Opera(2013 -) Webkit Webcore V8

2、Javascript运行环境

1、安装独立的Javascript解释器-- NodeJS

2、浏览器内核嵌入的解释器运行

1、在console中输入脚本运行

2、将JS脚本嵌入在HTML页面

1、html元素的事件完成

2、<script></script>元素中编写JS代码

3、外部的脚本文件

1、创建独立的***.js 的脚本文件

2、在页面的任何位置对 js文件进行引入

<scriptsrc="***.js"></script>

3、Javascript代码调试

运算符和表达式：

程序：人的想法在计算机中的执行

运算符：程序中模拟人想法的符号

表达式：由数据，变量和运算符组成的公式

也叫语句

表达式的执行过程：从左向右读

边读边用变量中的值替换变量所在位置

再开始执行

最后，表示都会返回一个值，作为结果

注意：Chrome控制台中默认输出最后一个表达式的返回值

1. 算数运算：+ - * / %

隐式转换：默认所有类型都转为number，

特殊：+运算中，有字符串，都变为字符串，+运算变为字符串拼接

%：模运算，取余数:

m%n，m除以n，取除不尽的余数部分

何时使用：1. 判断能否被整除时

2. 取余数，余数不可能>除数

2. 关系运算：> < >= <= != ==

做比较，做判断

结果只可能时true/false

隐式转换：默认都转为number，再比较

如果参与比较的*都*是字符串，则按位PK每个字符的unicode号。如果前几位都相等，就比长度。

特殊关系运算：

　　　１.判断是不是NaN：不能用==判断

var bool=!isNaN(num)

何时使用：判断num是不是数字

如果num是数字，或可以隐式转为数字，返回true

如果num不是数字，或无法隐式转为数字，返回false

2. null 和 undefined：底层其实一样

null==undefined 返回true

全等===:类型相同，且数值相等

不带隐式转换

问题：如果参与比较的是不同类型，就要手动强制转换再比较。

何时使用：区分null和undefined

或确实需要不带隐式转换

3. 逻辑运算：将多个关系运算联合得出最终结论。只可能返回true/false

隐式转换：默认都转为Boolean类型

何时使用：多个条件综合得出结论时

&& : "而且",两个条件必须都满足时才为true

只要任意一个条件为false，整个结果为false

|| : "或者",只要一个条件满足就返回true

除非所有条件都为false，整个结果才为false

! : "不/不是"，用于颠倒一个判断的true和false

***短路逻辑：如果前一个条件已经可以得出最终结论，则后续条件*不再执行*！

利用短路逻辑时，逻辑运算不一定都返回true/false

&&：1个条件，一件事，满足就做，不满足就不做

if(条件){事}

利用短路逻辑: 条件&&(事)

何时使用短路代替if：只有操作步骤简单时。

强调:&&后的语句，一般用()包裹

||：在两个值之间二选一使用,相当于默认值/备用值

值1||值2 : 如果值1有效(Boolean(值1)为true)

就使用值1，否则使用值2作为备用

鄙视题:alert(4&&5);//5

alert(4||5);//4

alert(0&&5);//0

alert(0||5);//5

4. 位运算：移动数据的二进制位置

左移:m<<n 读作m左移n位，相当于m* 2的n次方

右移:m>>n 读作m右移n位，相当于m/ 2的n次方

无符号右移0位: m>>>0 相当于取整！

5. 扩展赋值运算：修改变量中的值，再存回变量中

简写：一句话实现2个操作：计算并赋值

包括：+= -= *=/= %=

仅以+=: a=a+5;都要简写为a+=5; 也称累加

以此类推: a=a-5;简写为: a-=5;

a=a*5; 简写为: a*=5; 也称累乘

更简化：如果只是累加1或累减1

a=a+1 可简写为: a++;

a=a-1 可简写为: a--;

****仅以++为例：可前可后

如果单独一句话,写前写后都一样

如果++参与复杂表达式中：

相同点：变量中的值，总是被+1

不同点：前++,返回加1后的*新*值

后++,返回加1前的*旧*值

1、语法规范

1、语句

被Javascript引擎所解释执行的一句代码

组成：

表达式、关键字、运算符

运算符：+，-，*，/，%，> ....

关键字：var

表达式：由一个或多个运算符以及一个或多个操作数组成的。如：1+2，

特点：以分号表示结束

console.log();

document.write();

window.alert();

习惯:一行只写一条语句

i++;

注意：严格区分大小写

console.log();

console.Log();

2、注释

单行注释：//

多行注释：/* */

console.log();

/*window.alert();

document.write()*/

console.log();*/

2、变量

内存 : 临时性保存据算计程序在【运行过程中】要用到的数据。

TB->GB->MB->KB->B->bit

8bit = 1B

1024B=1kb

Javascript

硬盘 : 永久性保存数据

0x000000000000000000a13247aaccxx

1、什么是变量

就是内存中的一段空间，用于保存程序运行过程中要用到的数据。就是存储数据的容器。

2、什么是变量名

内存空间的一个别名，为了方便记忆。即变量的名字。

3、变量的声明

到内存中开辟一段空间用于保存数据

语法：

var 变量名称;

eg:

声明一个变量，保存名称

var name;

声明一个变量，保存年龄

var age;

赋值：将数据保存进变量

运算符：=

赋值运算符

语法：

变量名=值;

name="张无忌";

age=58.5;

****

var name;

name="张无忌";

初始化：声明变量并赋值

var 变量名称=值;

注意：没有被赋值的变量自动取值为undefined

var name;

var age;

var hobby;

一条语句中声明多个变量:

var name,age,hobby;

var name="张三丰",age=30;

4、变量名命名规范

1、要求

1、不允许使用关键字以及保留关键字命名

标准关键字：

eg : var , function , if , for,true,false ...

保留关键字：

class,int,float,double ... ...

2、命名规范

1、可以包含字母、数字、下划线 _、$

2、不能以数字开头

var name;

var name1;

var 1name;错误

3、不允许重复

4、尽量见名知意

var name;

var age;

var a,b,c,d,....aa,ab,ac,ad;

var xingming,nianling;

5、推荐采用

匈牙利命名法

控件缩写+功能

txtName

rdoGender

chkHobby

selCity

下划线命名法

_功能名称

_name;

_age;

驼峰命名法

如果变量名称由多个单词组成，第一个单词全部小写，第二个单词开始，首字符变大小

userName

txtusernmae --> txtUserName

5、变量使用注意问题

1、未初始化变量的使用

只定义未赋值，值为undefined

未定义，使用，错误，not defined

2、在可能的情况下，声明变量时尽量初始化

var age=10;

var name="张三";

var isHappy=true;

3、将变量的声明和赋值分开操作

var name;

var age;

..........

name="";

age=18;

4、对变量进行的存取操作

1、设置变量的值(赋值，存)

var name="张三丰";//张三丰

name="张无忌";//张无忌

name+="殷素素";//张无忌殷素素

name = name +"张翠山";//张无忌殷素素张翠山

name =name+""; ==> name+="";

"张无忌"="张翠山"+"殷素素";//错误

特殊：

var i=10;

i++;

++i; ==> i=i+1;

注意：赋值时，=的左边一定是变量

2、获取变量的值(取值)

var uname="张无忌";

console.log(uname);

var newName = uname;

uname : 取值操作(=右边使用)

newName : 赋值操作(=左边使用)

汉堡名称：香辣鸡腿堡

配餐名称：薯条

饮料名称：Cola

3、运算符

1、算数运算符

+,-,*,/,%

%:取余(模),计算两个数字相除后的余数

5%2 结果为 1

3%5 结果为 3

常用场合：

1、获取数字的最后一位

1234

1234%10=123 ... 4

1234%100 = 12 ... 34

2、判断奇偶性或判断是某数字的倍数

58 % 2 结果是否为 0?

78 是 3的倍数吗？？

78 % 3 结果是否为 0 ？

+ ：

1、求和：数字类型的数值求和

2、"" 与 +联用 ,作用是追加

"张无忌" + 123 结果为:张无忌123

123 + "张无忌" 结果为:123张无忌

12+25 结果为：37

"12"+25 结果为：1225

'12'+25 结果为：1225

注意：由算数运算符与操作数组成的表达式，称为算数表达式

4、常量的使用

1、什么是常量

声明好之后，在程序运行过程中，不允许被修改的数据，称之为常量

2、目的

防止用户在误操作情况下，修改了不允许被更改的数据

var pi = 3.14;

pi = 3.15;

3、适合声明成常量的数据

1、常理型数据

pi : 3.14

Jan : 31

...

2、根据业务需求来定义

max : 500

4、语法

通过 const 关键字声明

const 常量名=值;

常量名称：通常使用大写字母表示

const PI=3.14;

定义一个圆的半径，计算该圆的周长和面积

周长：2 * pi *r

面积：pi * r *r

5、数据类型

1、什么是数据类型

保存在内存中的数据的类型，根据不同的类型内存中所开辟的空间也不一样

2、数据类型

1、原始类型 (基本类型)

1、number 类型

数字

可以表示 32 位(4字节)的整数，或64位(8字节)的浮点数

浮点数：小数

var age;

age=12; //number

age=24.5;//number

2、string 类型

字符串

一系列的文本数据

注意：赋值时，必须使用 " " 或 ' ' 扩起

var name="张三丰";//string

var age = "12"; //string

特殊字符，可以通过转移字符实现

"Hello World"

console.log(""HelloWorld"");错误

\ 作为开始

\" : 表示一个 "

\' : '

\n : 换行

\t : 制表符

\\ : \

console.log("Hello World");

3、boolean 类型

布尔

只表示肯定(真) 或否定(假)的数据

值：true(真) 和 false(假)

使用场合：作为程序的条件(判断、循环)

在与 number 类型做运算时，true=1，false=0

4、null 类型

空

5、undefined 类型

未定义

表示不存在的数据

2、引用类型

Object

Number

Boolean

String

Date

1、数据类型转换

2、函数

3、分支结构

*******************************

1、数据类型转换

数据类型：number,string,boolean,null,undefined

var a = 123;

var b = "123";

var c = 1.23;

var result = b +56; //179

1、什么是数据类型转换

允许数据在各个类型之间灵活的转变

2、隐式转换

不需要认为参与，由程序自动完成

var a = "123";

var b = 56;

var result = a + b; //12356

通过 typeof(参数) 函数帮助查看指定数据的类型

NaN : Not a Number

isNaN() :

isNaN("abc") :true

isNaN(123) : false

3、强制数据类型转换

转换函数

1、toString()

var a = 123;

a.toString();

var b = ""+a;//string

var c = a+"";//string

2、

"123"

"Hello World"

1、parseInt(参数)

碰到第一个非数字的字符，停止转换

如果第一个字符就是非数字的，结果为NaN

parseInt("123"); --> 123

parseInt("123ABC"); --> 123

parseInt("123.456"); -->123

parseInt("ABC123"); --> NaN

2、parseFloat(参数)

将字符串转换为小数

3、弹出一个输入框

var num =window.prompt("请输入xxxx",0);

var num = prompt("请输入xxxx",0);

2、函数

函数(function),也叫方法(method),或过程(procedure)

1、什么是函数

是一段被【预定义】好，并且可以被反复使用的代码块。

代码块：允许包含多条语句。

是一个独立的功能体。

console.log();

alert(); -->alert("弹出内容");

document.write();

parseInt(xxx);

parseFloat()

prompt()

2、定义函数

定义函数的过程：封装

1、语法

关键字：function

function 函数名(){

//多条语句

}

定义一个函数，功能为，在控制台上打印输出 Hello World

3、调用函数

直接使用函数名() 进行调用

1、<script></script>任何一个位置处

2、通过HTML元素事件来调用

4、参数

//制作一个函数做 10+ 10的运算

function add(){

console.log(10+10);

}

function add1(){

console.log(100+200);

}

function add1(){

console.log(1000+2000);

}

语法：function 函数名(参数列表){

参数列表：用,隔开的多个变量名(参数名)

}

function zhaZhiJi(fruit){

console.log("传递过来的水果是:"+ fruit);

}

*************************************************

1、分支结构

1、运算符 - 比较运算符

> , < , >= , <=, == , !=

>= : 3 >= 5 False

5 >= 5 True

== : 判断等于，判断两个操作数，是否相等，相等则为true，不等则为false

3 == 5 : False

3 == 3 : True

!= : 3 != 5 : True

"a" !="a" :False

以上运算符的返回值全部为 boolean 类型

2、流程图

通过流程图表示程序的走向

1、矩形：长方形，表示数据的处理

2、平行四边形:表示输入和输出

3、菱形:表示条件判断

3、程序的流程控制

程序=数据结构 + 算法;

数据结构：程序运行中所需要的数据元素

算法：将要做的事情通过一系列的逻辑串起来

任何程序或算法都有结构：

1、顺序结构

代码从头到尾除注释以外，按照出现的顺序去执行

2、选择(分支)结构

根据条件判断哪一块的程序要被执行，哪一块的程序不被执行

3、循环结构

根据条件判断，反复的执行某一段程序

4、if语句

满足某个条件时，执行某些操作，不满足则不执行

语法：

if(条件){

//某些操作

}

当条件结果为 true 时，则执行if语句块中的语句

当条件结果为 false时，则不执行if语句块中的语句

1、由比较运算符组成的表达式称为：条件表达式、逻辑表达式

2、if 条件中，如果不是boolean类型表达式，那么进行隐式转换

以下值中，都会默认转换为false

if(0){}

if(0.0){}

if(null){}

if(undefined){}

if(NaN){}

if(""){}

var a = prompt("请输入一段话:");

if(a){

//语句块;

}

3、if 语句块 {} 的问题

当if语句块中【只有一条语句】时，{}可以省略

if(a){

console.log("Success!");

}

等价于

if(a)

console.log("Success!");

5、if - else结构

语法：

if(条件){

语句块1

}else{

语句块2

}

判断条件

如果条件的值为 true ，则执行语句块1

如果条件的值为 false，则执行语句块2

6、输入考试成绩

如果成绩等于 100分，奖励一台兰博基尼

如果成绩大于等于90 分，奖励一台奥迪

如果成绩大于等于80 分，奖励一台奥拓

如果成绩大于等于70 分，奖励一台摩托车

如果成绩大于等于60 分，奖励一台自行车

否则，提示，该干啥干啥去

1、多重if结构

在一套完整结构中，允许判断多个条件，最终，最多只能选择一个条件去运行

语法：

if(条件1){

语句块1;

}else if(条件2){

语句块2;

}else if(条件3){

语句块3;

}else{

//以上条件都不满足的时候，最终执行的语句块(此块可选);

}

if(){

}

if(){

}

if(){

}

克莱托指数：

公式：体重(kg) / 身高(m) * 身高(m)

20以下：偏瘦

20 - 25 : 正常

25(不包括)以上 : 偏旁

1、克莱托指数

公式：体重(kg) / (身高(m) * 身高(m))

< 20 : 偏瘦

> 20 <25 : 正常

> 25 : 偏旁

步骤：

1、输入体重(weight) 、身高(height) 并且保存

2、计算克莱托指数(klt)

3、判断 klt 的范围

4、使用多重if结构完成判断

2、编写 “个人所得税计算器”函数

计算个税的方法:

3500 以下免征

3500 ~ 5000 部分缴纳 3%

4000 : 500元缴纳 3%

8000 : 1500元缴纳 3% ，剩余(3000元)的按下个梯度算

5000 ~ 9000 部分缴纳 10%

8000 : 1500元缴纳 3% ，剩余(3000元)的按10%缴纳

12000 : 3500 以下免征 ,1500元 3% , 4000元 10%,剩余3000元按下个梯度算

400

9000 以上部分缴纳 20%

12000 : 3500 以下免征 ,1500元 3% , 4000元 10%,剩余3000元缴纳20%

600

*******************************************************

1、循环结构

问题：

1、在控制台上打印输出1句Hello World

console.log("HelloWorld");

2、在控制台上打印输出10句Hello World

console.log("HelloWorld");

console.log("Hello World");

3、在控制台上打印输出1000句Hello World

4、将 1000 句 Hello World 更改为 "世界你好!"

5、输出格式 "第n遍世界你好" n (1~1000)

以上部分内容在Javascript中，完全可以通过 "循环结构" 来搞定

生活中的循环：

1、活着

2、上学、上班

3、地球自转、公转

特点：

1、做重复性或相似性的操作

2、都会有显示的结束

什么是循环：循环，重复的执行相同或相似的操作

循环的基本要素：

1、循环体 : 相同或相似的操作

2、循环条件：循环的次数，可以表示循环的开始或结束

没有结束的循环：称之为死循环

1、while循环

1、语法结构

while(条件判断){

//循环体

}

条件为 true 时，则执行一遍循环体中的所有语句;再回来判断条件，若条件为true，则再执行循环体 ... 直到条件为 false时，则结束循环

2、循环实现

1、在控制台上打印输出10句Hello World

循环条件：从第1遍开始打印，到第10遍结束

循环体：console.log("Helloworld");

注意：一定要去更新循环条件，否则容易引发死循环

2、将 1 - 100之间所有的数字进行累加求和

循环条件：从 1 开始到 100 结束

循环体：

循环条件的变量要参与到循环操作中来

循环变量就可以表示 1-100之间的每一个数字

最终：将循环变量累加即可

更新循环条件

3、将 1-100之间所有的奇数进行累加求和

循环条件：从 1 开始到 100 结束

循环体：

1、判断 i 的奇偶性,如果为奇数，则累加到sum之后

2、循环条件(循环变量)以2递增

3、循环流程控制

提前终止循环结构

1、break语句

作用：break 用在循环体中，用于退出循环

程序碰到 break 语句后，break后面的循环体操作都不会被执行，并且程序的流程会跳到循环结构以外的下一条语句去执行

2、使用场合：

在不确定循环次数的条件下，可以随时终止循环

while(true){

if(输入内容 =="exit"){

break;

}

随机数: Math.random() 表示一个随机数(0-1)

总结：

在确定循环次数的条件下， while流程

1、声明循环条件 var i=1;

2、编写循环体while(i<=10){}

3、在循环体更新循环条件(循环变量) i++

2、for循环

解决问题：与 while循环基本一致，确定了循环次数的条件下使用

语法：for(表达式1;表达式2;表达式3){//循环体}

表达式1 ：声明循环条件

表达式2 ：满足循环的条件 ==> while(条件)

表达式3 ：更新循环变量

通过 while 循环打印 10遍 Hello World

var i=1;//表达式1

while(i<=10 //表达式2 ){

console.log("HelloWorld");

i++; //表达式3

}

==> for循环结构

for(var i=1;i<=10;i++){

console.log("HelloWorld");

}

for循环的流程:

1、计算表达式1 的值

2、计算表达式2 的值，如果为true则执行循环体，否则退出。

3、执行循环体

4、计算表达式3 的值

5、计算表达式2 ，如果为true，继续执行循环体，否则退出

请输入一个数字：5

1*5=5 2*5=10 3*5=15 4*5=20 5*5=25

console.log("");

for循环的特殊用法:

1、表达式1位置可以为空

for(;表达式2;表达式3)

如果省略表达式1的话，那么需要在循环外面，对表达式1进行声明

for(var i=1;i<10;i++){

}

var i=1;

for(;i<10;i++){

}

2、省略表达式2

for(var i=1;;i++){

//死循环

}

注意：如果省略了表达式2的话，需要在循环体内，将其内容补充完整

for(var i=1;;i++){

if(i > 10){

break;

}

3、省略表达式3

for(var i=1;i<10;){

//死循环

}

注意：如果省略表达式3，要么在循环体重补充表达式3，要么增加条件允许循环退出

for(var i=1;i<10;){

...

i++;

}

for(var i=1;i<10;){

if(条件){

break;

}

4、for(;;){

}

var i=1;

for(;;){

if(i > 10){

break;

}

console.log("HelloWorld");

i ++;

}

5、表达式1，表达式3 位置处内容多样化

多样化：

表达式1的位置处，可以一次性声明多个变量，多变量之间用 , 分隔

表达式3的位置处，可以一次性更改多个循环变量，用 , 分隔

0 + 6 = 6

1 + 5 = 6

2 + 4 = 6

3 + 3 = 6

....

6 + 0 = 6

2、数组(创建、访问)

问题：保存学员的姓名 ?

var name1 = "";

var name2 = "";

var name589 ="";

多数据的保存和管理的问题？

1、数组

多个元素组成的集合，可以在一个变量中存储多个数据值

数组中元素的数据类型可以相同，也可以不同

所有元素都按照【线性顺序】排列

线性顺序：

除第一个元素外，每个元素都有唯一的一个前驱元素

除最后一个元素外，每个元素都有唯一的一个后继元素。

数组是通过下标(索引)来标识每个元素的位置，下标时从 0 开始，最大值数组元素个数 - 1

2、数组的初始化

1、一维数组的使用

1、声明数组

1、var 数组名 =[];//声明一个不包含任何元素的空数组

2、var 数组名 =[元素1,元素2,元素3];//声明一个包含3个元素的数组

eg : var names = ["张三丰","张翠山","张无忌"];

3、var 数组名 =new Array();

4、var 数组名 =new Array(元素1,元素2,元素3);

eg : var girls = new Array("赵敏","周芷若","小昭");

2、访问数组元素

无论设置还是获取，都与数组元素的索引相关

1、设置数组元素的值

var names = ["张三丰","张翠山","张无忌"];

语法：数组名[索引值]=值;

names[0] = "ZSF"; //修改数组中，第一个元素的值为 ZSF

names[3] = "谢逊"; //追加新元素(指定索引的元素不存在时，则追加)

2、获取数组元素的值

语法：数组名[索引值];

var name = names[0];

3、获取数组长度

获取数组中元素的个数，即数组长度

属性：length

使用方式：数组名.length

3、循环遍历数组元素

遍历数组：通过循环的方式，获取数组中的每一个元素

实现方式：使用 for 循环、数组的length属性、元素的索引

var names = ["张三丰","张翠山","张无忌"];

for(var i=0;i<names.length;i++){

console.log(names[i]);

}

//倒序

for(var i=names.length-1;i>=0;i--){

console.log(names[i]);

}

1、DOM概述

1、DHTML

Dynamic HTML ：动态的HTML

DHTML 不是技术标准规范，是将现有的网页技术(html,css,javascript)进行整合运用。通过该理念，要求能在网页被下载后仍然能够实现 “实时变换页面元素”的效果

DHTML功能：

1、动态改变页面元素

2、与用户进行交互，从而提升用户体验

3、DHTML 包含：BOM 与 DOM

DHTML = HTML + CSS +Javascript

2、BOM 与 DOM

1、BOM

Browser Object Model 浏览器对象模型

直接操作和访问浏览器窗口的，比如：历史记录、地址栏信息、状态栏信息。能够让Javascript 与浏览器产生交互行为。

BOM 没有相关的标准的，但所有的浏览器都支持。

2、DOM

Document Object Model 文档对象模型

直接操作 html 文档，与浏览器无关

定义了访问和操作html文档的标准方法

由W3C定义相关标准

3、DOM概述

W3CDOM标准三部分：

1、核心DOM ：针对任何结构化文档(html,xml) 的标准模型

2、XML DOM ：针对XML文档的标准模型，只能操作XML文件

3、HTML DOM :针对 HTML文档的标准模型，只针对HTML文档

页面被加载时，浏览器会自动创建页面的文档对象模型

HTML页面中所有的节点(标记、属性、文本)组成一个文档树（DOM树，节点树）

document对象是 DOM树的根(根对象)

DOM发展过程：

共三级：

DOM 1级：定义基本的顶层操作方法

DOM 2级：

Core ：扩展了更多的方法和属性

Style ：允许操作HTML元素的样式

Traversal andRange :遍历DOM树的方法

Event ：定义标准化事件,IE8不支持

DOM 3级：扩充了新方法、属性、新类型

4、DOM树

根： document

文档中的元素、属性、文本、注释都是树中的节点

元素(HTML) :Element Node

文本：TextNode

属性：Attribute Node

注释：CommentNode

2、DOM操作

1、选取元素

根据DOM提供的方法，获取页面中的一个/一组元素

1、通过ID获取元素

document.getElementById("元素id值");

var a =document.getElementById("anchor");

2、通过标签名获取一组元素

node.getElementsByTagName("标签名");

node : 已经获取的元素节点对象(DOM对象)

注意：返回值为数组

3、通过 class 名获取一组元素

node.getElementsByClassName("className");

注意：返回值为数组

.bgColor{

background:red;

}

<divid="d1"></div>

document.getElementById("d1").className="bgColor";

4、节点关系

属性：

父节点：parentNode

子节点：

获取第一个子节点：firstChild

获取最后一个子节点：lastChild

获取所有子节点：childNodes

获取第一个元素节点:firstElementChild

获取最后一个元素节点:lastElementChild

注意：属性节点，不能通过子节点的方式直接获取到的。

兄弟节点：

previousSibling : 上一个兄弟节点

nextSibling : 下一个兄弟节点

***********************************************

1、读取和修改节点

1、元素的内容

<div>

</div>

属性：

1、控制元素节点的HTML内容

属性：innerHTML

可以获取、设置

var div =document.getElementById("d1");

div.innerHTML="<h1>zzzz</h1>";

var content = div.innerHTML;

2、控制元素节点的文本内容

属性：textContent

可以获取、设置

innerText

可以获取、设置文本内容

不足:Firefox 不支持

2、元素的属性

属性：属性集合(数组)

属性名:attributes

返回 NamedNodeMap数组对象

1、读取属性

1、element.attributes[index].value;

2、element.attributes["属性名"].value ;

3、element.getAttributeNode("属性名").value;

4、element.getAttribute("属性名");

2、修改/设置属性值

1、element.setAttribute("属性名","值");

问题：IE8 及以下浏览器不支持

2、element.setAttributeNode(属性节点对象);

创建属性节点对象：

var attrNode =document.createAttribute("属性名称");

attrNode.nodeValue = "值";

3、element.attrName

元素.属性名 = 值'

var value = 元素.属性名;

注意：对 class 属性处理必须通过 className属性操作

3、元素的样式

1、内联样式

属性：style

var a =document.getElementById("anchor");

style对象中的属性名都是css样式属性名称经过变化的结果

background-color --> backgroundColor

font-size --> fontSize

style.变换后的样式名称

a.style.fontSize="12px"

a.style.backgroundColor="#e4393c";

语法：

元素.style.变换后的样式名称 = 值;

var value = 元素.style.变换后的样式名称;

注意：

1、标准模式下，带单位的属性设置时，必须加单位。同时，取值时，返回的数据中也包含单位。

2、使用该方式取值时，仅仅在内联样式下有效

2、获取计算的样式(内部、外部样式表的数据)

除IE 外，其他所有浏览器都采用 DOM标准方法完成取值。

IE 拥有自己的属性、方法

DOM :

document.defaultView.getComputedStyle(元素对象).样式属性;

IE :

元素对象.currentStyle.样式属性;

if(元素对象.currentStyle){

//IE 方法

}else{

//DOM 方法

}

3、修改样式表中的样式(内部、外部)

1、获取所有的样式表对象

var sheets = document.styleSheets;

var sheet = sheets[0];

2、获取样式表中所有的样式规则

var ruels = sheet.rules;

3、获得集合中包含目标属性的规则

var rule = ruels[index];

4、设置样式规则中的样式属性

rule.style.属性名=值;

夜里巡山为块肉

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript_初识

Javascript特点 Javascript代码调试语法规范
复制链接

扫一扫

专栏目录

JavaScript_初识

“相关推荐”对你有帮助么？