JavaScript

1、JavaScript 介绍

javaScript 简称叫 JS 。

 

Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行 JavaScript 代码。

 

JS 是 Netscape 网景公司的产品，最早取名为 LiveScript; 为了吸引更多 java 程序员。更名为 javascript 。

 

JS 是弱类型， Java 是强类型。

int 变量名 = 值必须是 int

var 变量名 = 赋任意类型的值。

 

var i = 数值

i = 字符串

 

 

特点：

1.  交互性（它可以做的就是信息的动态交互）

2.  安全性（不允许直接访问本地硬盘）

3.  跨平台性（只要是可以解释 Js 的浏览器都可以执行，和平台无关）

 

 

 

 

 

2 、 JavaScript 和 html 代码的结合方式

2.1 、第一种方式

只需要在 head 标签中，或者在 body 标签中， 使用 script 标签 来书写 JavaScript 代码

 

< head >

< meta   http-equiv = "Content-Type"   content = "text/html; charset=UTF-8" >

< title > Insert title here </ title >

<!-- 在script标签中。定义的代码都是 js 代码。 -->

< script   type = "text/javascript" >

/*

alert是js中的一个警告框函数。

它可以接收任意类型的数据。你给它传什么，它就是弹什么内容。

*/

alert( "hello js" );

</ script >

</ head >

2.2 、第二种方式

使用 Script 标签引入 单独的 JavaScript 代码文件

 

 

 

4 、变量

什么是变量？变量是可以存放某些值的内存的命名。

 

javaScript 的变量类型：

数值类型： number

字符串类型： string

对象类型： Object

布尔类型： boolean

函数类型： function

 

javascript 里特殊的值：

undefined 未定义 在 js 中，所有变量，未赋初始的情况下，默认值都是 undefined

null 空值

NAN   会写   not a number 非数字

 

 

JS 中的定义变量格式：

var 变量名 ;

var   变量名 = 值；   直接赋初值

 

< script   type = "text/javascript" >

var  i;

// 默认是undefined

// alert(i);

 

i = 12;

// typeof 是取变量的类型

// alert( typeof( i ) ); // number

i = "this is a string" ;

alert( typeof ( i ) ); // number

</ script >

 

 

关系（比较）运算

等于： ==

全等于： ===

 

< script   type = "text/javascript" >

var  i = 12;

var  b = "12" ;

//在js中，等于，只是简单的做字面值的比较。

alert( i == b ); //true

//全等于，除了做字面值的比较之外 。还会比较两个数据的类型

alert( i === b ); // false

</ script >

 

 

 

7.4 、逻辑运算

且运算： &&

或运算： ||

取反运算： ！

 

 

 

0 、 null 、 undefined 、 ”” ( 空串 ) 都认为是 false ；

 

 

/*

&& 与运算。

有两种情况：

第一种：当表达式全为真的时候。返回最后一个表达式的值。

第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值

|| 或运算

第一种情况：当表达式全为假时，返回最后一个表达式的值

第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值

并且 && 与运算  和 ||或运算 有短路。

短路就是说，当这个 &&或||运算有结果了之后 。后面的表达式不再执行

*/

 

< script   type = "text/javascript" >

// 0 、null、 undefined、””(空串) 都认为是 false；

// var a = 0;

// if (a) {

// alert("零为真");

// } else {

// alert("零为假");

// }

// var b = null;

// if (b) {

// alert("null为真");

// } else {

// alert("null为假");

// }

// var c = undefined;

// if (c) {

// alert("undefined为真");

// } else {

// alert("undefined为假");

// }

// var d = "";

// if (d) {

// alert("空串为真");

// } else {

// alert("空串为假");

// }

 

// && 与运算。

// 有两种情况：

// 第一种：当表达式全为真的时候。返回最后一个表达式的值。

// 第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值

// var a = "abc";

// var b = true;

// var d = false;

// var c = null;

// alert( a && b ); // true

// alert( b && a ); // abc

// alert( d && c ); // false

// alert( c && d ); // null

// || 或运算

// 第一种情况：当表达式全为假时，返回最后一个表达式的值

