乐趣区

关于javascript:JavaScript入门

jiezi

JavaScript 概述

介绍

JavaScript 是一门脚本语言，不须要编译就能够间接被浏览器解析执行。它是运行在浏览器中的，每一个浏览器都有本人的 JavaScript 解析引擎。

JavaScript 能够用来加强用户和 html 页面的交互过程，能够来管制 html 元素。让页面有一些动静的成果，以此来加强用户的体验。

特点

  1. 交互性（它能够做的就是信息的动静交互）
  2. 安全性（不容许间接拜访本地硬盘）
  3. 跨平台性（只有是能够解释 JS 的浏览器都能够执行，和平台无关）

发展史

  1. 1992 年，Nombase 公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 C–，起初更名为 ScriptEase
  2. 1995 年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。起初，请来 SUN 公司的专家，批改 LiveScript，命名为 JavaScript
  3. 1996 年，微软剽窃 JavaScript 开发出 JScript 语言
  4. 1997 年，ECMA(欧洲计算机制造商协会)，制订出客户端脚本语言的规范：ECMAScript，就是对立了所有客户端脚本语言的编码方式。

JavaScript = ECMAScript + JavaScript 本人特有的货色(BOM+DOM)

JavaScript 根底语法

与 html 联合形式

JavaScript 与 Html 联合的办法总有两种，即——外部 JS 和内部 JS。

外部 JS

概述

间接在 html 页面中书写 JavaScript 代码，所书写的 JavaScript 代码应用 Script 标签包围起来。

格局
<script type="text/javascript">
    JS 代码
</script>
演示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <!-- 在外部定义 JS-->
    <script type="text/javascript">
        alert("Hello World");
    </script>
</head>
<body>

</body>
</html>

内部 JS

概述

应用 script 标签，通过 src 属性引入内部的 js 文件。

格局
<script type="text/javascript" src="JS 文件地址"></script>
演示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <!-- 援用内部 JS-->
    <script type="text/javascript" src="../JavaScript/one.js"></script>
</head>
<body>

</body>
</html>
  1. script标签能够定义在 html 页面的任何中央，然而定义的地位会影响其执行程序。
  2. script标签也能够在一个 html 页面，同时定义多个。

JavaScript 正文

概述

JavaScript 的正文格局和 Java 的完全一致，无论是单行正文，还是多行正文。

单行正文

格局
// 正文内容
演示
// 这是一个单行正文

多行正文

格局
/* 正文内容 */
演示
/*
    这是一个多行正文
 */

JavaScript 数据类型

概述

JavaScript 也同 Java 一样，数据类型分为两类，即——原始数据类型、援用数据类型。

原始数据类型

number 类型
  • 整数
  • 小数
  • NaN（not a number，一个不是数字的数字类型）
string 类型

单引号与双引号定义的都是字符串类型，Javascript 没有字符类型的概念。

boolean 类型
  • true
  • false
null 类型

一个对象为空的占位符。

undefined 类型

未定义。如果一个变量没有给初始化值，则会被默认赋值为 undefined。

援用数据类型

对象。Javascript 中的援用数据类型也都是对象。

JavaScript 变量

概述

JavaScript 与 Java 中的变量很相识，但又并不完全相同。根本原因为 Javascript 为弱类型语言，而 Java 为强类型语言。什么是弱类型语言，什么是强类型语言呢？上面我来简略的阐明一下：

  • 弱类型语言：在开拓变量存储空间时，不定义空间未来的存储数据类型，而是能够寄存任意类型的数据。
  • 强类型语言：在开拓变量存储空间时，定义了空间未来存储的数据的数据类型，只能存储固定类型的数据。

正是因为语言类型的不同，导致了两种语言的变量也有不同的用意，下文我次要表述其不同之处。

格局

// 定义变量（默认赋值为 undefined）var 变量名;

// 定义并初始化值
var 变量名 = 初始值;

演示

// 定义变量（默认赋值为 undefined)
var num01;
var num02;
var num03;

// 接管 number 类型值
num01 = 1;
num02 = 3.14;
num03 = NaN;

// 定义并初始化 string 类型值
var str01 = '2';
var str02 = "two";
var str03 = '我是一个二';

// 定义并初始化 boolean 类型值
var flag01 = true;
var flag02 = false;

// 定义并初始化 null 类型值
var obj = null;

// 定义并初始化 undefined 类型值
var und01 = undefined;
var und02;// 默认赋值为 undefined

新个性

