《JavaScript与jQuery网页前端开发与设计-第2版》课件 CH05 JavaScript BOM和DOM_第1页
《JavaScript与jQuery网页前端开发与设计-第2版》课件 CH05 JavaScript BOM和DOM_第2页
《JavaScript与jQuery网页前端开发与设计-第2版》课件 CH05 JavaScript BOM和DOM_第3页
《JavaScript与jQuery网页前端开发与设计-第2版》课件 CH05 JavaScript BOM和DOM_第4页
《JavaScript与jQuery网页前端开发与设计-第2版》课件 CH05 JavaScript BOM和DOM_第5页
已阅读5页，还剩60页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

JavaScript与jQuery

网页前端开发与设计-第2版学校名称：XXXX主讲教师：XXXX第5章JavaScript

DOM和BOM本章学习目标 掌握JavaScriptDOM的用法； 掌握JavaScriptBOM的用法。目录5.1文档对象模型DOM5.2浏览器对象模型BOM5.3阶段案例：Nim博弈小游戏5.1

文档对象模型DOM5.1.1查找HTML元素5.1.2DOMHTML5.1.3DOMCSS5.1.4DOM事件5.1.5DOM节点5.1文档对象模型DOM浏览器在加载网页时会创建文档对象模型（DocumentObjectModel，DOM）来确定网页中的元素层次结构，JavaScript可以通过DOM来动态改变HTML元素、属性、CSS样式以及对事件做出响应。5.1.1查找HTML元素在JavaScript中有三种方式可以查找HTML元素：通过HTML元素的id名称查找；通过HTML元素的标签名称查找；通过HTML元素的类名称查找。5.1.1查找HTML元素1.通过id查找HTML元素一般默认不同的HTML元素使用不一样的id名称以示区别，因此通过id名称找到指定的单个元素。在JavaScript中语法如下：document.getElementById("id名称");其中getElementById()方法是遵照驼峰命名法，即第一个单词全小写，后面的每一个单词首字母大写的方式。这种命名方法在JavaScript中比较普遍。如果未找到该元素，则返回值为null；如果找到该元素，则会以对象的形式返回。5.1.1查找HTML元素1.通过id查找HTML元素例如，查找id="test"的元素，并获取该元素内部的文本内容：//根据id名称获取元素对象vartest=document.getElementById("test");//获取元素内容varresult=test.innerHTML;为简便代码阅读效果，使用了与id名称同名的变量test来获取指定元素，该变量名称也可以是其他自定义变量名，不影响运行效果。innerHTML可以用于获取元素内部的HTML代码，关于innerHTML更多用法请参考下一节5.1.2。5.1.1查找HTML元素2.通过标签名查找HTML元素HTML元素均有固定的标签名称，因此通过标签名称可以找到指定的单个或一系列元素。在JavaScript中语法如下：document.getElementsByTagName("标签名称");此时方法中的Elements是复数形式，因为要考虑到有可能存在多个元素符合要求。同样如果未找到符合的元素，则返回值为null；如果有多个符合条件的元素，则返回值是数组的形式。5.1.1查找HTML元素2.通过标签名查找HTML元素例如，查找所有的段落元素<p>，并获取第一个段落标签内部的文本内容：vartest=document.getElementByTagName("p");

varresult=p[0].innerHTML;因为有多个段落标签，因此变量返回值是数组的形式。其中第一个段落标签对应的是p[0]，以此类推，最后一个元素对应的索引号为数组长度减1。5.1.1查找HTML元素3.通过类名查找HTML元素document.getElementsByClassName()方法可用于根据类名称获取HTML元素。在JavaScript中语法如下：document.getElementsByClassName("类名称");此时方法中的Elements是复数形式，因为要考虑到有可能存在多个元素符合要求。同样如果未找到符合的元素，则返回值为null；如果有多个符合条件的元素，则返回值是数组的形式。注：该方法在IE5、6、7、8版本中使用均无效，为考虑各个版本浏览器的兼容性，如果不能保证用户使用IE5、6、7、8版本以外的浏览器则不建议使用此方法来获取HTML元素。5.1.1查找HTML元素【例5-1】JavaScriptDOM查找元素的应用5.1.2DOMHTML1.创建动态的HTML内容2.改变HTML元素内容3.改变HTML元素属性5.1.2DOMHTML1.创建动态的HTML内容在JavaScript中，使用document.write()方法可以往HTML页面动态输出内容。例如：<body><script>document.write("Hello2016");</script></body>上述代码片段表示将在空白页面上动态输出字符串"Hello2016"。需要注意的是，alert()方法中的换行符\n在这里是无效的，如果需要输出换行直接使用HTML换行标签<br>即可。5.1.2DOMHTML1.创建动态的HTML内容【例5-2】JavaScriptDOM动态生成HTML内容

