`
HotStrong
  • 浏览: 509115 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

JavaScript 第三章 DOM编程基础 使用document对象

阅读更多


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;">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</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" /> &nbsp;&nbsp;
    <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" /> &nbsp;&nbsp;
    <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" /> &nbsp;&nbsp;
    <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" /> &nbsp;&nbsp;
    <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 第二章 使用window对象

JavaScript 第四章 DOM编程提升

 

 

 

3
6
分享到:
评论

相关推荐

    JavaScript DOM编程艺术【第2版&高清】.pdf

    但是,根据标题《JavaScript DOM编程艺术【第2版&高清】.pdf》和描述“JavaScript DOM编程艺术,高清资源,无比经典,值得拥有”,我们可以推断这本书主要讲述了JavaScript中DOM(文档对象模型)的相关编程技术。...

    JavaScript.DOM编程艺术(第2版)附录及源码.rar

    《JavaScript.DOM编程艺术(第2版)》是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍。DOM是Web开发中的核心组件,它允许程序员通过JavaScript来操作HTML和XML文档的结构、内容和样式。这本书...

    经典之作javascript dom编程艺术源码

    JavaScript DOM编程艺术是一本深入解析DOM操作的经典书籍,它的源码提供了丰富的实例,帮助开发者深入理解如何使用原生JavaScript高效地操纵网页元素。DOM(Document Object Model)是HTML和XML文档的标准表示,它将...

    JavaScript DOM编程艺术 第2版 及源码

    《JavaScript DOM编程艺术 第2版》是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍。DOM是Web页面的结构模型,JavaScript通过DOM API能够对网页内容进行动态操作,实现丰富的交互效果。这...

    JavaScriptDOM编程艺术第二版

    JavaScript DOM编程艺术第二版是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍,主要面向希望提升JavaScript技能并掌握网页动态效果开发的Web开发者。DOM是HTML和XML文档的编程接口,它允许...

    javascript dom编程艺术 第2版 源码

    《JavaScript DOM编程艺术 第2版》是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍。DOM是Web页面的结构化表示,通过JavaScript,我们可以利用DOM来动态地操作HTML和XML文档,实现丰富的交互...

    javascriptDom编程艺术+源码

    《JavaScript DOM编程艺术》是一本深受开发者欢迎的JavaScript学习书籍,专注于DOM(Document Object Model)这一核心概念。DOM是Web页面的结构模型,通过JavaScript与DOM的交互,开发者可以实现对网页内容的动态...

    JavaScript DOM编程艺术第二版(英文).pdf

    1. JavaScript基础:JavaScript作为一门编程语言,它的基本语法、数据类型、函数、对象等基础知识是学习DOM编程的前提。这本书可能会从这些基础概念讲起,逐步引导读者了解JavaScript的高级特性。 2. HTML和CSS知识...

    第16讲 DOM编程-Document对象(三).ppt

    总结,掌握Document对象的属性和方法是JavaScript DOM编程的基础,它允许开发者动态地修改网页内容,实现丰富的交互效果。在实际开发中,结合CSS和HTML,可以构建出各种复杂的页面布局和功能。作业部分,要求学生...

    [JavaScript.DOM编程艺术(第2版)-高清扫描

    《JavaScript.DOM编程艺术(第2版)》是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威指南。DOM是Web开发中的核心组件,它允许我们通过编程方式操作HTML和XML文档。这本书全面覆盖了使用JavaScript...

    JSDOM编程艺术代码.7z

    2. **DOM编程基础** - 创建、查询和遍历DOM:书中通过`document.createElement()`、`getElementById()`、`getElementsByTagName()`等方法,介绍如何创建新元素、查找特定元素以及遍历整个文档结构。 - 事件处理:...

    Javascript DOM编程艺术 中文版

    第三章可能讲解如何使用JavaScript处理事件,包括事件监听和事件处理函数。第四章则可能涉及基本的DOM操作,如添加、移除或修改HTML元素。 通过阅读这本书,开发者不仅可以掌握JavaScript的基本语法,还能学会如何...

    第14讲 DOM编程-Document对象(一).ppt

    【Document对象】是JavaScript中用于访问和操作HTML或XML文档的核心接口,它是整个DOM(文档对象模型)的基础。本讲主要介绍了Document对象的一些关键属性和方法,这些特性使得JavaScript能够与网页内容进行交互。 ...

    javaScript DOM编程艺术2版学习笔记

    这九章内容全面覆盖了JavaScript和DOM编程的基础和进阶知识,对于想要提升JavaScript技能和Web开发能力的开发者来说,是宝贵的参考资料。通过深入学习和实践,可以有效提升对前端技术的掌控力,为构建复杂交互的Web...

    JavaScript DOM编程艺术 第2版

    《JavaScript DOM编程艺术 第2版》是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍,由Jeremy Keith等人撰写。DOM是Web页面的结构化表示,它允许通过编程方式访问和修改网页内容。本书旨在...

    Javascript+DOM编程艺术

    **JavaScript+DOM编程艺术**是一本深入探讨JavaScript与DOM(Document Object Model)交互技术的书籍。JavaScript,作为Web开发中最常用的脚本语言,是构建动态网页的关键,而DOM则是HTML和XML文档的结构化表示,...

    JavaScript入门教程

    第3章 JavaScript事件处理 第4章 JavaScript基于对象编程 第5章 文档对象模型 DOM 第6章 String Math Array等数据对象 第7章 Window及相关顶级对象 第8章 Document对象"&gt;该资源为8个PDF文档教程 适合JS开发初学者 ...

    JavaScript_DOM编程艺术第二版(中文)

    《JavaScript DOM编程艺术第二版》会介绍如何使用XMLHttpRequest对象进行Ajax请求,以及处理JSON和XML数据。 在实际开发中,JavaScript往往需要与CSS和HTML紧密配合,书中也会讲解如何通过JavaScript动态改变样式和...

Global site tag (gtag.js) - Google Analytics