ES2015(ES6) 新减少了两个重要的 JavaScript 关键字: let 和 const。

let 申明的变量只在 let 命令所在的代码块内无效。

const 申明一个只读的常量，一旦申明，常量的值就不能扭转。

  • 应用 var 申明的变量，其作用域为该语句所在的函数内，且存在变量晋升景象；
  • 应用 let 申明的变量，其作用域为该语句所在的代码块内，不存在变量晋升；
  • 应用 const 申明的是常量，在前面呈现的代码中不能再批改该常量的值。

总结：

通常，应该始终应用 const 申明变量，如果您意识到须要更改变量的值，请返回并将其更改为 let。如果我的项目不反对 ES6，再应用 var 来申明变量。

typeof 函数

概述

因为 Javascript 的变量能够存储任意类型的数据，这样就导致咱们无奈判断一个变量中存储的数据是 number 类型、string 类型的，还是 boolean 类型的。于是这个时候，咱们就须要用到 typeof 运算符，来帮忙咱们辨别变量中存储的不同数据的类型。

typeof 的作用就是传入一个变量，同时返回这个变量所存储数据的数据类型。

格局
typeof(变量名)
演示
// 别离判断 num01、str01、flag01、obj、und01 的数据类型
let type01 = typeof(num01);
let type02 = typeof(str01);
let type03 = typeof(flag01);
let type04 = typeof(obj);
let type05 = typeof(und01);

// 打印到 html 页面上
document.write(type01 + "<br>");
document.write(type02 + "<br>");
document.write(type03 + "<br>");
document.write(type04 + "<br>");
document.write(type05 + "<br><br>");

/* 打印后果：number
    string
    boolean
    object
    undefined
*/

JavaScript 运算符

一元运算符

概述

只有一个运算数参加的运算符。

次要成员
++`、`--`、`+(正号)`、`-(负号)
注意事项

  1. 对于自增与自减：

    • a++，先运算，再自增。
    • ++a，先自增，再运算。

  2. 在 JS 中，如果运算数不是运算符所要求的类型，那么 js 引擎会主动的将运算数进行类型转换。如：

    • String 类型转 number 类型：首先依照字面转化为相应的数字，如果字面值不是数字，则转为 NaN（不是数字的数字）。
    • boolean 类型转 number 类型：true 转为 1，false 转为 0。

算数运算符

概述

用于进行一些数学运算的符号。

次要成员
+`、`-`、`*`、`/`、`%

赋值运算符

概述

将一个数据赋予另一数据的符号。

次要成员
=`、`+=`、`-=

比拟运算符

概述

用于数据大小比拟的运算符。

次要成员
>`、`<`、`>=`、`<=`、`==`、`===(全等于)
注意事项
  1. 若类型雷同，则间接进行比拟。若数据类型不同，先进行类型转换，再比拟。
  2. ===(全等于)：在比拟之前，先判断类型，如果类型不一样，则间接返回 false。
  3. 字符串类型之间的数据进行比拟，依照字典程序比拟。按位逐个比拟，直到得出大小为止。

逻辑运算符

概述

用于进行逻辑判断的运算符。

次要成员
&&`、`||`、`!
注意事项

在进行逻辑运算时，通常会遇到其余数据类型转为 boolean 数据。

  1. number 转 boolean 时：0 或 NaN 为假，其余为真
  2. string 转 boolean 时：除了空字符串为假，其余都是 true
  3. null 和 undefined 转 boolean 时：都为 false
  4. 对象转 boolean 时：都为 true

三元运算符

格局
// 表达式为真，则返回后果 1。为假，则返回后果 2
表达式 ? 后果 1 : 后果 2
演示
let a = 1;
let b = 2;
let c = a > b ? "正确" : "谬误";
console.log(c);// 谬误

管制语句

次要成员

  1. if...else...
  2. while
  3. do...while
  4. for
  5. switch...case

注意事项

switch 语句的差别：

  1. 在 java 中，switch 语句能够承受的数据类型只有：byte、short、int、char、枚举、String。
  2. 在 Javascript 中，switch 语句能够承受任意的原始数据类型

JS 非凡语法

  1. 语句以 ; 结尾，如果一行只有一条语句则能够省略，但不倡议

  2. 变量的定义应用

    let

    关键字，但也能够不应用

    • 应用 let 关键字定义变量，定义的变量为局部变量。
    • 不是用 let 关键字定义变量，定义的变量为全局变量，但不倡议

JavaScript 对象

