HTML5 CSS3 JavaScript第7章ppt课件.pptx

《HTML5 CSS3 JavaScript第7章ppt课件.pptx》由会员分享，可在线阅读，更多相关《HTML5 CSS3 JavaScript第7章ppt课件.pptx（127页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、HTML5 CSS3 JavaScript第7章教学课件第第7章章JavaScriptJavaScript基基础应用用7.1 JavaScript基基础语法法7.2 DOMDOM基础操作7.3 实现定定时器器7.4 使用数数组熟悉JavaScriptJavaScript基基础语法法了解定定时器器的使用掌握DOMDOM基本操作掌握JavaScript的基基础应用用引言JavaScript在网页开发中的应用是十分广泛的，网页中的许多动态功能都可以通过JavaScript来实现，为用户呈现出简洁美观的网页效果，极大地提升了用户的浏览体验感。7.1JavaScriptJavaScript基基础语法法创

2、建对象案例选取图书列表DOM获取元素节点JavaScript函数流程控制7.1 JavaScript基础语法JavaScript是一个无序集合，所有事物都是对象，比如字符串、数值、数组、函数等。每个对象带有属性和方法。对象的属性反映事物的特征，比如年龄、身高等。对象的方法反映事物的行为，比如吃饭、睡觉等。对象有4种创建方式，分别为字面量方式创建对象、new Object()创建对象、工厂函数创建对象和自定义构造函数创建对象。7.1.1 创建对象7.1 JavaScript基础语法7.1.1 创建对象字面量创建对象是一种简便的方式，具体用法如下所示。var student=name:张三,age

3、:15,play:function()console.log(篮球，排球，足球);值得注意的是，以字面量的方式创建对象，属性名和属性值（键值对）之间用冒号（:）进行分隔，而属性与属性之间用逗号（,）进行分隔，最后一个属性末尾不需要逗号。7.1 JavaScript基础语法7.1.1 创建对象new Object()方式创建对象，先通过object构造器new一个对象，再往里丰富成员信息，具体用法如下所示。var student=new Object();student.name=张三;student.age=15;student.play=function()console.log(篮球，排球

4、，足球);字面量和new Object()这2种方式创建的的对象本质上没有任何区别，都是在内存中创建出一个对象，并能够绑定属性和方法。它们的不足之处是，每创建一个对象，属性和方法都需要重新绑定一份，会产生大量重复的代码。7.1 JavaScript基础语法7.1.1 创建对象工厂函数方式创建对象是使用函数来创建对象，类似于一个“工厂模式”，可以大批量地创建同种类型的对象，具体用法如下所示。function createStudent(name,age)var student=new Object();student.name=nane;student.age=age;student.play=

5、function()console.log(篮球，排球，足球);工厂函数方式虽然解决了重复实例化多个对象的问题，同时减少重复代码率，但没有解决对象识别的问题，导致对象类型不明确。return student;var stu1=createStudent(张三,15);var stu2=createStudent(李四,16);stu1.play();7.1 JavaScript基础语法7.1.1 创建对象自定义构造函数方式是通过给构造函数传递不同的参数，然后调用构造函数来创建不同对象，具体用法如下所示。function Student(name,age)this.name=name;this.

6、age=age;任何函数，只要通过new操作符来调用，它就可以作为构造函数；如果不用new操作符来调用，它就是一个普通函数的调用。构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，构造函数要和new操作符一同使用才有意义。构造函数是用于创建一类对象，与普通函数进行区分，首字母需要大写。this.play=function()console.log(篮球，排球，足球);var stu1=createStudent(张三,15);7.1 JavaScript基础语法7.1.1 创建对象new操作符的4个作用说明如下。开辟内存空间，存储新创建的对象。new操作符会让this指向

7、这个新的对象执行构造函数为新对象添加属性和方法new操作符会返回新创建的对象。7.1 JavaScript基础语法7.1.1 创建对象构造函数中this的4个特点说明如下。在定义函数的时候this是不确定的，只有在调用的时候才能明确其指向。一般函数直接执行，内部this指向全局window对象。函数作为一个对象的方法，被该对象所调用，那么this指向的是该对象。构造函数中的this其实是一个隐式对象，类似一个初始化的模型，所有方法和属性都挂载到了这个隐式对象身上，后续通过new操作符来调用，从而实现实例化对象的使用。7.1 JavaScript基础语法7.1.2 JavaScript函数函数是