// 第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值

var  a = "abc" ;

var  b = true ;

var  d = false ;

var  c = null ;

// alert( d || c ); // null

// alert( c || d ); // false

// alert( a || b ); // abc

// alert( b || a ); // true

</ script >

 

 

7 、数组（ ***** 重点）

7.1 、数组定义方式

Js 中 数组的定义：

格式：

var 变量名 ( 数组名 ) = []; // 定义一个空的数组

var 变量名 ( 数组名 ) = [12,” abc” , true]; // 定义数组同时，初元素初值

 

< script   type = "text/javascript" >

// var 变量名(数组名) = []; // 定义一个空的数组

var  arr = [];

// alert( arr.length ); // 数组长度为

arr[0] = 12;

// alert(arr[0]); // 12

// alert(arr.length); // 1

arr[2] = "abc" ;

// 当我们通过数组下载给数组元素赋初值的时候。js的数组会自动的根据赋值的最大下标做扩容操作。

// alert(arr.length); //3

// alert(arr[1]); // undefined

// 数组的遍历

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

// alert(arr[i]);

// }

// var 变量名(数组名) = [12,”abc”, true]; // 定义数组同时，初元素初值

var  arr2 = [12, "abc" , true ];

// alert(arr2.length);

arr2[5] = 12;

alert(arr2.length);

 

  // 二维数组，就是一维数组中，每一个元素都数组

var  arr3 = [];

var  arr31 = [311,312,313];

arr3[0] = arr31;

var  arr32 = [321,322,323];

arr3[1] = arr32;

 

alert(arr3[0][1]);

 

</ script >

 

8 、函数 (***** 重点 )

8.1 、函数的二种定义方式

函数的第一种定义方式：

function 函数名 ( 参数列表 ) {

函数体

}

定义带有返回值的函数。只需要在函数体内直接使用 return 语句返回值即可。

 

如何调用一个函数：

函数名 ( 传参 );

 

< script   type = "text/javascript" >

// 函数的第一种定义方式：

// 无参函数的定义

function  fun() {

alert( "fun函数被调用了" );

}

// 函数的调用

// fun();

// 有参函数

function  fun1( a , b ) {

alert( "有参函数 a->"  + a + ",b->"  + b);

}

// fun1(1, 2);

// 带有返回值的函数定义

function  fun2( num1, num2 ) {

return  num1 + num2;

}

alert( fun2(100, 200) );

</ script >

 

函数的第二种定义方式：

var 函数名 = function( 参数列表 ){

函数体

}

 

调用

函数名 ( 传值 );

 

< script   type = "text/javascript" >

// 函数的第二种定义

var  sum = function ( num1,num2 ){

var  num3 = num1 + num2;

return  num3;

}

var  result = sum( 200,200 );

alert( "结果是："  + result);

</ script >

 

 

 

 

 

注：在 Java 中函数允许重载。但是在 Js 中函数的重载会直接覆盖掉上一次的定义

 

< script   type = "text/javascript" >

function  fun( ) {

alert( "无参函数fun被调用" );

}

//在js函数中，是不允许重载函数的。最后一次的定义会直接覆盖掉原来的定义。

function  fun( num1,num2 ) {

alert( "有两个参数的函数fun被调用" );

}

fun();

</ script >

 

 

8.2 、 函数的 arguments 隐形参数 （只在 function 函数内）

 

< script   type = "text/javascript" >

function  fun(a,b) {

// arguments//它是一个变长的参数。

// 它的使用跟数组一样

// alert( arguments.length );

// 要获取参数的值，可以通过下标 arguments[下标]

// alert(arguments[0]);

// alert(arguments[1]);

// alert(arguments[2]);

// alert("-------------华丽分隔线---------");

// alert(a);

// alert(b);

}

// fun(12,"abc",true);

//需求：需要定义一个函数。去计算若干个，传递进来的number类型的值的总和，并返回。

function  sum(){

var  result = 0;

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

if  ( typeof (arguments[i]) == "number" ) {

result += arguments[i];

}

// result += arguments[i];

}

return  result;

}

alert( sum(10,20, "asd" ,30,40) );