JavaScript 中的函数相当于 Java 中的办法，大抵能够分为以下几种：

  • function- 办法对象
  • Array- 数组对象
  • Date- 日期对象
  • Math- 数学对象
  • RegExp- 正则对象
  • Global- 全局对象
  • Number- 数字包装对象
  • String- 字符串对象
  • Boolean- 布尔对象
  • Error- 谬误对象

上面我会一一解说。

function- 函数对象

创立

格局
// 创立函数格局一
function 函数名(形参列表) {函数体}

// 创立函数格局二
let 函数名 = function(形参列表) {函数体}

// 创立函数格局三（不倡议应用）let 函数名 = new function(形参列表, 函数体);
演示
// 创立函数格局一
function fun01(a, b) {console.log("fun01 的后果为：" + (a + b));
}
// 创立函数格局二
let fun02 = function(a,b){console.log("fun02 的后果为：" + (a + b));
}

调用

格局
函数名(实参列表);
演示
// 调用 fun01
fun01(10,20);//fun01 的后果为：30

// 调用 fun02
fun02(30,40);//fun02 的后果为：70

属性

length：函数形参的个数。

let d = fun01.length;

console.log("函数 fun01 的形参个数为：" + d);// 函数 fun01 的形参个数为：2

特点

  1. 创立办法时，形参类型不须要写，返回值类型也不须要写。
  2. 办法是一个对象，如果定义名称雷同的办法，会后者后笼罩前者。
  3. 在 JS 中，办法的调用只与办法的名称无关，和参数列表无关。即只有办法名正确，你参数传少、传多，都是能够失常调用办法的。
  4. 在办法申明中有一个暗藏的内置对象（数组）——arguments，封装所有的理论参数。所以哪怕办法形参只有两个，然而你也能够传入三个，因为实参都是先被 arguments 数组所接管了。

Array- 数组对象

创立

格局
// 创立数组格局一
let 数组名 = new Array();

// 创立数组格局二
let 数组名 = new Array(默认长度);

// 创立数组格局三
let 数组名 = new Array(元素列表);

// 创立数组格局四
let 数组名 = [元素列表];
演示
// 创立数组格局一
let arr01 = new Array();

// 创立数组格局二
let arr02 = new Array(3);

// 创立数组格局三
let arr03 = new Array(1,2,3);

// 创立数组格局四
let arr04 = [4,5,6,7,8];

遍历

格局
数组名[索引];
演示
// 遍历数组
for (let i = 0; i < arr04.length; i++) {console.log(arr04[i]);
}

属性

length：数组的长度

let num = arr03.length;// 获取数组 arr03 的长度

办法

join()

将数组中的元素依照指定的分隔符拼接为字符串

// 将数组中的元素依照指定的分隔符拼接为字符串
let arr05 = arr04.join("-");
console.log(arr05);////4-5-6-7-8
push()

向数组的开端增加一个或更多元素，并返回新的长度。

// 向数组的开端增加一个或更多元素，并返回新的长度
let length = arr04.push(9,10,11);
console.log(length);//8

特点

  1. JS 中，数组存储元素的类型不是对立的，是可变的。而 Java 数组只能存储繁多类型的元素。
  2. JS 中，数组长度也不是固定的，数组长度可变。而 Java 数组长度创立之初就固定，不可扭转。

Date- 日期对象

创立

格局
let 日期对象名 = new Date();
演示
let newTime = new Date();
document.write(newTime);//Tue Dec 22 2020 22:45:04 GMT+0800 (GMT+08:00)

办法

  • toLocaleString()：返回以后 date 对象对应的工夫本地字符串格局

    let newTime = new Date();
let localeTime = newTime.toLocaleDateString();
document.write(localeTime);//2020/12/22

  • getTime()：获取毫秒值。返回以后如期对象形容的工夫到 1970 年 1 月 1 日零点的毫秒值差

    let newTime = new Date();
let MSTime = newTime.getTime();
document.write(MSTime);//1608648497413

Math- 数学对象

创立

Javascript 中的 Math 也不须要创立了，间接通过 Math. 办法名() 的形式来应用数学对象。

属性

PI：圆周率

let a = Math.PI;
document.write(a);//3.141592653589793

办法

  • random()：返回一个 [0,) 之间的伪随机数。
  • ceil()：对传入的参数，向上取整。
  • floor()：对传入的参数，向下取整。
  • round()：对传入的参数，四舍五入。

RegExp- 正则对象

创立

格局
// 创立正则格局一
let 正则对象名 = new RegExp("正则表达式");