8、指一组针对处理某一逻辑的代码集合，当被调用时可以重复执行，是计算机编程中非常重要的语法结构。function 函数名(参数1,参数2,.)函数体 /定义函数函数名(参数1,参数2,.)/调用函数语法格式定义函数的基本语法格式如下所示。7.1 JavaScript基础语法7.1.2 JavaScript函数在函数的基本语法中，function为固定语法格式，函数名为自定义字符，中间用空格隔开。小括号与大括号也为固定写法，小括号中的是参数，大括号中的是函数体，即一个代码集合，用于实现函数功能的语句。通常，在函数中可以不添加参数，也可以添加多个参数，一个函数最多可以有255个参数。在定义函数中添加的

9、参数称为形式参数，简称形参；而在调用函数中添加的参数称为实际参数，简称实参。当函数调用时，即是实参赋值给形参的过程。7.1 JavaScript基础语法在JavaScript中，DOM获取元素节点的方法有6种，分别为通过ID获取元素（getElementById）、通过name属性获取元素（getElementsByName）、通过标签名获取元素（getElementsByTagName）、通过类名获取元素（getElementsByClassName）、通过选择器获取一个元素（querySelector）、通过选择器获取一组元素（querySelectorAll），接下来将具体介绍这6种方法

10、。7.1.3 DOM获取元素节点7.1 JavaScript基础语法7.1.3 DOM获取元素节点通过元素的ID名，使用getElementById()方法可以获取指定元素，具体用法如下所示。通过ID获取元素（getElementById）document.getElementById(ID名)例 var box=document.getElementById(main)7.1 JavaScript基础语法7.1.3 DOM获取元素节点通过元素的name属性，使用getElementsByName()方法可以获取指定元素数组，具体用法如下所示。通过name属性获取元素（getElementsB

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

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

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

14、document.querySelectorAll(.info)除了上述获取元素的6种方法，DOM还有获取html和body的方法。7.1 JavaScript基础语法7.1.3 DOM获取元素节点DOM获取HTML元素的具体用法如下所示。DOM获取HTML元素（documentElement）document.documentElement例 var h1=document.documentElement7.1 JavaScript基础语法7.1.3 DOM获取元素节点DOM获取body元素的具体用法如下所示。DOM获取body元素document.body例 var b1=document

15、.body7.1 JavaScript基础语法JavaScript中的流程控制语句与其他语言相似，一般可分为顺序结构、选择结构和循环结构3种。顺序结构是程序从上到下、从左到右依次执行。选择结构是按照给定的逻辑条件决定执行顺序，比如if语句和switch语句。循环结构是根据代码的逻辑条件来判断是否重复执行某一段程序，比如for循环、while循环和do.while循环。7.1.4 流程控制7.1 JavaScript基础语法7.1.4 流程控制单向选择只有1条选择语句，符合条件即选择，不符合条件即不选择，其语法格式如下所示。if语句1.单向选择if语句是选择结构中运用最广泛的语句，一般可分为单向

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

17、程控制多向选择有多条选择语句，进行多条判断，根据判断结构执行相应的语句，其语法格式如下所示。if语句3.多向选择if（逻辑条件1）语句1;else if（逻辑条件2）语句2;在多向选择的语法格式中，如果if语句的逻辑条件1返回true，则执行语句1,。如果if语句的逻辑条件1返回false，则执行else if中的逻辑条件2，如果逻辑条件2返回true，则执行语句2。以此类推，如果上面的所有逻辑条件都返回false，则执行else内的语句n。.else语句n;7.1 JavaScript基础语法7.1.4 流程控制for循环是循环结构中常见的语句，同时也是使用最为广泛的循环语句，能够反复执行一