5.1.2DOMHTML2.改变HTML元素内容innerHTML可以用于获取元素内容，也可以改变元素内容。使用innerHTML属性获取或更改的元素内容可以包括HTML标签本身。获取元素内容的语法结构如下：更改元素内容的语法结构如下：var变量名=元素对象.innerHTML;元素对象.innerHTML=新的内容;这里的元素对象可以使用document对象的getElementById("id名称")方法获取。5.1.2DOMHTML2.改变HTML元素内容【例5-3】JavaScriptDOM修改元素内容5.1.2DOMHTML3.改变HTML元素属性在JavaScript还可以根据属性名称动态地修改元素属性。其语法结构如下：例如，更改id="image"的图片地址src属性：元素对象.attribute=新的属性值;varimg=document.getElementById("image");img.src="image/newpic.jpg";5.1.2DOMHTML3.改变HTML元素属性也可以使用setAttribute()方法达到同样的效果。其语法格式如下：例如，更改id="image"的图片地址src属性的代码修改后如下：元素对象.setAttribute("属性名称","新的属性值");varimg=document.getElementById("image");img.setAttribute("src","image/newpic.jpg");5.1.2DOMHTML3.改变HTML元素属性【例5-4】JavaScriptDOM修改元素属性5.1.3DOMCSSJavaScript还可以改变HTML元素的CSS样式。其语法结构如下：元素对象.style.属性=新的值;这里的元素对象可以使用document对象的getElementById("id名称")方法获取。属性指的是在CSS样式中的属性名称，等号右边填写该属性更改后的样式值。5.1.3DOMCSS例如，更改id="test"的元素背景颜色为蓝色：上述代码也可以连成一句，写法如下：vartest=document.getElementById("test");test.style.backgroundColor="blue";需要注意的是，这里元素CSS属性名称需要修改成符合camel标记法的规则的写法，即首个单词全小写，后面的每个单词均首字母大写。而属性值在定义时需要加上双引号。vartest=document.getElementById("test").style.backgroundColor="blue";5.1.3DOMCSS【例5-5】JavaScriptDOM修改元素CSS样式5.1.4DOM事件JavaScript还可以在HTML页面状态发生变化时执行代码，这种状态的变化称为DOM事件（Event）。5.1.4DOM事件例如用户点击元素会触发点击事件，使用事件属性onclick就可以捕获这一事件。为元素的onclick属性添加需要的JavaScript代码，即可做到用户点击元素时触发动作。<buttononclick="alert('hi')">点我会弹出对话框</button>常见事件如表5-1所示。5.1.4DOM事件JavaScript代码可以直接在onclick属性的双引号中添加，也可以写到JavaScript函数中，在onclick属性的双引号中调用函数名称。例如上述代码可以改写为：<buttononclick="test()">点我会弹出对话框</button><script>functiontest(){alert("hi");}</script>以上两种方法效果完全相同，可根据代码量决定采用其中哪种方式，假如点击事件触发后需要执行的代码较多，建议使用函数调用的方式。5.1.4DOM事件【例5-6】DOM事件的简单应用

5.1.5DOM节点使用JavaScript也可以为HTML页面动态地添加和删除HTML元素。5.1.5DOM节点1.添加HTML元素添加HTML元素有两个步骤，先要创建需要添加的HTML元素，然后将其追加在一个已存在的元素中去。使用document对象的createElement()方法可以创建新的元素，其语法结构如下：例如，创建一个新的段落标签<p>：document.createElement("元素标签名");document.createElement("p");5.1.5DOM节点1.添加HTML元素使用appendChild()方法可以将创建好的元素追加到已存在的元素中，其语法结构如下：例如，将上一个示例中创建的段落标签<p>追加到id="test"的<div>标签中去：已存在的元素对象.appendChild(需要添加的新元素对象);varp=document.createElement("p");vartest=document.getElementById("test");test.appendChild(p);5.1.5DOM节点1.添加HTML元素【例5-7】JavaScriptDOM添加HTML元素5.1.5DOM节点2.删除HTML元素删除已存在的HTML元素也需要两个步骤：首先使用document对象的getElementById("id名称")方法获取该元素，然后使用removeChild()方法将其从父元素中删除。其父元素如果有明确的id名称，同样可以使用getElementById()方法获取。例如，在知道父元素id名称的情况下删除其中id="p01"的子元素：vartest=document.getElementById("test");//获取父元素varp=document.getElementById("p01");//获取子元素test.removeChild(p);//删除子元素5.1.5DOM节点2.删除HTML元素若父元素无对应的id名称获取，可以使用子元素的parentNode属性获取其父元素对象，效果相同。例如，在不知道父元素id名称的情况下删除其中id="p01"的子元素：varp=document.getElementById("p01");//获取子元素vartest=p.parentNode;//获取父元素test.removeChild(p);//删除子元素5.1.5DOM节点2.删除HTML元素【例5-8】JavaScriptDOM删除HTML元素5.2

