网页设计基础与实战课件

第7章JavaScript基础应用7.1JavaScript基础语法7.2DOM基础操作7.3实现定时器7.4

使用数组熟悉JavaScript基础语法了解定时器的使用掌握DOM基本操作掌握JavaScript的基础应用引言JavaScript在网页开发中的应用是十分广泛的，网页中的许多动态功能都可以通过JavaScript来实现，为用户呈现出简洁美观的网页效果，极大地提升了用户的浏览体验感。7.1JavaScript基础语法创建对象案例—选取图书列表DOM获取元素节点JavaScript函数流程控制7.1JavaScript基础语法JavaScript是一个无序集合，所有事物都是对象，比如字符串、数值、数组、函数等。每个对象带有属性和方法。对象的属性反映事物的特征，比如年龄、身高等。对象的方法反映事物的行为，比如吃饭、睡觉等。对象有4种创建方式，分别为字面量方式创建对象、newObject()创建对象、工厂函数创建对象和自定义构造函数创建对象。7.1.1

创建对象7.1JavaScript基础语法7.1.1创建对象字面量创建对象是一种简便的方式，具体用法如下所示。varstudent={name:'张三',age:15,play:function(){console.log('篮球，排球，足球');}}值得注意的是，以字面量的方式创建对象，属性名和属性值（键值对）之间用冒号（:）进行分隔，而属性与属性之间用逗号（,）进行分隔，最后一个属性末尾不需要逗号。7.1JavaScript基础语法7.1.1创建对象newObject()方式创建对象，先通过object构造器new一个对象，再往里丰富成员信息，具体用法如下所示。varstudent=newObject();='张三';student.age=15;student.play=function(){console.log('篮球，排球，足球');}字面量和newObject()这2种方式创建的的对象本质上没有任何区别，都是在内存中创建出一个对象，并能够绑定属性和方法。它们的不足之处是，每创建一个对象，属性和方法都需要重新绑定一份，会产生大量重复的代码。7.1JavaScript基础语法7.1.1创建对象工厂函数方式创建对象是使用函数来创建对象，类似于一个“工厂模式”，可以大批量地创建同种类型的对象，具体用法如下所示。functioncreateStudent(name,age){varstudent=newObject();=nane;student.age=age;student.play=function(){console.log('篮球，排球，足球');工厂函数方式虽然解决了重复实例化多个对象的问题，同时减少重复代码率，但没有解决对象识别的问题，导致对象类型不明确。}returnstudent;}varstu1=createStudent('张三',15);varstu2=createStudent('李四',16);stu1.play();7.1JavaScript基础语法7.1.1创建对象自定义构造函数方式是通过给构造函数传递不同的参数，然后调用构造函数来创建不同对象，具体用法如下所示。functionStudent(name,age){=name;this.age=age;

任何函数，只要通过new操作符来调用，它就可以作为构造函数；如果不用new操作符来调用，它就是一个普通函数的调用。构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，构造函数要和new操作符一同使用才有意义。构造函数是用于创建一类对象，与普通函数进行区分，首字母需要大写。this.play=function(){console.log('篮球，排球，足球');}}varstu1=createStudent('张三',15);7.1JavaScript基础语法7.1.1创建对象new操作符的4个作用说明如下。开辟内存空间，存储新创建的对象。new操作符会让this指向这个新的对象执行构造函数为新对象添加属性和方法new操作符会返回新创建的对象。7.1JavaScript基础语法7.1.1创建对象构造函数中this的4个特点说明如下。在定义函数的时候this是不确定的，只有在调用的时候才能明确其指向。一般函数直接执行，内部this指向全局window对象。函数作为一个对象的方法，被该对象所调用，那么this指向的是该对象。构造函数中的this其实是一个隐式对象，类似一个初始化的模型，所有方法和属性都挂载到了这个隐式对象身上，后续通过new操作符来调用，从而实现实例化对象的使用。7.1JavaScript基础语法7.1.2

JavaScript函数函数是指一组针对处理某一逻辑的代码集合，当被调用时可以重复执行，是计算机编程中非常重要的语法结构。function函数名(参数1,参数2,...){函数体}//定义函数函数名(参数1,参数2,...)//调用函数语法格式定义函数的基本语法格式如下所示。7.1JavaScript基础语法7.1.2

JavaScript函数在函数的基本语法中，function为固定语法格式，函数名为自定义字符，中间用空格隔开。小括号与大括号也为固定写法，小括号中的是参数，大括号中的是函数体，即一个代码集合，用于实现函数功能的语句。通常，在函数中可以不添加参数，也可以添加多个参数，一个函数最多可以有255个参数。在定义函数中添加的参数称为形式参数，简称形参；而在调用函数中添加的参数称为实际参数，简称实参。当函数调用时，即是实参赋值给形参的过程。7.1JavaScript基础语法在JavaScript中，DOM获取元素节点的方法有6种，分别为通过ID获取元素（getElementById）、通过name属性获取元素（getElementsByName）、通过标签名获取元素（getElementsByTagName）、通过类名获取元素（getElementsByClassName）、通过选择器获取一个元素（querySelector）、通过选择器获取一组元素（querySelectorAll），接下来将具体介绍这6种方法。7.1.3

DOM获取元素节点7.1JavaScript基础语法7.1.3

DOM获取元素节点通过元素的ID名，使用getElementById()方法可以获取指定元素，具体用法如下所示。通过ID获取元素（getElementById）document.getElementById("ID名")例varbox=document.getElementById("main")7.1JavaScript基础语法7.1.3