// 创立正则格局二
let 正则对象名 = / 正则表达式 /;
演示
// 创立正则格局一
let regExp01 = new RegExp("^0\\\\d{2}.[1-9].*6$");
document.write(regExp01);///^0\\d{2}.[1-9].*6$/

// 创立正则格局二
let regExp02 = /^0\\d{2}.[1-9].*6$/;
document.write(regExp02);///^0\\d{2}.[1-9].*6$//^0\\d{2}.[1-9].*6$/

规定

规定太多了，说也说不清，来这里学习吧~

点我——> 正则学习网站

办法

test()：传入字符串，验证是否合乎正则定义的标准

let regExp01 = new RegExp("^0\\\\d{2}.[1-9].*6$");
let result = regExp01.test("3093");
document.write(result);//false

Global- 全局对象

创立

全局对象也是不须要创立的，Global 对象中的办法也不须要对象，就能够间接被调用。如：alert()

办法

  • encodeURI()：将字符串作为 URI 进行编码。
  • encodeURIComponent()：将字符串作为 URI 组件进行编码。编码的字符更多。
  • decodeURI()：对 encodeURI() 函数编码过的 URI 进行解码。
  • decodeURIComponent()：可对 encodeURIComponent() 函数编码的 URI 进行解码。
  • eval()：解析字符串模式的 JavaScript 代码，并执行它。
  • isNaN()：因为用 == 与 NaN 进行比拟，哪怕是 NaN 本身，也只能失去 false。应用此办法，能够检查数据自身其是否为 NaN。
  • parseInt()：逐个判断每一个字符是否是数字，直到不是数字为止，将前边数字局部转为 number。

Number- 数字包装对象

概述

Number 对象是原始数值的包装对象。

创立

格局
let 变量名 = new Number(value);
演示
let num = new Number(40);

办法

  • toString()：数字转为字符串

    let num = new Number(40);
document.write(typeof(num) + "<br/>");//object

let string = num.toString();
document.write(typeof(string));//string

  • valueof()：拆箱

    let num = new Number(40);
document.write(typeof(num) + "<br/>");//object

let number = num.valueOf();
document.write(typeof(number));//number

String- 字符串对象

概述

String 对象用于解决文本（字符串），和 Java 的 String 类简直统一。

创立

格局
// 创立 string 对象格局一
let 变量名 = new String("字符串内容");

// 创立 string 对象格局二
let 变量名 = new String('字符串内容');

// 创立 string 对象格局三
let 变量名 = "字符串内容";

// 创立 string 对象格局四
let 变量名 = '字符串内容';
演示
// 创立 string 对象格局一
let s01 = new String("字符串一");
document.write(s01 + "<br/>");

// 创立 string 对象格局二
let s02 = new String('字符串二');
document.write(s02 + "<br/>");

// 创立 string 对象格局三
let s03 = "字符串三";
document.write(s03 + "<br/>");

// 创立 string 对象格局四
let s04 = '字符串四';
document.write(s04 + "<br/>");

办法

很多，也是根本和 Java 的差不多。您啊，罗唆间接去【菜鸟教程】学得了。JavaScript String 对象 | 菜鸟教程

Boolean- 布尔对象

概述

Boolean 对象用于转换一个不是 Boolean 类型的值转换为 Boolean 类型值 (true 或者 false).

创立

格局
// 创立 Boolean 对象格局一
let boolean01 = new Boolean();

// 创立 Boolean 对象格局二
let boolean02 = new Boolean(true);

// 创立 Boolean 对象格局三
let boolean03 = false;
演示
// 创立 Boolean 对象格局一
let boolean01 = new Boolean();
document.write(boolean01 + "<br/>");//false

// 创立 Boolean 对象格局二
let boolean02 = new Boolean(true);
document.write(boolean02 + "<br/>");//true

// 创立 Boolean 对象格局三
let boolean03 = false;
document.write(boolean03 + "<br/>");//false

Error- 谬误对象

概述

error 是指程序中的非正常运行状态，在其余编程语言中称为“异样”或“谬误”，解释器会为每个谬误情景创立并抛出一个 Error 对象，其中蕴含谬误的形容信息；

ECMAScript 定义了六种类型的谬误，除此之外，还能够应用 Error 构造方法创立自定义的 Error 对象，并应用 throw 语句抛出该对象。

创立

格局
// 创立 Error 对象格局一
let 变量名 = new Error();