</script>

JS 中的自定义对象 （扩展内容）

Object 形式的自定义对象

var 变量名 = new Object(); // 是一个空对象实例

变量名 . 属性名 = 值； // 就给对象实例添加一个属性

变量名 . 方法名 = function(){} // 给对象实例添加一个方法

 

访问对象内容：

变量名 . 属性名 / 方法名 ();

 

< script   type = "text/javascript" >

// 定义一个对象

var  obj = new  Object();

obj.name = "xx" ;

obj.age = 18;

obj.fun = function (){

alert( "年龄："  + this .age + "，姓名："  + this .name);

}

// 访问

alert( obj.name );

obj.fun();

</ script >

 

 

 

{} 花括号形式的自定义对象

var 变量名 = {

属性名 : 值 , // 添加一个属性

属性名 : 值 , // 添加一个属性

方法名 : function(){}   添加一个方法

};

 

对象的访问：

变量名 . 属性名 / 方法名 ();

 

< script   type = "text/javascript" >

var  obj = {

name: "国华" ,

age:18,

fun: function (){

alert( "姓名："  + this .name + ",年龄："  + this .age);

}

};

alert(obj.age);

obj.fun();

</ script >

 

 

10、js 中的事件

什么是事件？事件是电脑输入设备与页面进行交互的响应。我们称之为事件。

 

 

常用的事件：

onload 加载完成事件 页面加载完成之后

onclick 单击事件 单击事件，

onblur 失去焦点事件

onchange 内容发生改变事件 当下拉列表或者输入框中的内容发生改变的时候，会触发。

onsubmit 表单提交事件 常用于 form 表单提交之前，验证所有表单项是否合法。如果有一个不合法。就阻止表单提交。

 

 

 

事件的注册又分为静态注册和动态注册两种：

 

 

静态注册 ( 绑定 ) 事件 ：

静态注册事件，指的是在标签的事件属性上直接赋于事件触发后需要调用的 js 代码。这种方式我们称之为静态注册。

 

动态注册（绑定）事件 ：

动态注册指的是，动态地获取标签对象。然后通过标签对象 . 事件名 = function(){} 赋值函数的形式。我们称之为动态注册。

 

动态注册的步骤：

window.onload = function(){  // 页面加载完成之后

1. 获取标签对象

2. 通过标签对象 . 事件名 = function(){}

}

 

 

 

onload 事件的示例代码

<! DOCTYPE   html   PUBLIC   "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd" >

< html >

< head >

< meta   http-equiv = "Content-Type"   content = "text/html; charset=UTF-8" >

< title > Insert title here </ title >

< script   type = "text/javascript" >

function  onloadFun(){

alert( "页面加载完成之后。静态注册" );

}

//onload的动态注册事件。是固定的语法。

window.onload = function (){

alert( "页面加载完成之后！动态注 册 ");

}

</ script >

</ head >

<!-- 静态注册页面加载完成之后

<body onload ="onloadFun()">

 -->

< body >

</ body >

</ html >

 

onclick 单击事件示例代码

 

<! DOCTYPE   html   PUBLIC   "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd" >

< html >

< head >

< meta   http-equiv = "Content-Type"   content = "text/html; charset=UTF-8" >

< title > Insert title here </ title >

< script   type = "text/javascript" >

function  onclickFun(){

alert( "这是静态注册的单击事件" );

}

// 第二个按钮，我们希望使用动态注册

window.onload = function (){

//1.获取标签对象

//get获取

//Element元素（元素即是标签）

//by 通过，由经

//id id属性

// 通过id属性，获取标签对象

var  btnObj = document.getElementById( "btn02" );

//2.通过标签对象.事件名 = function(){}

btnObj.onclick = function (){

alert( "这是动态注册的单击事件" );

}

}

</ script >

</ head >

< body >

<!--

静态注册 onclick 事件

 -->

< button   onclick = "onclickFun()" > 111 </ button >

< button   id = "btn02" > 222 </ button >

</ body >

</ html >

 

onblur 失去焦点事件

<! DOCTYPE   html   PUBLIC   "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd" >

