JavaScript 第二章 使用window对象
JavaScript 第四章 DOM编程提升
JavaScript 第三章 DOM编程基础 使用document对象
注意:各案例素材已提供下载
1、技术目标
- 使用getElementById()方法访问DOM元素
- 使用getElementsByName()方法访问DOM元素
- 使用getElementsByTagName()方法访问DOM元素
- 使用display样式属性控制元素的隐藏和显示
2、document对象
document对象是window对象的一部分,代表了整个HTML文档,可
用于访问页面中的所有元素,在使用时要注意浏览器差异以及符合
W3C的标准
3、document对象的常用属性
属性:
referrer 返回链接到当前文档的前一个页面的URL
URL 返回当前文档的URL
document.referrer属性可以判断当前页面是不是通过超链接访问的 ,
,如果不是则返回null,如果是则返回包含这个超链接的上一个页面
的URL,该属性可以限制进入页面的链接,如果不是由指定页面进入
的可以提醒或者跳转到其他页面
注意:使用document.referrer的时候,必须将页面发布到Web服务器
上运行才有效果
pageA.html通过超链接可打开pageB.html,示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>pageA.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> </head> <body> <h1> <a href="pageB.html">跳转到pageB.html</a> </h1> </body> </html>
pageB.html显示document.referrer属性值,示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>pageB.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script type="text/javascript"> //显示document.referrer属性值 alert(document.referrer); </script> </head> <body> <h1> 这是pageB.html </h1> </body> </html>
4、document对象访问页面元素的三种方法
- getElementById()按元素的ID名称来访问,返回对拥有指定id的第一个对象
- getElementsByName()按元素的name名称来访问,返回带有指定名称的对象的集合
- getElementsByTagName() 按标签来访问,返回带有指定标签名的对象的集合
5、访问页面元素
案例功能描述:
- 动态改变层、标签中的内容
- 访问相同name的元素
- 访问相同标签的元素
实现代码(试着运行以下代码,体会3种访问元素方法的使用):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>使用Document方法</title> <style type="text/css"> body{ font-size:14px; line-height:30px; } input{ margin:1px; width:90px; font-size:12px; padding:0; } #node{ width:100px; font-size:24px; font-weight:bold; float: left; } </style> <script type="text/javascript"> function changeLink(){ //获取DIV对象 var divObj = document.getElementById("node"); //改变DIV对象的HTML内容 divObj.innerHTML = "<em>搜狐</em>"; } function all_input(){ //获取所有input标签对象 var aInput = document.getElementsByTagName("input"); var sStr = ""; for(var i = 0; i < aInput.length; i++){ sStr += aInput[i].value + "<br />"; } document.getElementById("s").innerHTML=sStr; } function s_input(){ var aInput = document.getElementsByName("season"); var sStr=""; for(var i=0;i<aInput.length;i++){ sStr+=aInput[i].value+"<br />"; } document.getElementById("s").innerHTML=sStr; } </script> </head> <body> <div id="node">新浪</div> <input name="b1" type="button" value="改变层内容" onclick="changeLink();" /><br /> <br /> <input name="season" type="text" value="春" /> <input name="season" type="text" value="夏" /> <input name="season" type="text" value="秋" /> <input name="season" type="text" value="冬" /> <br /> <input name="b2" type="button" value="显示input内容" onclick="all_input()" /> <input name="b3" type="button" value="显示season内容" onclick="s_input()" /> <p id="s"></p> </body> </html>
6、元素的显示和隐藏
实现元素的隐藏、显示可使用visibility 属性与display 属性,
使用visibility的语法如下:
元素对象.style.visibility="值";
值有两种:
visible 表示元素是可见的
hidden 表示元素是不可见的
使用display的语法如下:
元素对象.style.display="值";
值有两种:
none 表示此元素不会被显示
block 表示此元素将显示为块级元素,
此元素前后会带有换行符
7、元素的隐藏于显示案例
请运行如下案例,体会visibility与display的区别
案例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>显示和隐藏图片</title> <script type="text/javascript"> function hidden_b2(){ document.getElementById("b2").style.visibility="hidden"; } function none_b2(){ document.getElementById("b2").style.display="none"; } </script> </head> <body> <img src="images/book1.jpg" alt="book1" id="b1" /> <img src="images/book2.jpg" alt="book2" id="b2" /> <img src="images/book3.jpg" alt="book3" id="b3" /><br /> <input name="btn1" type="button" value="visibility隐藏图b2" onclick="hidden_b2()" /> <input name="btn2" type="button" value="display隐藏图b2" onclick="none_b2()" /> </body> </html>
8、使用元素的隐藏、显示制作简单的树形菜单
案例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>制作简单的树形菜单</title> <style type="text/css"> body{ font-size:13px; line-height:20px; } a{ font-size: 13px; color: #000000; text-decoration: none; } a:hover{ font-size:13px; color: #ff0000; } img { vertical-align: middle; border:0; } .no_circle{ list-style-type:none; /*设置列表项标志的类型为无*/ display:none; } </style> <script type="text/javascript"> function show(){ if(document.getElementById("art").style.display=='block'){ //触动的ul如果处于显示状态,即隐藏 document.getElementById("art").style.display='none'; }else{ //触动的ul如果处于隐藏状态,即显示 document.getElementById("art").style.display='block'; } } </script> </head> <body> <b><img src="images/fold.gif">树形菜单:</b> <ul> <a href="javascript:show();"> <img src="images/fclose.gif">文学艺术 </a></ul> <ul id="art" class="no_circle"> <li><img src="images/doc.gif" >先锋写作</li> <li> <img src="images/doc.gif" >小说散文</li> <li><img src="images/doc.gif" >诗风词韵</li> </ul> </body> </html>
9、实现复选框的全选效果
效果描述:
当你点击全选时,所有复选框被选中,再次点击全选,
所有复选框取消选中
效果分析:
通过对复选框的checked属性值进行设置,其值如下:
- 选中:true
- 未选中:false
效果图:
示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>全选效果</title> <style type="text/css"> .bg{ background-image: url(images/list_bg.gif); background-repeat: no-repeat; width: 730px; } td{ text-align:center; font-size:13px; line-height:25px; } body{margin:0} </style> <script type="text/javascript"> function check(){ var oInput = document.getElementsByName("product"); var isChecked = document.getElementById("all").checked; for (var i=0; i < oInput.length; i++){ oInput[i].checked = isChecked; } } </script> </head> <body onload="init();"> <table border="0" cellspacing="0" cellpadding="0" class="bg"> <tr> <td style="height:40px;"> </td> <td> </td> <td> </td> <td> </td> </tr> <tr style="font-weight:bold;"> <td> <input id="all" type="checkbox" value="全选" onclick="check();" /> 全选 </td> <td>商品图片</td> <td>商品名称/出售者/联系方式</td> <td>价格</td> </tr> <tr> <td colspan="4"><hr style="border:1px #CCCCCC dashed" /></td> </tr> <tr> <td><input name="product" type="checkbox" value="1" /></td> <td><img src="images/list0.jpg" alt="alt" /></td> <td>杜比环绕,家庭影院必备,超真实享受<br /> 出售者:ling112233<br /> <img src="images/online_pic.gif" alt="alt" /> <img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td> <td>一口价<br /> 2833.0 </td> </tr> <tr> <td colspan="4"><hr style="border:1px #CCCCCC dashed" /></td> </tr> <tr> <td><input name="product" type="checkbox" value="2" /></td> <td><img src="images/list1.jpg" alt="alt" /></td> <td>NVDIA 9999GT 512MB 256bit极品显卡,不容错过<br /> 出售者:aipiaopiao110 <br /> <img src="images/online_pic.gif" alt="alt" /> <img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td> <td>一口价<br /> 6464.0 </td> </tr> <tr> <td colspan="4"><hr style="border:1px #CCCCCC dashed" /></td> </tr> <tr> <td><input name="product" type="checkbox" value="3" /></td> <td><img src="images/list2.jpg" alt="alt" /></td> <td>精品热卖:高清晰,30寸等离子电视<br /> 出售者:阳光的挣扎 <br /> <img src="images/online_pic.gif" alt="alt" /> <img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td> <td>一口价<br /> 18888.0 </td> </tr> <tr> <td colspan="4"><hr style="border:1px #CCCCCC dashed" /></td> </tr> <tr> <td><input name="product" type="checkbox" value="4" /></td> <td><img src="images/list3.jpg" alt="alt" /></td> <td>Sony索尼家用最新款笔记本 <br /> 出售者:疯狂的镜无<br /> <img src="images/online_pic.gif" alt="alt" /> <img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td> <td>一口价<br /> 5889.0 </td> </tr> <tr> <td colspan="4"><hr style="border:1px #CCCCCC dashed" /></td> </tr> </table> </body> </html>
相关推荐
但是,根据标题《JavaScript DOM编程艺术【第2版&高清】.pdf》和描述“JavaScript DOM编程艺术,高清资源,无比经典,值得拥有”,我们可以推断这本书主要讲述了JavaScript中DOM(文档对象模型)的相关编程技术。...
《JavaScript.DOM编程艺术(第2版)》是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍。DOM是Web开发中的核心组件,它允许程序员通过JavaScript来操作HTML和XML文档的结构、内容和样式。这本书...
JavaScript DOM编程艺术是一本深入解析DOM操作的经典书籍,它的源码提供了丰富的实例,帮助开发者深入理解如何使用原生JavaScript高效地操纵网页元素。DOM(Document Object Model)是HTML和XML文档的标准表示,它将...
《JavaScript DOM编程艺术 第2版》是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍。DOM是Web页面的结构模型,JavaScript通过DOM API能够对网页内容进行动态操作,实现丰富的交互效果。这...
JavaScript DOM编程艺术第二版是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍,主要面向希望提升JavaScript技能并掌握网页动态效果开发的Web开发者。DOM是HTML和XML文档的编程接口,它允许...
《JavaScript DOM编程艺术 第2版》是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍。DOM是Web页面的结构化表示,通过JavaScript,我们可以利用DOM来动态地操作HTML和XML文档,实现丰富的交互...
《JavaScript DOM编程艺术》是一本深受开发者欢迎的JavaScript学习书籍,专注于DOM(Document Object Model)这一核心概念。DOM是Web页面的结构模型,通过JavaScript与DOM的交互,开发者可以实现对网页内容的动态...
1. JavaScript基础:JavaScript作为一门编程语言,它的基本语法、数据类型、函数、对象等基础知识是学习DOM编程的前提。这本书可能会从这些基础概念讲起,逐步引导读者了解JavaScript的高级特性。 2. HTML和CSS知识...
总结,掌握Document对象的属性和方法是JavaScript DOM编程的基础,它允许开发者动态地修改网页内容,实现丰富的交互效果。在实际开发中,结合CSS和HTML,可以构建出各种复杂的页面布局和功能。作业部分,要求学生...
《JavaScript.DOM编程艺术(第2版)》是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威指南。DOM是Web开发中的核心组件,它允许我们通过编程方式操作HTML和XML文档。这本书全面覆盖了使用JavaScript...
2. **DOM编程基础** - 创建、查询和遍历DOM:书中通过`document.createElement()`、`getElementById()`、`getElementsByTagName()`等方法,介绍如何创建新元素、查找特定元素以及遍历整个文档结构。 - 事件处理:...
第三章可能讲解如何使用JavaScript处理事件,包括事件监听和事件处理函数。第四章则可能涉及基本的DOM操作,如添加、移除或修改HTML元素。 通过阅读这本书,开发者不仅可以掌握JavaScript的基本语法,还能学会如何...
【Document对象】是JavaScript中用于访问和操作HTML或XML文档的核心接口,它是整个DOM(文档对象模型)的基础。本讲主要介绍了Document对象的一些关键属性和方法,这些特性使得JavaScript能够与网页内容进行交互。 ...
这九章内容全面覆盖了JavaScript和DOM编程的基础和进阶知识,对于想要提升JavaScript技能和Web开发能力的开发者来说,是宝贵的参考资料。通过深入学习和实践,可以有效提升对前端技术的掌控力,为构建复杂交互的Web...
《JavaScript DOM编程艺术 第2版》是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍,由Jeremy Keith等人撰写。DOM是Web页面的结构化表示,它允许通过编程方式访问和修改网页内容。本书旨在...
**JavaScript+DOM编程艺术**是一本深入探讨JavaScript与DOM(Document Object Model)交互技术的书籍。JavaScript,作为Web开发中最常用的脚本语言,是构建动态网页的关键,而DOM则是HTML和XML文档的结构化表示,...
第3章 JavaScript事件处理 第4章 JavaScript基于对象编程 第5章 文档对象模型 DOM 第6章 String Math Array等数据对象 第7章 Window及相关顶级对象 第8章 Document对象">该资源为8个PDF文档教程 适合JS开发初学者 ...
《JavaScript DOM编程艺术第二版》会介绍如何使用XMLHttpRequest对象进行Ajax请求,以及处理JSON和XML数据。 在实际开发中,JavaScript往往需要与CSS和HTML紧密配合,书中也会讲解如何通过JavaScript动态改变样式和...