18、段代码，提高代码的复用率，其语法格式如下所示。for循环for（初始化语句;循环条件;控制条件）循环体语句;在上述语法格式中，for循环先执行初始化语句，再判断循环条件，如果循环条件返回true，则执行循环体语句，否则直接退出循环，然后执行迭代语句，改变循环变量的值，完成1次循环。接着又进入下一次循环，直到循环条件返回false，结束循环。7.1 JavaScript基础语法7.1.4 流程控制break语句用于跳出整体循环，停止后续循环操作。用break语句计算出110之间，截止到能被7整除的整数，之前所有整数的和。具体代码如下。break语句 演示说明vars=0;for(vari=1;i

19、10;i+)for(vari=1;i10;i+)if(i%7=0)/if(i%7=0)/判断条件判断条件为能被能被7 7整除整除break;/break;/终止当前循止当前循环，顺序序执行循行循环后面的后面的语句句s+=i;/s+=i;/循循环累加累加console.log(本次循环数值为+i);/依次列出执行哪一个循环console.log(s);/计算整数的和主体代码 例7.17.1 JavaScript基础语法7.1.4 流程控制break语句用于跳出整体循环，停止后续循环操作。用break语句计算出110之间，截止到能被7整除的整数，之前所有整数的和。运行效果如下。break语句 演示

20、说明7.1 JavaScript基础语法7.1.4 流程控制continue语句与break语句类似，但continue语句只跳出本次循环，不影响后续循环。计算出110之间所有不能被7整除的整数的和。具体代码如下所示。continue语句 演示说明vars=0;for(vari=1;i10;i+)for(vari=1;i10;i+)if(i%7=0)/if(i%7=0)/判断条件判断条件为能被能被7 7整除整除continue;/continue;/跳出本次循跳出本次循环，进入下一次循入下一次循环s+=i;/s+=i;/循循环累加累加console.log(本次循环数值为+i);/依次列出执行

21、哪一个循环console.log(s);/计算整数的和主体代码 例7.27.1 JavaScript基础语法7.1.4 流程控制continue语句与break语句类似，但continue语句只跳出本次循环，不影响后续循环。计算出110之间所有不能被7整除的整数的和。运行效果如下。continue语句 演示说明由以上2个示例可知，相似的循环体系，break语句和continue语句的不同运用，会达到不同的效果，break语句可用于终止后面不必要的循环，continue语句可用于筛选出不需要的循环，要根据实际情况进行合理选择，才能达到好的效果。7.1 JavaScript基础语法7.1.5 案例

22、-选取图书列表本实例是一个选取图书列表的页面。该页面主要由表格的标签、标签、标签、标签以及标题标签构成，选取图书列表的页面结构简图如图所示。选取图书列表选取图书列表(全全选)书名基督山伯爵 代码实现7.1 JavaScript基础语法7.1.5 案例-选取图书列表主体代码 例7.3/*清除页面默认边距*/*margin:0;padding:0;/*设置标题*/h3text-align:center;margin:20pxauto;/*为表格标题和单元格添加边框*/td,thborder:1pxsolid#cccccc;border:1pxsolid#cccccc;/*设置整个表格*/table

23、width:600px;height:250px;text-align:center;/*text-align:center;/*文本居中文本居中对齐*/*/border:1pxsolid#cccccc;/*border:1pxsolid#cccccc;/*添加添加边框框样式式*/*/border-collapse:collapse;/*border-collapse:collapse;/*合并表格合并表格*/*/margin:20pxauto;/*margin:20pxauto;/*设置外置外边距距*/*/代码实现7.1 JavaScript基础语法7.1.5 案例-选取图书列表CSS部分代

24、码 例7.3/*设置表格标题*/thheight:40px;background-color:#0099cc;color:white;/*为表格单元格添加内边距*/tdpadding:10px;/*设置表格行*/trbackground-color:#eee;cursor:pointer;/*cursor:pointer;/*改改变鼠鼠标形状形状*/*/*当鼠标放至表格行上时*/tr:hoverbackground-color:#CC9999;/*表格行改变背景颜色*/7.1 JavaScript基础语法7.1.5 案例-选取图书列表代码实现在上述CSS代码中，首先为表格的标题和单元格添加边框