浏览器对象模型BOM浏览器对象模型（BrowserObjectModel，BOM）使JavaScript可以与浏览器进行交互。5.2

浏览器对象模型BOMBOM中的常用对象如下：window：浏览器窗口对象，其成员包括所有的全局变量、函数和对象。screen：屏幕对象，通常用于获取用户可用屏幕的宽和高。location：位置对象，用于获得当前页面的URL地址，还可以把浏览器重定向到新的指定页面。history：历史记录对象，其中包含了浏览器的浏览历史记录。navigator：浏览器对象，通常用于获取用户浏览器的相关信息。5.2.1Window对象在JavaScript中window对象表示浏览器窗口，目前所有浏览器都支持该对象。JavaScript中一切全局变量、函数和对象都自动成为window对象的内容。例如，用于判断变量是否为数字的全局方法isNaN()就是window对象的方法，完整写法为window.isNaN()。通常情况下window前缀可以省略不写。5.2.1Window对象【例5-9】JavaScriptBOMWindow对象的应用5.2.2Screen对象

在JavaScript中window.screen对象可用于获取屏幕的可用宽度和高度。该对象在使用时通常可以省略window前缀，简写为screen。5.2.2Screen对象screen对象的常用属性如下：availWidth：表示屏幕的可用宽度，默认单位为像素（px）。availHeight：表示屏幕的可用高度，默认单位为像素（px）。其中avail前缀来源于英文单词available（可用的）。可用宽度或高度指的是去除界面上自带的内容（例如任务栏）后的实际可使用的宽高。5.2.2Screen对象【例5-10】JavaScriptBOMScreen对象的应用5.2.3Location对象在JavaScript中window.location对象可用于获取当前页面的URL或者将浏览器重定向到新的页面。该对象在使用时通常可以省略windows前缀，简写为location。location的href属性可以用于重定向到其他URL地址。例如：location.href("a.html");5.2.3Location对象【例5-11】JavaScriptBOMLocation对象的应用

5.2.4History对象在JavaScript中window.history对象包含了用户通过浏览器窗口访问过的URL历史记录。该对象在使用时通常可以省略windows前缀，简写为history。5.2.4History对象通常使用history对象实现浏览器上返回和前进按钮的相同功能。相关方法解释如下：back()：返回上一个页面，相当于点击了浏览器上的后退按钮。forward()：前进到下一个页面，相当于点击了浏览器上的前进按钮。5.2.4History对象【例5-12】JavaScriptBOMHistory对象的应用

5.2.5Navigator对象在JavaScript中window.navigator对象可用于获取用户浏览器的一系列信息，例如浏览器的名称、版本号等。该对象在使用时通常可以省略window前缀，简写为navigator。5.2.5Navigator对象navigator对象的常用属性如表所示。注：由于数据有可能被浏览器的使用者更改，因此来自navigator的信息仅作为参考，不能作为权威的依据。而且不同浏览器中navigator对象包含的属性也稍有差异。属性名称解释appCodeName浏览器代码名，通常会显示为Mozilla。appName浏览器名称，通常显示为Netscape。appVersion浏览器版本。cookieEnabled浏览器是否允许使用cookies。如果允许使用cookies返回true，否则返回false。javaEnabled当前浏览器中是否启用了Java。language浏览器使用的首选语言。mimeTypes在浏览器中注册的mime类型，返回值为数组。onLine浏览器是否处于联网状态。如果处于联网状态返回true，否则返回false。plugins浏览器中安装插件的信息，返回值为数组。platform浏览器所在的操作系统。product产品名称，通常显示为Gecko。userAgent用户代理信息。vendor浏览器的品牌供应商。5.2.5Navigator对象【例5-13】JavaScriptBOMNavigator对象的应用5.3