// 创立 Error 对象格局二
let 变量名 = new Error(message);
演示
// 创立 Error 对象格局一
let error01 = new Error();

// 创立 Error 对象格局二
let error02 = new Error("空指针异样");

分类

  1. ReferenceError：援用谬误，要用的货色没找到；
  2. TypeError：类型谬误，谬误的调用了对象的办法；
  3. RangeError：范畴谬误，专指参数超范围；
  4. SyntaxError：语法写错了；
  5. EvalError：eval()办法谬误的应用；
  6. URIError：URI 地址谬误；

属性

  • name：设置或返回一个谬误名
  • message：设置或返回一个错误信息(字符串)
let error02 = new Error("空指针异样");

let errorName = error02.name = "我的 Error 对象";
document.write(errorName + "<br/>");// 我的 Error 对象

let errorMessage01 = error02.message;
document.write(errorMessage01 + "<br/>");// 空指针异样

error02.message = "德玛西亚的异样";
document.write(error02.message + "<br/>");// 德玛西亚的异样

自定义 Object 对象（扩大）

这个自定义的 Object 对象，和咱们 Java 中的类很相识，都是由属性和办法 (函数) 组成的。上面我会来具体介绍一下这个自定 Object 对象的创立和应用。

创立

格局
// 创立自定 Object 对象格局一
let 变量名 = new Object();

// 创立自定义 Object 对象格局二
let 变量名 = {
    属性名: 属性值,
    函数名: 函数体
}
演示
// 创立自定 Object 对象格局一
let obj01 = new Object();

// 创立自定义 Object 对象格局二
let obj02 = {
    name: "Jason",
    age: 21,
    reading: function(){document.write("我在读书!");
    }
};

增加、批改值

格局
Object 对象. 属性名 = 属性值;

Object 对象. 函数名 = 函数体;
演示
obj01.name = "Bernardo Li";

obj01.reading = function () {document.write("我也在读书");
}

批改值与增加值一样，批改值无非是在对已存在的值进行赋值。

应用值

格局
Object 对象. 属性名;

Object 对象. 函数名();
演示
document.write(obj02.name + "<br/>");//Jason
obj02.reading();// 我在读书!

BOM 对象

概述

BOM(Browser Object Model) 是指浏览器对象模型，是用于形容这种对象与对象之间档次关系的模型，浏览器对象模型提供了独立于内容的、能够与浏览器窗口进行互动的对象构造。

组成

BOM 由多个对象组成，其中代表浏览器窗口的 Window 对象是 BOM 的顶层对象，其余对象都是该对象的子对象。其子对象如下：

  • document——文档对象
  • Navigator——浏览器对象
  • Screen——显示器对象
  • History——历史记录对象
  • Location——地址栏对象

Window- 窗口对象

创立

首先 window 对象是不须要手动去创立的。咱们能够通过 window. 办法名() 的形式调用它的办法，甚至不须要window.，就能够间接调用其办法。

//window. 办法名()
window.alert("我是一个弹窗");

// 省略 window，间接调用办法
alert("我也是一个弹窗");

属性

咱们能够通过 BOM 对象中的属性来获取其子对象。如下：

  1. Window.Document：获取 Document 文档对象 Window. 可省略）。
  2. Window.History：获取 History 历史记录对象（Window.可省略）。
  3. Window.Navigator：获取 Navigator 浏览器对象（Window.可省略）。
  4. Window.Screen：获取 Screen 显示器对象（Window.可省略）。
  5. Window.Location：获取 Location 地址栏对象（Window.可省略）。

办法

DOM 对象

前言

咱们曾经解说过 BOM 对象了，晓得 DOM 对象只是 BOM 顶层对象 Window 的几个子对象之一。既然 DOM 对象是 BOM 对象的子对象，为什么不蕴含在 BOM 对象中解说，而是要独自提取进去进行阐明呢？起因就是：DOM 对象与 History 对象、Location 对象等虽都为 BOM 的子对象，但 DOM 对象在咱们日常开发中的应用频率远高于同级的 BOM 其余子对象。所以咱们要对其具体解说一下。

概述

通过 DOM，能够拜访所有的 HTML 元素，连同它们所蕴含的文本和属性。能够对其中的内容进行批改和删除，同时也能够创立新的元素。

对于 Dom 对象的了解，能够总结为四点：

  1. Document 它治理了所有的 HTML 文档内容。
  2. document 它是一种树结构的文档，有层级关系。
  3. 它让咱们把所有的标签都对象化
  4. 咱们能够通过 document 拜访所有的标签对象。