DOM获取元素节点通过元素的name属性，使用getElementsByName()方法可以获取指定元素数组，具体用法如下所示。通过name属性获取元素（getElementsByName）document.getElementsByName("name属性名")例varinput1=document.getElementsByName("user")getElementsByName()方法仅用于Input、Radio、Checkbox等元素对象。7.1JavaScript基础语法7.1.3

DOM获取元素节点通过元素的标签名，使用getElementsByTagName()方法可以获取指定标签名称的所有元素，具体用法如下所示。通过标签名获取元素（getElementsByTagName）document.getElementsByTagName("标签名")例varbox1=document.getElementsByTagName("p")7.1JavaScript基础语法7.1.3

DOM获取元素节点通过元素的class类名，使用getElementsByClassName()方法可以获取指定class类名的所有元素，具体用法如下所示。通过class类名获取元素（getElementsByClassName）document.getElementsByClassName("class类名")例varbox2=document.getElementsByClassName("info")7.1JavaScript基础语法7.1.3

DOM获取元素节点通过元素的选择器，使用querySelector()方法可以获取指定选择器的一个元素，具体用法如下所示。通过选择器获取一个元素（querySelector）document.querySelector("选择器")例varbox3=document.querySelector("#main")7.1JavaScript基础语法7.1.3

DOM获取元素节点通过元素的选择器，使用querySelectorAll()方法可以获取指定选择器的多个元素，具体用法如下所示。通过选择器获取一组元素（querySelectorAll）document.querySelectorAll("选择器")例varbox4=document.querySelectorAll(".info")除了上述获取元素的6种方法，DOM还有获取html和body的方法。7.1JavaScript基础语法7.1.3

DOM获取元素节点DOM获取HTML元素的具体用法如下所示。DOM获取HTML元素（documentElement）document.documentElement例varh1=document.documentElement7.1JavaScript基础语法7.1.3

DOM获取元素节点DOM获取body元素的具体用法如下所示。DOM获取body元素document.body例varb1=document.body7.1JavaScript基础语法JavaScript中的流程控制语句与其他语言相似，一般可分为顺序结构、选择结构和循环结构3种。顺序结构是程序从上到下、从左到右依次执行。选择结构是按照给定的逻辑条件决定执行顺序，比如if语句和switch语句。循环结构是根据代码的逻辑条件来判断是否重复执行某一段程序，比如for循环、while循环和do...while循环。7.1.4

流程控制7.1JavaScript基础语法7.1.4

流程控制单向选择只有1条选择语句，符合条件即选择，不符合条件即不选择，其语法格式如下所示。if语句1.单向选择if语句是选择结构中运用最广泛的语句，一般可分为单向选择、双向选择和多向选择3种形式。if（逻辑条件）{语句1;}语句2;在单向选择的语法格式中，如果if语句的逻辑条件返回true，则执行语句1和语句2；如果if语句的循环条件返回false，则只执行语句2。7.1JavaScript基础语法7.1.4

流程控制双向选择有2条选择语句，符合条件选择1条语句，不符合条件即选择另1条语句，其语法格式如下所示。if语句2.双向选择if（逻辑条件）{语句1;}else{语句2;}在双向选择的语法格式中，如果if语句的逻辑条件返回true，则执行语句1；如果if语句的逻辑条件返回false，则执行else内的语句2。7.1JavaScript基础语法7.1.4

流程控制多向选择有多条选择语句，进行多条判断，根据判断结构执行相应的语句，其语法格式如下所示。if语句3.多向选择if（逻辑条件1）{语句1;}elseif（逻辑条件2）{语句2;}在多向选择的语法格式中，如果if语句的逻辑条件1返回true，则执行语句1,。如果if语句的逻辑条件1返回false，则执行elseif中的逻辑条件2，如果逻辑条件2返回true，则执行语句2。以此类推，如果上面的所有逻辑条件都返回false，则执行else内的语句n。......else{语句n;}7.1JavaScript基础语法7.1.4

流程控制for循环是循环结构中常见的语句，同时也是使用最为广泛的循环语句，能够反复执行一段代码，提高代码的复用率，其语法格式如下所示。for循环for（初始化语句;循环条件;控制条件）{循环体语句;}在上述语法格式中，for循环先执行初始化语句，再判断循环条件，如果循环条件返回true，则执行循环体语句，否则直接退出循环，然后执行迭代语句，改变循环变量的值，完成1次循环。接着又进入下一次循环，直到循环条件返回false，结束循环。7.1JavaScript基础语法7.1.4流程控制break语句用于跳出整体循环，停止后续循环操作。用break语句计算出1~10之间，截止到能被7整除的整数，之前所有整数的和。具体代码如下。break语句

演示说明<body><script>vars=0;

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