< html >

< head >

< meta   http-equiv = "Content-Type"   content = "text/html; charset=UTF-8" >

< title > Insert title here </ title >

< script   type = "text/javascript" >

function  onblurFun() {

//console控制台对象

// log方法，可以打印任意内容

console.log( "静态注册的 用户名输入框，失去焦点了！" );

}

//页面加载完成之后

window.onload = function (){

// 1.先获取标签对象

var  passObj = document.getElementById( "password" );

//2.通过标签对象.事件名 = function(){}

passObj.onblur = function (){

console.log( "动态注册密码输入框的失去焦点事件" );

}

}

</ script >

</ head >

< body >

<!--

静态注册事件

 -->

用户名 : < input   onblur = " onblurFun()" type = "text"   />< br />

密码： < input   id = "password"   type = "password"   />

</ body >

</ html >

 

onchange 内容发生改变事件示例代码

<! DOCTYPE   html   PUBLIC   "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd" >

< html >

< head >

< meta   http-equiv = "Content-Type"   content = "text/html; charset=UTF-8" >

< title > Insert title here </ title >

< script   type = "text/javascript" >

function  onchangeFun() {

alert( "这是静态注册的失去焦点事件！" );

}

window.onload = function (){

//1.获取标签对象

var  selObj = document.getElementById( "sel01" );

//2.通过标签对象.事件名=function(){}

selObj.οnchange= function (){

alert( "这是动态注册的onchange事件" );

}

}

</ script >

</ head >

< body >

请选择你心中的女神：

< select   onchange = "onchangeFun()" >

< option > --选择女神-- </ option >

< option > xx </ option >

< option > xx </ option >

< option > xx </ option >

</ select >< br />

请选择你心中的男神：

< select   id = "sel01" >

< option > --选择男神-- </ option >

< option > xx </ option >

< option > xx </ option >

< option > xx </ option >

< option > xx </ option >

</ select >

</ body >

</ html >

onsubmit 表单提交事件

<! DOCTYPE   html   PUBLIC   "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd" >

< html >

< head >

< meta   http-equiv = "Content-Type"   content = "text/html; charset=UTF-8" >

< title > Insert title here </ title >

< script   type = "text/javascript" >

function  onsubmitFun(){

alert( "开始验证表单项……" );

alert( "表单项中有错误！阻止表单提交" );

return   false ;

}

// 页面加载完成之后

window.onload = function (){

//1.获取标签对象

//2.通过标签对象.事件名=function(){}

document.getElementById( "form01" ).onsubmit = function (){

alert( "动态---开始验证表单项……" );

alert( "动态---表单项中有错误！阻止表单提交" );

return   false ;

};

}

</ script >

</ head >

< body >

<!--

onsubmit 事件常用于在表单提交前。用来验证所有表单项是否合法。

如果有一个不合法。就 return false阻止表单提交。

如果都合法，就 return true,继续提交

 -->

< form   action = "http://www.baidu.com"   onsubmit = "return onsubmitFun()" >

< input   type = "submit"   />

</ form >

< form   id = "form01"   action = "http://www.baidu.com" >

< input   type = "submit"   />

</ form >

</ body >

</ html >

 

10、DOM 模型

DOM 全称是 Document Object Model 文档对象模型

 

大白话，就是把文档中的标签，属性，文本，转换成为对象来管理。

那么 它们是如何实现把标签，属性，文本转换成为对象来管理呢。这就是我们马上要学习的重点。

 

10.1 、 Document 对象（ ***** 重点）

 

 

Document 对象的理解：

第一点： Document 它管理了所有的 Html 文档内容。

第二点： document 它是一种树结构的文档。有层级关系。

第三点：它让我们把所有的标签 都 对象化

第四点：我们可以通过 document 访问所有的标签对象。

 

 

 

 

 

 

 

什么是对象化？？

我们基础班已经学过面向对象。请问什么是对象化？

举例：

有一个人有年龄： 18 岁，性别：女，名字：张某某

我们要把这个人的信息对象化怎么办！

 

Class Person {

private int age;

private String sex;

private String name;

}

 

 

 

 