分类

document 对象蕴含了以下几种对象：

  1. Element- 元素对象
  2. Attribute- 属性对象
  3. Text- 文本对象
  4. Comment- 正文对象
  5. Node- 节点对象

创立

形式一

通过 windown 对象来获取，格局为：window.document

形式二

window.` 能够省略，间接调用 document 对象，格局为：`document

获取其余对象

  • document.createElement(tagName)：给定的标签名，创立一个标签对象。tagName 为要创立的标签名。
  • document.createAttribute(attributeName)：创立一个指定名称的属性，并返回 Attr 对象属性。
  • document.createComment(text)：创立正文节点。text 为正文文本。
  • document.createTextNode(text)：创立文本节点。text 为文本节点的文本。

Element- 元素对象

获取

  • document.getElementById(elementId)：通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值。
  • document.getElementsByName(elementName)：通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值、
  • document.getElementsByTagName(tagName)：通过标签名查找标签 dom 对象，tagname 为标签名。

三个查询方法的优先级问题：

  1. 如果有 id 属性，优先应用 getElementById 办法来进行查问
  2. 如果没有 id 属性，则优先应用 getElementsByName 办法来进行查问
  3. 如果 id 属性和 name 属性都没有最初再按标签名查 getElementsByTagName

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo01</title>
    <style type="text/css">
        #title {
            font-weight: bold;
            color: cornflowerblue;
        }
    </style>
</head>
<body>
<!-- 一个表单 -->
<form id="table" action="/">
    <span id="title"> 请抉择你的喜好 </span><br/>
    <span>Game：</span><input type="checkbox" name="hobbies" value="Game">
    <span>Reading:</span><input type="checkbox" name="hobbies" value="Reading">
    <span>Boxing:</span><input type="checkbox" name="hobbies" value="Boxing"><br/>
    <input type="submit" value="提交">
</form>
</body>
<script type="text/javascript">
    // 通过 Id 获取 dom 对象
    var tableElement = document.getElementById("table");
    document.write(tableElement + "<br/>");//[object HTMLFormElement]

    // 通过 name 获取 dom 对象们
    var hobbiesElement = document.getElementsByName("hobbies");
    document.write(hobbiesElement + "<br/>");//[object NodeList]

    // 通过 tagName 获取 dom 对象们
    var spanElement = document.getElementsByTagName("span");
    document.write(spanElement + "<br/>");//[object HTMLCollection]
</script>
</html>

办法

  • setAttribute("属性名", 属性值)：设置调用者的指定属性名的属性值。
  • removeAttribute("属性名")：移除调用者的指定属性。

Node- 节点对象

属性

  • parentNode：获取以后节点的父节点。
  • childNodes：获取以后节点的所有子节点
  • firstChild：获取以后节点的第一个子节点
  • lastChid：获取以后节点的最初一个子节点
  • previousSibling：获取以后节点的上一个节点
  • nextSibling：获取以后节点的下一个节点
  • className：获取或设置标签的 class 属性值
  • innerHTML：获取 / 设置起始标签和完结标签中的内容
  • innerText：获取 / 设置起始标签和完结标签中的文本

办法

  • appendChild()：向节点的子节点列表的结尾增加新的子节点。
  • removeChild()：删除（并返回）以后节点的指定子节点。
  • replaceChild()：用新节点替换一个子节点。

document 对象下的其余对象在这里就不在过多的叙述了，有趣味的能够去菜鸟教程中学习。

事件

概述

某些组件被执行了某些操作后，触发某些代码的执行。

点击事件

  1. onclick：单击事件
  2. ondblclick：双击事件

焦点事件

：失去焦点

- 个别用于表单验证

2. `onfocus`：元素取得焦点

## 加载事件

`onload`：一张页面或一副图像实现加载。## 鼠标事件

1. `onmousedown`：鼠标按钮被按下。2. `onmouseup`：鼠标按钮被松开。3. `onmousemove`：鼠标被挪动。4. `onmouseover`：鼠标移到某元素之上。5. `onmouseout`：鼠标从某元素移开。## 键盘事件

1. `onkeydown`：某个键盘按键被按下。2. `onkeyup`：某个键盘按键被松开。3. `onkeypress`：某个键盘按键被按下并松开。## 抉择和扭转

1. `onchange`：域的内容被扭转。2. `onselect`：文本被选中。## 表单事件

1. `onsubmit`：确认按钮被点击。
退出移动版