if(i%7==0){//判断条件为能被7整除

break;//终止当前循环，顺序执行循环后面的语句}

s+=i;//循环累加console.log("本次循环数值为"+i);//依次列出执行哪一个循环}console.log(s);//计算整数的和</script></body>主体代码

例7.17.1JavaScript基础语法7.1.4流程控制break语句用于跳出整体循环，停止后续循环操作。用break语句计算出1~10之间，截止到能被7整除的整数，之前所有整数的和。运行效果如下。break语句

演示说明7.1JavaScript基础语法7.1.4流程控制continue语句与break语句类似，但continue语句只跳出本次循环，不影响后续循环。计算出1~10之间所有不能被7整除的整数的和。具体代码如下所示。continue语句

演示说明<body><script>vars=0;

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

if(i%7==0){//判断条件为能被7整除continue;//跳出本次循环，进入下一次循环}

s+=i;//循环累加console.log("本次循环数值为"+i);//依次列出执行哪一个循环}console.log(s);//计算整数的和</script></body>主体代码

例7.27.1JavaScript基础语法7.1.4流程控制continue语句与break语句类似，但continue语句只跳出本次循环，不影响后续循环。计算出1~10之间所有不能被7整除的整数的和。运行效果如下。continue语句

演示说明由以上2个示例可知，相似的循环体系，break语句和continue语句的不同运用，会达到不同的效果，break语句可用于终止后面不必要的循环，continue语句可用于筛选出不需要的循环，要根据实际情况进行合理选择，才能达到好的效果。7.1JavaScript基础语法7.1.5

案例-选取图书列表本实例是一个选取图书列表的页面。该页面主要由表格的<table>标签、<th>标签、<tr>标签、<td>标签以及<h3>标题标签构成，选取图书列表的页面结构简图如图所示。<head><title>选取图书列表</title>

<linktype="text/css"rel="stylesheet"href="choose.css"></head><body><h3>选取图书列表</h3><table><thead><tr>

<th><inputtype="checkbox"id="all">(全选)</th><th>书名</th><!--此处省略雷同代码--></tr></thead><tbodyid="main"><tr>

<td><inputtype="checkbox"></td><td>基督山伯爵</td><!--此处省略雷同代码--></tr>

<!--此处省略雷同代码--></tbody></table><scripttype="text/javascript"src="select.js"></script></body>代码实现7.1JavaScript基础语法7.1.5

案例-选取图书列表主体代码

例7.3/*清除页面默认边距*/*{margin:0;padding:0;}/*设置标题*/h3{text-align:center;margin:20pxauto;}/*为表格标题和单元格添加边框*/td,th{

border:1pxsolid#cccccc;}/*设置整个表格*/table{width:600px;height:250px;

text-align:center;/*文本居中对齐*/border:1pxsolid#cccccc;/*添加边框样式*/border-collapse:collapse;/*合并表格*/margin:20pxauto;/*设置外边距*/}代码实现7.1JavaScript基础语法7.1.5

案例-选取图书列表CSS部分代码

例7.3/*设置表格标题*/th{height:40px;background-color:#0099cc;color:white;}/*为表格单元格添加内边距*/td{padding:10px;}/*设置表格行*/tr{background-color:#eee;

cursor:pointer;/*改变鼠标形状*/}/*当鼠标放至表格行上时*/tr:hover{background-color:#CC9999;/*表格行改变背景颜色*/}7.1JavaScript基础语法7.1.5

案例-选取图书列表代码实现在上述CSS代码中，首先为表格的标题和单元格添加边框，再设置整个表格，使用border-collapse属性将表格的边框合并，并使用text-align属性将表格中的文本居中对齐，然后使用CSS属性设计表格样式，最后当鼠标放至表格的每一行时，改变表格行的背景颜色。//1.获取元素varthAll=document.getElementById("all")//获取全选复选框vartrArr=document.querySelectorAll("#maininput")//获取表格主体部分的所有复选框//2.为全选复选框#all添加点击事件thAll.onclick=function(){//3.遍历下面的每一个复选框for(vari=0;i<trArr.length;i++){

trArr[i].checked=this.checked;//this.checked为当前全选复选框的状态}}//4.为每个复选框添加点击事件for(vari=0;i<trArr.length;i++){trArr[i].onclick=function(){//5.点击下面的每一个复选框都要判断是否5个都选中了for(vari=0;i<trArr.length;i++){

//如果下面的复选框没全选中，则上面不选中

if(trArr[i].checked==false){

thAll.checked=false;return}}

//如果下面的复选框全部被选中，则全选复选框也被选中thAll.checked=true;}}代码实现7.1JavaScript基础语法7.1.5

案例-选取图书列表JS代码

例7.37.1JavaScript基础语法7.1.5

案例-选取图书列表代码实现在上述JS代码中，首先为全选复选框添加点击事件，如果它被选中，则其它复选框是被选中的状态；若未被选中，则其它复选框是未被选中状态。然后再给每个复选框绑定事件，在该复选框被点击后，则遍历所有的复选框是否全都被选中或全都未被选中，再把状态赋给全选复选框。本节小结本节内容主要讲解了JavaScript创建对象的4种方式，JavaScript函数，通过DOM操作获取元素节点，JavaScript的流程控制语句。通过本节的学习，希望读者可以掌握JavaScript的基础语法，为后面学习JavaScript语言奠定基础。7.2DOM基础操作DOM操作文本内容案例—点击按钮切换图片DOM的增删改换DOM节点DOM操作样式DOM操作属性7.2DOM基础操作DOM（DocumentObjectModel，文档对象模型）是JavaScript操作网页的接口。它的作用是将网页转为JavaScript对象，从而可以用脚本进行各种操作，如对内容进行增加或删除。浏览器会根据DOM模型，将结构化文档(如HTML和XML)解析成一系列的节点，然后将节点组成一个树状结构（DOMTee）。所有的节点和最终的树状结构，都有规范的对外接口。因此，DOM可以理解成网页的编程接口。7.2DOM基础操作在JavaScript中，需要通过DOM的操作才能在网页上显示文本内容。innerHTML方法可获取或修改指定标签的信息，包括标签本身和标签的文本内容等信息。通过<divclass="box"><p>这是标题</p></div>这个例子，其具体用法如下所示。7.2.1

DOM操作文本内容innerHTMLbox.innerHTML='<h1>这是标题</h1>';7.2DOM基础操作innerText方法只获取或修改指定标签内的具体信息，不包括包括标签本身。通过<divclass="box"><p>这是标题</p></div>这个例子，其具体用法如下所示。7.2.1

DOM操作文本内容innerTextbox.innerText='标题';innerHTML和innerText的使用范围如图所示。7.2DOM基础操作HTML文档中的所有内容都是节点，在DOM节点中，不同的节点对应的节点类型可能不一样，主要有元素节点、属性节点、文本节点、注释节点、文档节点等节点类型。整个文档是一个文档节点，每个HTML元素是元素节点，HTML元素内的文本是文本节点，每个HTML属性是属性节点，注释是注释节点。这些不同的节点类型，返回的常数值是不一样的。7.2.2

DOM节点节点类型7.2DOM基础操作7.2.2DOM节点在DOM中，通过nodeType属性返回节点类型的常数值，nodeName属性返回节点名称，nodeValue属性返回节点文本值，节点类型的对应值如表所示。节点类型对应值节点类型nodeTypenodeNamenodeValue元素节点1大写的HTML元素名Undefined或null属性节点2元素属性名属性值文本节点3#text#text的文本值注释节点8#comment#comment的文本值文档节点9#documentnull<body><divid="box"

title="一个box盒子">

<p>一个标题</p></div></body>演示说明7.2DOM基础操作7.2.2DOM节点主体代码

例7.4<script>

varbox1=document.getElementById("box");console.log("元素节点的nodeType:"+box1.nodeType)console.log("元素节点的nodeName:"+box1.nodeName)console.log("元素节点的nodeValue:"+box1.nodeValue)

varatt=box1.getAttributeNode("title");console.log("属性节点的nodeType:"+att.nodeType)console.log("属性节点的nodeName:"+att.nodeName)console.log("属性节点的nodeValue:"+att.nodeValue)

vartxt=box1.firstChild;console.log("文本节点的nodeType:"+txt.nodeType)console.log("文本节点的nodeName:"+txt.nodeName)console.log("文本节点的nodeValue:"+txt.nodeValue)</script>利用一个小案例说明nodeType属性、nodeName属性和nodeValue属性的使用。具体代码如下。演示说明7.2DOM基础操作7.2.2DOM节点利用一个小案例说明nodeType属性、nodeName属性和nodeValue属性的使用。运行结果如下。7.2DOM基础操作在DOM中，可以将HTML文档描绘成一个由多层节点构成的结构，而其中的节点关系类似于传统的家族关系，可分为父节点、子节点和兄弟节点。例如，在<html>元素中内嵌了<head>与<body>元素，因此，<html>元素为<head>和<body>元素的父节点，<head>和<body>元素为<html>元素的子节点，又因为<head>与<body>元素拥有共同的父元素节点，所以它们彼此间互为兄弟节点。7.2.2

DOM节点节点关系7.2DOM基础操作父节点、子节点和兄弟节点的具体说明，以及获取节点的方法如表所示。7.2.2

DOM节点节点关系节点分类说明获取节点方法父节点parentNode父节点元素的父节点var父节点=节点对象.parentNode子节点firstChild第一个子节点指向在子节点列表中的第一个节点。包含元素节点、文本节点、注释节点var第一个子节点=父节点.firstChildfirstElementChild第一个子节点指向在子节点列表中的第一个节点。只包含元素节点var第一个子节点=父节点.firstElementChildlastChild最后一个子节点指向在子节点列表中的最后一个节点。包含元素节点、文本节点、注释节点var最后一个子节点=父节点.lastChildlastElementChild最后一个子节点指向在子节点列表中的最后一个节点。只包含元素节点var最后一个子节点=父节点.lastElementChildchildNodes所有子节点所有子节点的列表var伪数组=父节点.childNodes7.2DOM基础操作续表。7.2.2

DOM节点节点关系节点分类说明获取节点方法兄弟节点previousSibling上一个兄弟节点指向前一个兄弟节点,如果这个节点就是第一个,那么该值为null。包含元素节点、文本节点、注释节点var上一个兄弟节点=节点对象.previousSiblingpreviousElementSibling上一个兄弟节点指向前一个兄弟节点,如果这个节点就是第一个,那么该值为null。只包含元素节点var上一个兄弟节点=节点对象.previousElementSiblingnextSibling下一个兄弟节点指向后一个兄弟节点,如果这个节点就是最后一个,那么该值为null。包含元素节点、文本节点、注释节点var下一个兄弟节点=节点对象.nextSiblingnextElementSibling下一个兄弟节点指向后一个兄弟节点,如果这个节点就是最后一个,那么该值为null。只包含元素节点var下一个兄弟节点=节点对象.nextElementSibling7.2DOM基础操作7.2.3

DOM的增删改换创建节点在DOM中，createElement()方法通过传入指定的一个标签名可创建一个元素节点。如果传入的标签名是一个未知的，则会创建一个自定义的标签。

创建节点的语法格式如下所示。document.createElement("标签名")创建好一个元素节点之后，其实并没有把创建好的标签元素添加到网页中，需要配合添加节点的方法一同使用，才能在网页中显示新创建的标签元素。7.2DOM基础操作7.2.3

DOM的增删改换添加节点当前节点.appendChild(插入的节点);1.appendChild()方法appendChild()方法向当前节点的子节点列表的末尾添加新的子节点，其语法格式如下所示。7.2DOM基础操作7.2.3

DOM的增删改换添加节点1.appendChild()方法<ulid="list"><li>已有的列表项</li></ul>主体代码

例7.5<script>varlist=document.getElementById("list");//通过ID名获取当前节点

varli=document.createElement("li");//创建新的节点li.innerHTML="新添加的列表项1";//为新节点添加内容list.appendChild(li);//使用appendChild()方法在网页上添加新节点</script>演示说明。在已有的无序列表中使用appendChild()方法添加一个新的项目列表。具体代码如下。7.2DOM基础操作7.2.3

DOM的增删改换添加节点1.appendChild()方法演示说明。在已有的无序列表中使用appendChild()方法添加一个新的项目列表。运行结果如下。7.2DOM基础操作7.2.3

DOM的增删改换添加节点1.appendChild()方法在appendChild()方法中，由于可将新的子节点添加到当前子节点末尾，通过对原有节点进行appendChild()方法的操作，可对其进行“剪切”操作。即在appendChild()方法中传入当前节点中的某一个子节点，可将该子节点移动到末尾位置，便可其改变位置，实现“剪切”效果。7.2DOM基础操作7.2.3

DOM的增删改换添加节点当前节点.insertBefore(新添加的子节点,子节点);2.insertBefore()方法insertBefore()方法是在当前节点前添加一个新的子节点，可以接收2个参数，第1个参数是新添加的节点，第2个参数是当前节点的一个子节点。根据传入的第2个参数不同，新添加的子节点所处的位置也会不同。insertBefore()语法格式如下所示。7.2DOM基础操作7.2.3

DOM的增删改换添加节点2.insertBefore()方法<ulid="list"><li>已有的列表项1</li><li>已有的列表项2</li></ul>主体代码

例7.6<script>varlist=document.getElementById("list");//通过ID名获取当前节点varli=list.getElementsByTagName("li")//通过标签名获取当前节点的一个子节点

varli2=document.createElement("li");//创建新的节点li2.innerHTML="新添加的列表项2";//为新节点添加内容list.insertBefore(li2,li[1]);//使用insertBefore()方法在网页上添加新节点</script>演示说明，在已有的无序列表中使用insertBefore()方法添加一个新的项目列表。具体代码如下。7.2DOM基础操作7.2.3

DOM的增删改换添加节点2.insertBefore()方法演示说明，在已有的无序列表中使用insertBefore()方法添加一个新的项目列表。运行效果如下。在insertBefore()方法中，由于传入的第2个参数是列表项中的第2个列表项子节点，新添加的子节点在第2个列表项节点的前面，所以insertBefore()方法可以将新的子节点添加到指定位置。7.2DOM基础操作7.2.3

DOM的增删改换删除节点removeChild()方法用于删除指定的节点，其语法格式如下所示。当前节点.removeChild(删除的子节点);在例7.6的代码中的“list.insertBefore(li2,li[1]);”代码后，加入removeChild()方法删除指定节点，即加入“list.removeChild(li[0])”这1行代码，可删除列表项中的第1个子节点，“已有的列表项1”便被删除。7.2DOM基础操作7.2.3

DOM的增删改换替换节点当前节点.replaceChild(要替换的新节点,被替换的旧节点);replaceChild()方法用于将某个子节点替换为另一个新的子节点，可以接收2个参数，第1个参数是要替换的新子节点，第2个参数是被替换的旧子节点。replaceChild()方法的语法格式如下所示。7.2DOM基础操作7.2.3

DOM的增删改换替换节点varp1=document.createElement("p");//创建要替换的新节点p1.innerHTML="新创建的文字";//为要替换的新节点添加内容list.replaceChild(p1,li[2]);//使用replaceChild()方法在网页上替换节点replaceChild()方法替换节点的示例代码如下所示。7.2DOM基础操作7.2.3

DOM的增删改换克隆节点要克隆的节点.cloneNode(布尔值);cloneNode()方法用于克隆指定的节点，接收的参数为布尔值true或false。cloneNode()方法的语法格式如下所示。通过cloneNode()方法可对节点进行“复制”操作，cloneNode()方法克隆节点的示例代码如下所示。varclone1=p1.cloneNode(true);//使用cloneNode()方法克隆一个节点list.appendChild(clone1);//使用appendChild()方法在网页上显示新拼接的节点7.2DOM基础操作在JavaScript中，DOM操作属性通常包括getAttributeNode()方法获取属性、getAttribute()方法获取属性值、setAttribute()方法设置属性和removeAttribute()方法删除属性，这4种方法的具体说明如表所示。7.2.4

DOM操作属性方法说明getAttributeNode("属性名")获取元素节点中指定的属性。例btn[0].getAttributeNode("title")getAttribute("属性名")获取元素节点中指定属性的属性值，如果属性节点不存在，则返回null。例btn[1].getAttribute("title")setAttribute("属性名","属性值")创建或修改元素节点的属性，如果属性节点不存在，则创建该属性；如果属性节点存在，则修改该属性的值。例btn[2].setAttribute("class","current")removeAttribute("属性名")删除元素中指定属性。例btn[3].removeAttribute("class")7.2DOM基础操作7.2.5

DOM操作样式行内样式在JavaScript中，可通过DOM操作行内样式，即控制HTML元素的style属性，从而设置或修改元素样式。其语法格式如下所示。元素.style.css属性名="属性值";例p1style.backgroundColor="blue";值得注意的是，在JavaScript中，CSS属性带有“-”的，一律按照驼峰规则进行书写。7.2DOM基础操作7.2.5

DOM操作样式cssText属性在style属性下操作多组样式，需要一行一行设置，操作起来比较繁琐。DOM提供了cssText属性，可用来一次性设置多组CSS样式。cssText属性的语法格式如下所示。元素.style.cssText="CSS属性名1:属性值1;......";例p1style.cssText="color:red;font-size:16px";使用cssText属性可以在JavaScript中直接设置或修改同一个元素的样式，相当于直接引入<style>标签内的样式，不需要按照驼峰规则进行书写。7.2DOM基础操作7.2.6案例-点击按钮切换图片本实例是一个点击按钮切换图片的页面。该页面主要由<div>块元素、<ul>无序列表、<p>段落标签、<img>图像标签以及<span>内联元素构成。页面结构简图如图所示。<head><metacharset="UTF-8"><title>点击按钮切换图片</title>

<linktype="text/css"rel="stylesheet"href="turn.css"></head><body><divclass="box"><!--导航栏--><ul><liclass="current">小猫</li><li>小狗</li><li>小熊</li><li>小兔</li><li>小猪</li></ul><!--图片显示块--><pclass="current"><span>调皮的小猫</span><imgsrc="../image/14.jpg"alt=""></p><p><span>活泼的小狗</span><imgsrc="../image/15.jpg"alt=""></p><p><span>友爱的小熊</span><imgsrc="../image/19.jpg"alt=""></p><p><span>可爱的小兔</span><imgsrc="../image/18.jpg"alt=""></p><p><span>呆萌的小猪</span><imgsrc="../image/20.jpg"alt=""></p></div><scripttype="text/javascript"src="change.js"></script></body>代码实现7.2DOM基础操作7.2.6案例-点击按钮切换图片主体代码

例7.7/*设置导航栏*/.box>ul{list-style:none;/*取消项目列表标记*/width:500px;height:65px;}/*设置导航栏中的项目列表*/.box>ul>li{float:left;/*设置左浮动*/width:100px;

height:60px;line-height:60px;/*设置行高，使其居中*/color:white;font-size:24px;text-align:center;background-color:#99cccc;

cursor:pointer;/*改变鼠标形状*/}/*设置图片显示块*/.boxp{

display:none;/*隐藏元素*/width:500px;height:490px;border:1pxsolid#ccc;}代码实现7.2DOM基础操作7.2.6案例-点击按钮切换图片CSS部分代码

例7.7/*设置图片显示块中的标题*/.boxspan{

display:block;/*转化为块级元素*/width:500px;height:40px;background-color:#f6f6f6;text-align:center;font-size:24px;}/*设置图片*/img{width:500px;height:450px;}/*点击时的当前图片显示块*/p.current{display:block;/*显示元素*/}/*点击时的当前导航块*/ul>li.current{background-color:#EEE8AA;}7.2DOM基础操作7.2.6案例-点击按钮切换图片代码实现在上述CSS代码中，首先取消无序列表的项目列表标记，将导航栏中的项目列表设置向左浮动，再隐藏图片显示块，然后设置图片显示块中的标题，将<span>内联内联元素转化成块级元素，最后点击导航栏中的按钮时，通过关联元素的class名称改变元素样式。//1.获取元素liArr和pArrvarliArr=document.getElementsByTagName("li");varpArr=document.getElementsByTagName("p");//2.为每一个li绑定一个index属性for(vari=0;i<liArr.length;i++){

liArr[i].index=i;//3.为liArr添加鼠标点击事件liArr[i].onclick=function(){//4.事件驱动函数中，利用排他思想，实现li点亮盒子//通过for循环清空所有li标签和p标签的class类样式for(vari=0;i<liArr.length;i++){

//清空所有li的类样式liArr[i].removeAttribute("class");//清空所有p的类样式pArr[i].removeAttribute("class");}

//再创建当前li的class类样式this.setAttribute("class","current");//再创建当前p的class类样式pArr[this.index].setAttribute("class","current");}}代码实现7.2DOM基础操作7.2.6案例-点击按钮切换图片JS代码

例7.77.2DOM基础操作7.2.6案例-点击按钮切换图片代码实现在上述JS代码中，首先通过DOM操作获取元素节点，再为项目列表按钮添加点击事件，然后在事件驱动函数中，利用排他思想，将<li>标签和<p>标签的class类样式先清空再重新创建，进行排他思想的切换，实现点击按钮可切换图片。本节小结本节内容主要讲解了DOM使用innerHTML和innerText这2种方法操作文本内容，DOM节点的相关内容，DOM对节点进行创建、添加、删除、替换、克隆等操作，DOM通过使用getAttributeNode()、getAttribute()、setAttribute()、removeAttribute()等方法操作属性，以及通过DOM操作元素样式。通过本节的学习，希望读者能够掌握DOM的一些基础操作方法。7.3实现定时器定时器案例—跨年倒计时Date时间对象7.3

实现定时器7.3.1

定时器window对象表示一个浏览器窗口或一个框架。在客户端JavaScript中，window对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写document，而不必写window.document。一般来说，window对象的方法都是对浏览器窗口或框架进行某种操作。在JavaScript中，BOM的window对象有2种设置定时器的方法，即设置连续定时器和延迟定时器，主要由window.setInterval()和window.setTimeout()2个函数实现，它们负责向任务队列添加定时任务。由于window对象是全局对象，可以省略window前缀。7.3实现定时器7.3.1定时器连续定时器setInterval()函数可设置连续的定时器，在指定的毫秒数后执行指定的代码，即通过设定一个时间间隔，每隔一段时间去执行JavaScript的操作。setInterval()函数的语法格式如下所示。setInterval(code,millisec);在上述语法中，setInterval()函数接收2个参数，第1个参数code表示要调用的函数或要执行的JavaScript代码串，第2个参数millisec表示周期性执行或调用code之间的时间间隔，单位为毫秒（ms）。7.3实现定时器7.3.1定时器连续定时器在JavaScript中，可通过clearInterval()函数清除setInterval设定的定时器，即把要清除的定时器赋值给一个变量，调用clearInterval()函数执行清除对应定时器的操作。清理定时器不仅可以暂停该定时器，还可以释放内存，清除对后续代码的影响。clearInterval(定时器对象);清除setIntervalclearInterval()函数清除定时器的语法格式如下所示。7.3实现定时器7.3.1定时器制作一个连续的定时器，每隔1秒依次输出文字，当数值为5时，停止定时器。具体代码如下所示。连续定时器

演示说明<body><script>vari=0;vartimer1=setInterval(show,1000);//每隔1秒调用1次定时器中的函数functionshow(){i++;console.log("快乐学习"+i);

if(i==5){//当i=5时，清除定时器clearInterval(timer1);}

}</script></body>主体代码

例7.87.3实现定时器7.3.1定时器制作一个连续的定时器，每隔1秒依次输出文字，当数值为5时，停止定时器。运行结果如下所示。连续定时器

演示说明7.3实现定时器7.3.1定时器延迟定时器setTimeout()函数可设置延迟的定时器，按照指定的周期（以毫秒计）来调用函数或计算表达。setTimeout()函数只执行代码一次，如果要多次调用，需使用setInterval()函数或者让代码自身再次调用setTimeout()函数。setTimeout()函数的语法格式如下所示。setTimeout(code,millisec);在上述语法中，setTimeout()函数接收2个参数，第1个参数code表示要调用的函数或要执行的JavaScript代码串，第2个参数millisec表示在执行代码前需等待的毫秒数。7.3实现定时器7.3.1定时器延迟定时器在JavaScript中，可通过clearTimeout()函数清除setTimeout设定的定时器，即把要清除的定时器赋值给一个变量，调用clearTimeout()函数执行清除对应定时器的操作。clearTimeout()函数与clearInterval()函数用法类似，但延时定时器只执行一次，一般清除定时器会在延迟没有执行时去调用，从而不执行延时定时器内的代码。setTimeout(定时器对象);清除setTimeoutsetTimeout()函数清除定时器的语法格式如下所示。7.3实现定时器7.3.1定时器制作一个延时的定时器，1秒之后调用1次定时器中的函数，并在调用的函数中使用clearTimeout()清除定时器，释放内存。具体代码如下所示。延迟定时器

演示说明<body><script>

vartimer2=setTimeout(show,1000);//1秒之后调用1次定时器中的函数functionshow(){console.log("快乐学习");

clearTimeout(timer2);//清除定时器}</script></body>主体代码

例7.97.3实现定时器7.3.1定时器制作一个延时的定时器，1秒之后调用1次定时器中的函数，并在调用的函数中使用clearTimeout()清除定时器，释放内存。运行结果如下所示。延迟定时器

演示说明7.3实现定时器7.3.1定时器定时器的总结setInterval()函数主要用来实现周期性执行代码，而setTimeout()函数主要用来延迟代码执行。这2种函数方法都可以设计周期性动作，其中setInterval()函数适合定时执行某个动作，而setTimeout()函数适合不定时执行某个动作。setInterval()函数不受任务队列的限制，会简单地每隔一定时间重复执行一次动作，如果前面的任务还没有执行完毕，setInterval函数可能会插队以便按时执行动作。而setTimeout()函数不会间隔固定时间执行一次动作，它受JavaScript任务队列的影响，只有前面没有任务时，才会按时延迟执行动作。7.3

实现定时器7.3.2

Date时间对象在日常生活中，浏览网页时经常会看到一些与时间有关的网页效果，如日历、倒计时、时间变化等。这些与时间相关的效果都需要利用JavaScript中的Date对象来完成。Date对象用于处理日期与时间。创建一个新Date对象的唯一方法是通过new操作符，如vardate=newDate()，若将它作为常规函数调用（即不加new操作符），将返回一个字符串，而非Date对象。7.3

实现定时器7.3.2

Date时间对象创建Date对象的语法格式如下所示。创建Date对象newDate();//默认获取当前时间例vardate=newDate();创建Date对象默认获取当前时间，结果如图所示。7.3

实现定时器7.3.2

Date时间对象创建特定的Date对象有3种方式，其语法格式如下所示。创建Date对象newDate(value);//参数为一个Unix时间戳，即一个毫秒数，是一个整数值newDate(dateString);//参数为日期字符串newDate(year,monthIndex[,day[,hours[,minutes[,seconds[,milliseconds]]]]]);//参数为多个时间整数Unix时间戳（UnixTimeStamp）是一个整数值，表示自1970年1月1日00:00:00UTC（theUnixepoch）以来的毫秒数，忽略了闰秒。值得注意的是，大多数Unix时间戳功能仅精确到最接近的秒，UNIX时间戳以秒为单位，而JavaScript日期以毫秒为单位。7.3

实现定时器7.3.2

Date时间对象时间参数的具体说明如表所示。创建Date对象时间参数说明year表示年份的整数值，0到99会被映射至1900年至1999年，其它值代表实际年份monthIndex表示月份的整数值，从0（1月）到11（12月）day表示一个月中的第几天的整数值，从1到31，默认值为1hours表示一天中的小时数的整数值(24小时制)，从0到23，默认值为0minutes表示一个完整时间（如01:10:00）中的分钟部分的整数值，从0到59，默认值为0seconds表示一个完整时间（如01:10:00）中的秒部分的整数值，从0到59，默认值为0milliseconds表示一个完整时间的毫秒部分的整数值，从0到999，默认值为07.3

实现定时器7.3.2

Date时间对象获取总毫秒值有5种方式，示例代码如下。获取总毫秒值

vardate1=+newDate();vardate2=Date.now();vardate3=newDate().getTime();vardate4=newDate().valueOf();vardate5=Date.parse("2021-12-715:00:00");//获取特定时间的总毫秒数，参数为日期字符串，若日期字符串的格式不正确,则返回NaN7.3

实现定时器7.3.2

Date时间对象结果返回自1970年1月1日00:00:00UTC（theUnixepoch）以来的总毫秒数，获取总毫秒值的示例代码结果如图所示。获取总毫秒值在图中，第1行结果为当前时间参考值，第2-5行结果为自1970年1月1日00:00:00UTC到当前时间参考值的总毫秒数，第6行结果为特定时间的总毫秒值。。7.3

实现定时器7.3.2

Date时间对象特定的时间类型可以通过Date对象的具体方法进行获取或设置，常用的Date对象方法的具体说明如表所示。Date对象方法方法说明getFullYear()获取一个表示年份的四位数字getMonth()从Date对象获取月份(0~11)getDate()从Date对象获取一个月中的某一天(1~31)getDay()从Date对象获取一周中的某一天(0~6，即周日~周六)getHours()获取Date对象的小时(0~23)getMinutes()获取Date对象的分钟(0~59)getSeconds()获取Date对象的秒数(0~59)getMilliseconds()获取Date对象的毫秒(0~999)7.3

实现定时器7.3.2

Date时间对象续表。Date对象方法方法说明getTime()获取1970年1月1日至今的总毫秒数setFullYear()设置Date对象中的年份（四位数字）setMonth()设置Date对象中的月份(0~11)setDate()设置Date对象一个月中的某一天(1~31)setDay()设置Date对象一周中的某一天(0~6，即周日~周六)setHours()设置Date对象的小时(0~23)setMinutes()设置Date对象的分钟(0~59)7.3

实现定时器7.3.3案例-跨年倒计时本实例是一个显示跨年倒计时的页面。该页面主要由<div>块元素、<p>段落标签和<span>内联元素构成。页面结构简图如图所示。<head><metacharset="UTF-8"><title>跨年倒计时</title>

<linktype="text/css"rel="stylesheet"href="spring.css"></head><body><divid="count"><p>2023<br>跨年倒计时</p><spanid="time"></span></div><scripttype="text/javascript"src="time.js"></script></body>代码实现7.3

实现定时器7.3.3案例-跨年倒计时主体代码

例7.10/*设置页面*/#count{width:400px;height:480px;

background-image:url("../image/spring.jpg");/*添加背景图片*/background-size:cover;/*设置背景图尺寸*/margin:20pxauto;

overflow:hidden;/*清除margin外边距塌陷问题*/}/*设置倒计时标题*/p{width:250px;height:120px;line-height:60px;/*设置行高*/text-align:center;/*设置文本居中*/color:#f7e095;/*设置文本颜色*/

font:italicbold40px"微软雅黑";/*设置页面文本样式*/margin:130pxauto40px;/*设置外边距，上左右下*/}代码实现7.3

实现定时器7.3.3案例-跨年倒计时CSS部分代码

例7.10/*设置倒计时*/#time{

display:block;/*span内联元素转化为块级元素*/width:300px;height:80px;line-height:40px;text-align:center;background-color:#b23f2d;/*设置背景颜色*/font-size:25px;color:#fdedb1;

border-radius:15px;/*为元素添加圆角*/margin:0auto;}7.3

实现定时器7.3.3案例-跨年倒计时代码实现在上述CSS代码中，首先为页面添加背景图片，使用background-size属性设置背景图片的尺寸，再使用overflow属性清除外边距塌陷问题。然后设置倒计时的标题，使用font属性设置文本样式，如字体风格、字体粗细、字体大小和字体名称。最后设置倒计时，使用display属性将<span>内联元素转化为块级元素，以及使用border-radius属性为元素添加圆角。//获取倒计时元素spanvart1=document.getElementById("time");//设置定时器setInterval(function(){//定义终点时间varstr='2023/01/2200:00:00';varendDateMS=newDate(str).getTime();//获取终点时间总毫秒值varnowDateMS=newDate().getTime();//获取当前时间总毫秒值varvalue=endDateMS-nowDateMS;//终点时间和当前时间的毫秒值差//计算各个值varyear=parseInt(value/1000/60/60/