25、，再设置整个表格，使用border-collapse属性将表格的边框合并，并使用text-align属性将表格中的文本居中对齐，然后使用CSS属性设计表格样式，最后当鼠标放至表格的每一行时，改变表格行的背景颜色。/1.获取元素varthAll=document.getElementById(all)/varthAll=document.getElementById(all)/获取全取全选复复选框框vartrArr=document.querySelectorAll(#maininput)/vartrArr=document.querySelectorAll(#maininput)/获取表格主体

26、部分的所有复取表格主体部分的所有复选框框/2.为全选复选框#all添加点击事件thAll.onclick=function()thAll.onclick=function()/3.遍历下面的每一个复选框for(vari=0;itrArr.length;i+)trArri.checked=this.checked;/this.checkedtrArri.checked=this.checked;/this.checked为当前全当前全选复复选框的状框的状态/4.为每个复选框添加点击事件for(vari=0;itrArr.length;i+)for(vari=0;itrArr.length;i+)

27、trArri.onclick=function()trArri.onclick=function()/5.点击下面的每一个复选框都要判断是否5个都选中了for(vari=0;itrArr.length;i+)/如果下面的复如果下面的复选框没全框没全选中，中，则上面不上面不选中中if(trArri.checked=false)if(trArri.checked=false)thAll.checked=false;thAll.checked=false;return/如果下面的复如果下面的复选框全部被框全部被选中，中，则全全选复复选框也被框也被选中中thAll.checked=true;thAll

28、.checked=true;代码实现7.1 JavaScript基础语法7.1.5 案例-选取图书列表JS代码 例7.37.1 JavaScript基础语法7.1.5 案例-选取图书列表代码实现在上述JS代码中，首先为全选复选框添加点击事件，如果它被选中，则其它复选框是被选中的状态；若未被选中，则其它复选框是未被选中状态。然后再给每个复选框绑定事件，在该复选框被点击后，则遍历所有的复选框是否全都被选中或全都未被选中，再把状态赋给全选复选框。本节小结本节内容主要讲解了JavaScript创建对象的4种方式，JavaScript函数，通过DOM操作获取元素节点，JavaScript的流程控制语句。

29、通过本节的学习，希望读者可以掌握JavaScript的基础语法，为后面学习JavaScript语言奠定基础。7.2DOMDOM基基础操作操作DOM操作文本内容案例点击按钮切换图片DOM的增删改换DOM节点DOM操作样式DOM操作属性7.2 DOM基础操作DOM（Document Object Model，文档对象模型）是JavaScript操作网页的接口。它的作用是将网页转为JavaScript对象，从而可以用脚本进行各种操作，如对内容进行增加或删除。浏览器会根据DOM模型，将结构化文档(如HTML和XML)解析成一系列的节点，然后将节点组成一个树状结构（DOM Tee）。所有的节点和最终的树

30、状结构，都有规范的对外接口。因此，DOM可以理解成网页的编程接口。7.2 DOM基础操作在JavaScript中，需要通过DOM的操作才能在网页上显示文本内容。innerHTML方法可获取或修改指定标签的信息，包括标签本身和标签的文本内容等信息。通过这是标题这个例子，其具体用法如下所示。7.2.1 DOM操作文本内容innerHTMLbox.innerHTML=这是标题;7.2 DOM基础操作innerText方法只获取或修改指定标签内的具体信息，不包括包括标签本身。通过这是标题这个例子，其具体用法如下所示。7.2.1 DOM操作文本内容innerTextbox.innerText=标题;in

31、nerHTML和innerText的使用范围如图所示。7.2 DOM基础操作HTML文档中的所有内容都是节点，在DOM节点中，不同的节点对应的节点类型可能不一样，主要有元素节点、属性节点、文本节点、注释节点、文档节点等节点类型。整个文档是一个文档节点，每个HTML元素是元素节点，HTML元素内的文本是文本节点，每个HTML属性是属性节点，注释是注释节点。这些不同的节点类型，返回的常数值是不一样的。7.2.2 DOM节点节点类型7.2 DOM基础操作7.2.2 DOM节点在DOM中，通过nodeType属性返回节点类型的常数值，nodeName属性返回节点名称，nodeValue属性返回节点文本

32、值，节点类型的对应值如表所示。节点类型对应值节点点类型型nodeTypenodeTypenodeNamenodeNamenodeValuenodeValue元素节点1大写的HTML元素名Undefined或null属性节点2元素属性名属性值文本节点3#text#text的文本值注释节点8#comment#comment的文本值文档节点9#documentnull一个一个标题演示说明7.2 DOM基础操作7.2.2 DOM节点主体代码 例7.4varbox1=document.getElementById(box);varbox1=document.getElementById(box);con

33、sole.log(元素节点的nodeType:+box1.nodeType)console.log(元素节点的nodeName:+box1.nodeName)console.log(元素节点的nodeValue:+box1.nodeValue)varatt=box1.getAttributeNode(title);varatt=box1.getAttributeNode(title);console.log(属性节点的nodeType:+att.nodeType)console.log(属性节点的nodeName:+att.nodeName)console.log(属性节点的nodeValue

34、:+att.nodeValue)vartxt=box1.firstChild;vartxt=box1.firstChild;console.log(文本节点的nodeType:+txt.nodeType)console.log(文本节点的nodeName:+txt.nodeName)console.log(文本节点的nodeValue:+txt.nodeValue)利用一个小案例说明nodeType属性、nodeName属性和nodeValue属性的使用。具体代码如下。演示说明7.2 DOM基础操作7.2.2 DOM节点利用一个小案例说明nodeType属性、nodeName属性和nodeVa

35、lue属性的使用。运行结果如下。7.2 DOM基础操作在DOM中，可以将HTML文档描绘成一个由多层节点构成的结构，而其中的节点关系类似于传统的家族关系，可分为父节点、子节点和兄弟节点。例如，在元素中内嵌了与元素，因此，元素为和元素的父节点，和元素为元素的子节点，又因为与元素拥有共同的父元素节点，所以它们彼此间互为兄弟节点。7.2.2 DOM节点节点关系7.2 DOM基础操作父节点、子节点和兄弟节点的具体说明，以及获取节点的方法如表所示。7.2.2 DOM节点节点关系节点点分分类说明明获取取节点方法点方法父节点parentNode父节点元素的父节点var 父节点=节点对象.parentNode

36、子节点firstChild第一个子节点指向在子节点列表中的第一个节点。包含元素节点、文本节点、注释节点var 第一个子节点=父节点.firstChildfirstElementChild第一个子节点指向在子节点列表中的第一个节点。只包含元素节点var 第一个子节点=父节点.firstElementChildlastChild最后一个子节点指向在子节点列表中的最后一个节点。包含元素节点、文本节点、注释节点var 最后一个子节点=父节点.lastChildlastElementChild最后一个子节点指向在子节点列表中的最后一个节点。只包含元素节点var 最后一个子节点=父节点.lastEleme

37、ntChildchildNodes所有子节点所有子节点的列表var 伪数组=父节点.childNodes7.2 DOM基础操作续表。7.2.2 DOM节点节点关系节点点分分类说明明获取取节点方法点方法兄弟节点previousSibling上一个兄弟节点指向前一个兄弟节点,如果这个节点就是第一个,那么该值为null。包含元素节点、文本节点、注释节点var 上一个兄弟节点=节点对象.previousSiblingpreviousElementSibling上一个兄弟节点指向前一个兄弟节点,如果这个节点就是第一个,那么该值为null。只包含元素节点var 上一个兄弟节点=节点对象.previousE

38、lementSiblingnextSibling下一个兄弟节点指向后一个兄弟节点,如果这个节点就是最后一个,那么该值为null。包含元素节点、文本节点、注释节点var 下一个兄弟节点=节点对象.nextSiblingnextElementSibling下一个兄弟节点指向后一个兄弟节点,如果这个节点就是最后一个,那么该值为null。只包含元素节点var 下一个兄弟节点=节点对象.nextElementSibling7.2 DOM基础操作7.2.3 DOM的增删改换创建节点在DOM中，createElement()方法通过传入指定的一个标签名可创建一个元素节点。如果传入的标签名是一个未知的，则会创

39、建一个自定义的标签。创建节点的语法格式如下所示。document.createElement(标签名)创建好一个元素节点之后，其实并没有把创建好的标签元素添加到网页中，需要配合添加节点的方法一同使用，才能在网页中显示新创建的标签元素。7.2 DOM基础操作7.2.3 DOM的增删改换添加节点当前节点.appendChild(插入的节点);1.appendChild()方法appendChild()方法向当前节点的子节点列表的末尾添加新的子节点，其语法格式如下所示。7.2 DOM基础操作7.2.3 DOM的增删改换添加节点1.appendChild()方法已有的列表项主体代码 例7.5varli

40、st=document.getElementById(list);/通过ID名获取当前节点varli=document.createElement(li);/varli=document.createElement(li);/创建新的建新的节点点li.innerHTML=li.innerHTML=新添加的列表新添加的列表项1;/1;/为新新节点添加内容点添加内容list.appendChild(li);/list.appendChild(li);/使用使用appendChild()appendChild()方法在网方法在网页上添上添加新加新节点点演示说明。在已有的无序列表中使用appendCh

41、ild()方法添加一个新的项目列表。具体代码如下。7.2 DOM基础操作7.2.3 DOM的增删改换添加节点1.appendChild()方法演示说明。在已有的无序列表中使用appendChild()方法添加一个新的项目列表。运行结果如下。7.2 DOM基础操作7.2.3 DOM的增删改换添加节点1.appendChild()方法在appendChild()方法中，由于可将新的子节点添加到当前子节点末尾，通过对原有节点进行appendChild()方法的操作，可对其进行“剪切”操作。即在appendChild()方法中传入当前节点中的某一个子节点，可将该子节点移动到末尾位置，便可其改变位置，实

42、现“剪切”效果。7.2 DOM基础操作7.2.3 DOM的增删改换添加节点当前节点.insertBefore(新添加的子节点,子节点);2.insertBefore()方法insertBefore()方法是在当前节点前添加一个新的子节点，可以接收2个参数，第1个参数是新添加的节点，第2个参数是当前节点的一个子节点。根据传入的第2个参数不同，新添加的子节点所处的位置也会不同。insertBefore()语法格式如下所示。7.2 DOM基础操作7.2.3 DOM的增删改换添加节点2.insertBefore()方法已有的列表项1已有的列表项2主体代码 例7.6varlist=document.ge

43、tElementById(list);/通过ID名获取当前节点varli=list.getElementsByTagName(li)/通过标签名获取当前节点的一个子节点varli2=document.createElement(li);/varli2=document.createElement(li);/创建新的建新的节点点li2.innerHTML=li2.innerHTML=新添加的列表新添加的列表项2;/2;/为新新节点添加内容点添加内容list.insertBefore(li2,li1);/list.insertBefore(li2,li1);/使用使用insertBefore()i

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

45、增删改换删除节点removeChild()方法用于删除指定的节点，其语法格式如下所示。当前节点.removeChild(删除的子节点);在例7.6的代码中的“list.insertBefore(li2,li1);”代码后，加入removeChild()方法删除指定节点，即加入“list.removeChild(li0)”这1行代码，可删除列表项中的第1个子节点，“已有的列表项1”便被删除。7.2 DOM基础操作7.2.3 DOM的增删改换替换节点当前节点.replaceChild(要替换的新节点,被替换的旧节点);replaceChild()方法用于将某个子节点替换为另一个新的子节点，可以接收

46、2个参数，第1个参数是要替换的新子节点，第2个参数是被替换的旧子节点。replaceChild()方法的语法格式如下所示。7.2 DOM基础操作7.2.3 DOM的增删改换替换节点var p1=document.createElement(p);/创建要替换的新节点p1.innerHTML=新创建的文字;/为要替换的新节点添加内容list.replaceChild(p1,li2);/使用replaceChild()方法在网页上替换节点replaceChild()方法替换节点的示例代码如下所示。7.2 DOM基础操作7.2.3 DOM的增删改换克隆节点要克隆的节点.cloneNode(布尔值);

47、cloneNode()方法用于克隆指定的节点，接收的参数为布尔值true或false。cloneNode()方法的语法格式如下所示。通过cloneNode()方法可对节点进行“复制”操作，cloneNode()方法克隆节点的示例代码如下所示。var clone1=p1.cloneNode(true);/使用cloneNode()方法克隆一个节点list.appendChild(clone1);/使用appendChild()方法在网页上显示新拼接的节点7.2 DOM基础操作在JavaScript中，DOM操作属性通常包括getAttributeNode()方法获取属性、getAttribute

48、()方法获取属性值、setAttribute()方法设置属性和removeAttribute()方法删除属性，这4种方法的具体说明如表所示。7.2.4 DOM操作属性方法方法说明明getAttributeNode(属性名)获取元素节点中指定的属性。例btn0.getAttributeNode(title)getAttribute(属性名)获取元素节点中指定属性的属性值，如果属性节点不存在，则返回null。例btn1.getAttribute(title)setAttribute(属性名,属性值)创建或修改元素节点的属性，如果属性节点不存在，则创建该属性；如果属性节点存在，则修改该属性的值。例b

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

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