那么 html 标签 要 对象化 怎么办？

   < body >

< div   id = "div01" > div01 </ div >

   </ body >

模拟对象化，相当于：

class Dom{

private String id; // id 属性

private String tagName; // 表示标签名

private Dom parentNode; // 父亲

private List<Dom> children; // 孩子结点

    private String innerHTML; // 起始标签和结束标签中间的内容

}

 

 

 

 

 

 

10.4 、 Document 对象中的方法介绍 （ ***** 重点）

document.getElementById(elementId)

通过标签的 id属性查找标签dom对象，elementId 是标签的 id属性值

 

document.getElementsByName(elementName)

通过标签的 name属性查找标签dom对象，elementName 标签的 name属性值

 

document.getElementsByTagName(tagname)

通过标签名查找标签 dom对象。tagname 是标签名

 

document.createElement( tagName)

方法，通过给定的标签名，创建一个标签对象。 tagName 是要创建的标签名

 

 

getElementById 方法示例代码：

<! DOCTYPE   html   PUBLIC   "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd" >

< html >

< head >

< meta   http-equiv = "Content-Type"   content = "text/html; charset=UTF-8" >

< title > Insert title here </ title >

< script   type = "text/javascript" >

//现在我们希望，当用户点击 [验证] 获取用户名输入框的内容。

// 验证 是否属性 字母，数字，下划线。并且长度为 5-15位

window.onload = function (){

document.getElementById( "username" ).onblur = function () {

var  inputObjTextValue = document.getElementById( "username" ).value;

// alert("失去焦点事件：" + inputObjTextValue);

var  patt = /^\w{5,15}$/;

// 获取span标签对象

var  spanObj = document.getElementById( "usernameSpan" );

if  (patt.test(inputObjTextValue)) {

spanObj.innerHTML = "<img alt='' width='15' height='15' src='right.png'>" ;

} else  {

spanObj.innerHTML = "<img alt='' width='15' height='15' src='wrong.png'>" ;

}

}

// 获取[验证]按钮注册单击事件

document.getElementById( "btn01" ).onclick = function (){

//要操作一个操作对象。首先要先获取到标签对象

//1.先通过id属性获取到标签对象

var  inputObj = document.getElementById( "username" );

// value属性可以获取到 输入框中的内容。

var  inputObjTextValue = inputObj.value;

// 验证 是否属性 字母，数字，下划线。并且长度为5-15位

// 需要使用正则表达式验证

// \w 表示字母，数字，下划线。

// {5,15} 表示最少5位长度，最大15长度

// ^ 表示以什么开始

// $ 表示以什么结束

// ^$ 表示整个字符串都必须完全匹配

var  patt = /^\w{5,15}$/;

// test()可以验证一个字符串，是否匹配正则对象

// 如果匹配，返回，true，如果不匹配，返回false

// 获取span标签对象

var  spanObj = document.getElementById( "usernameSpan" );

// innerHTML 就表起始标签和结束标签中的内容，这个属性，可读，可写

// alert(spanObj.innerHTML);

if  (patt.test(inputObjTextValue)) {

// spanObj.innerHTML = "用户名合法";

spanObj.innerHTML = "<img alt='' width='15' height='15' src='right.png'>" ;

} else  {

// spanObj.innerHTML = "用户名不合法";

spanObj.innerHTML = "<img alt='' width='15' height='15' src='wrong.png'>" ;

}

};

}

</ script >

</ head >

< body >

用户名 : < input   type = "text"   id = "username"   value = "123412" />

< span   id = "usernameSpan"   style =" color : red ;" ></ span >

< button   id = "btn01" > 验证 </ button >

</ body >

</ html >

 

 

 

getElementsByName 方法示例代码：

<! DOCTYPE   html   PUBLIC   "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd" >

< html >

< head >

< meta   http-equiv = "Content-Type"   content = "text/html; charset=UTF-8" >

< title > Insert title here1111 </ title >

< script   type = "text/javascript" >

//我们希望点击完按钮之后。操作一组标签对象。

//都需要先获取你要操作的标签对象。