阶段案例：Nim博弈小游戏5.3.1案例需求5.3.2案例分析 5.3.3案例制作 5.3.4案例思考 5.3.1案例需求制作一款Nim博弈小游戏，由真人玩家和电脑AI双人对战。一共有25个石子，玩家和AI轮流拿取，每次必须拿至少1个、最多3个，谁拿到最后一颗就算谁输。5.3.2案例分析1. 生成随机数这里可以直接使用第4章阶段案例中的方法来生成一个a-b的随机整数（包含a和b本身），参考js代码如下：//随机生成a-b之间的数字，包含a和b本身functiongetRandomNum(a,b){returnMath.floor(Math.random()*(b-a+1))+a;}本案例需要随机产生1至3之间的整数，因此就使用getRandomNum(1,3)即可。5.3.2案例分析1. 生成随机数cont.但是还需要考虑一种特殊情况，有可能剩余石子数不足3个，那么这时就不能直接随机1至3之间的整数了，而是应该随机生成1至剩余石子总数之间的整数，参考js代码如下：varmaxNum=3;//最大数值varminNum=1;//最小数值varstoneNum=2;//当前石子总数

//AI随机产生一个要拿走的石子数varbotNum=getRandomNum(minNum,maxNum>stoneNum?stoneNum:maxNum);5.3.2案例分析1. 生成随机数cont.上述代码中的三目运算maxNum>stoneNum?stoneNum:maxNum表示先判断最大数值maxNum和石子总数stoneNum的大小，谁小就用谁作为随机数的上限。实际最后随机拿走的石子数是getRandomNum(minNum,maxNum)或getRandomNum(minNum,stoneNum)，根据比大小判断的结果而定。5.3.2案例分析2. 判断数字有效性可直接参考“第4章阶段案例：猜数字小游戏”中的“案例分析-2判断数字有效性”，同样是判断是否是数字、整数以及是否在有效范围内，这里不再赘述。5.3.2案例分析3. 循环游戏回合这里不妨试试使用while(true)来制作一个永久循环，直到判断出胜负再使用break强势停止循环，参考js代码如下：1. varmyTurn=true;//标记当前是否轮到真人玩家2. while(true){3. //真人玩家的回合4. if(myTurn){…玩家游戏过程待补充…}5. //AI的回合6. else{…AI游戏过程待补充…}7. 8. //判断游戏是否结束（如果剩余石子数为0则游戏结束）9. if(stoneNum==0){10. //判断谁赢了（…判断过程待补充…）11. break;//停止循环12. }13. else{14. myTurn=!myTurn;//切换当前玩家15. }16. }5.3.3案例制作创建一个HTML文件，文件名可自定义，例如NimGame.html。1. <!DOCTYPEhtml>2. <html>3. <head>4. <metacharset="utf-8">5. <title>Nim博弈小游戏</title>6. </head>7. <body>8. <!--标题-->9. <h3>Nim博弈小游戏（人机对战）</h3>10. <!--水平线-->11. <hr>12. <p>游戏规则：<br>13. 1.玩家和AI轮流拿石子，每次最少拿1个，最多拿3个。<br>14. 2.玩家先手拿，谁拿到最后1个就是谁输了（末者败）。</p>15. <buttononclick="startGame()">开始游戏</button>16. <script>17. //随机生成a-b之间的数字，包含a和b本身18. functiongetRandomNum(a,b){19. returnMath.floor(Math.random()*(b-a+1))+a;20. }5.3.3案例制作21. 22. //开始游戏23. functionstartGame(){24. //==============================25. //游戏初始化26. //==============================27. varmyTurn=true;//标记当前是否轮到真人玩家28. varmaxNum=3;//最大数值29. varminNum=1;//最小数值30. varstoneNum=25;//当前石子总数31. 32. //==============================33. //游戏开始//==============================35. while(true){36. //真人玩家的回合37. if(myTurn){38. //获取输入的玩家要拿去的石子数39. varmyNum=prompt("当前剩余石子总数为"+stoneNum+"，请输入您要拿去的石子数（1-3）","");5.3.3案例制作40. //有效性判断41. if(isNaN(myNum)){42. alert("您输入的不是数字，请重新输入！");43. continue;44. }45. elseif(myNum%1!==0){46. alert("您输入的不是整数，请重新输入！");47. continue;48. }49. elseif(myNum<minNum||myNum>maxNum||myNum>stoneNum){50. alert("您输入的数字不在有效范围，请重

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论