window.onload = function (){

//全选单击事件

document.getElementById( "checkAll" ).onclick = function (){

// 我们希望点击全选按钮后，所有的复选框都选中

// 通过getElementsByName查找回来的对象是一个集合。

// 这个集合中每个元素都是查找到的标签对象。这个集合的操作，跟数组一样。可以通过下标获取其中的元素。

// 这个集合中元素的顺序 ，就是这些标签在html页面上。从上到下的顺序。

var  hobbyObjs = document.getElementsByName( "hobby" );

// alert(hobbyObjs.length);

// var hobbyItem = hobbyObjs[0];

// 复选框对象有checked属性。这个属性表示复选框的选中状态。

// true表示选中。false表示不选中。

// 这个属性，是可读，可写的

// hobbyItem.checked = true;

// Shirt + Ctrl + C

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

hobbyObjs[i].checked = true ;

}

};

//全不选单击事件

document.getElementById( "checkNo" ).onclick = function (){

var  hobbyObjs = document.getElementsByName( "hobby" );

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

hobbyObjs[i].checked = false ;

}

};

// 反选单击事件

document.getElementById( "checkReverse" ).onclick = function (){

//先获取你需要操作的标签对象

var  hobbyObjs = document.getElementsByName( "hobby" );

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

//先判断原来的选中状态。如果原来选中，设置为不选中

if  (hobbyObjs[i].checked) {

hobbyObjs[i].checked = false ;

} else  {

hobbyObjs[i].checked = true ;

}

}

};

}

</ script >

</ head >

< body >

兴趣爱好：

< input   type = "checkbox"   name = "hobby"   /> Java

< input   type = "checkbox"   name = "hobby"   /> C++

< input   type = "checkbox"   name = "hobby"   /> js

< br />

< button   id = "checkAll"   onclick = "checkAllFun()" > 全选 </ button >

< button   id = "checkNo" > 全不选 </ button >

< button   id = "checkReverse" > 反选 </ button >

</ body >

</ html >

 

getElementsByTagName 方法示例代码：

<! DOCTYPE   html   PUBLIC   "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd" >

< html >

< head >

< meta   http-equiv = "Content-Type"   content = "text/html; charset=UTF-8" >

< title > Insert title here1111 </ title >

< script   type = "text/javascript" >

//我们还是希望，点击全选的时候，操作全部的复选框，就可以通过

// 标签名查找

window.onload = function (){

document.getElementById( "checkAll" ).onclick = function (){

//1.先获取标签对象集合。

var  inputObjs = document.getElementsByTagName( "input" );

// getElementsByTagName 返回的是一个集合。

// 集合中每一个元素都是标签对象。这个集合的操作跟数组一样。可以通过下标 获取元素

// 也有length属性

// 这些元素的顺序，就是这些标签在html页面中，从上到下的顺序。

//2.遍历操作每一个元素

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

inputObjs[i].checked = true ;

}

};

}

</ script >

</ head >

< body >

兴趣爱好：

< input   type = "checkbox"   /> Java

< input   type = "checkbox"   /> C++

< input   type = "checkbox"   /> js

< br />

< button   id = "checkAll"   onclick = "checkAllFun()" > 全选 </ button >

</ body >

</ html >

 

 

 

10.5 、节点的常用属性和方法（节点就是标签对象）

方法：

 

通过具体的元素（元素即是标签）节点调用

getElementsByTagName()

方法，获取当前节点的指定标签名孩子节点

 

appendChild( oChildNode )

方法，可以添加一个子节点， oChildNode 是要添加的孩子节点

 

 

属性：

childNodes

属性，获取当前节点的所有子节点

firstChild

属性，获取当前节点的第一个子节点

lastChild

属性，获取当前节点的最后一个子节点

parentNode

属性，获取当前节点的父节点

nextSibling

属性，获取当前节点的下一个兄弟节点

previousSibling

属性，获取当前节点的上一个兄弟节点

className   

用于获取或设置标签的 class 属性值

innerHTML

属性，表示获取 / 设置起始标签和结束标签中的内容

innerText

属性，表示获取 / 设置起始标签和结束标签中的文本