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

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

编程JavaScriptXHTMLHTMLCSS 
阅读更多


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 第二章 使用window对象
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript入门教程

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

    javascript完全学习手册2 源码

    第2章 JavaScript编程基础 2．1 基础语法 2．1．1 数据类型 2．1．2 变量和常量 2．1．3 表达式 2．1．4 运算符 2．2 流程控制 2．2．1 条件语句r 2．2．2 循环语句 2．2．3 其他语句 2．3 使用对话框 2．3．1 警告...

    JavaScript高级编程

    一套很适用的JavaScript编程书籍. ...第3章 JavaScript事件处理 第4章 JavaScript基于对象编程 第5章 文档对象模型(DOM) 第6章 String、Math、Array等数据对象 第7章 Window及相关顶级对象 第8章 Document对象

    Javascript 入门教程

    第3章 JavaScript事件处理.pdf 第4章 JavaScript基于对象编程.pdf 第5章 文档对象模型(DOM).pdf 第6章 String、Math、Array等数据对象.pdf 第7章 Window及相关顶级对象.pdf 第8章 Document对象.pdf 内容 绝对清楚 ...

    javascript完全学习手册1 源码

    第2章 JavaScript编程基础 19 2.1 基础语法 19 2.1.1 数据类型 19 2.1.2 变量和常量 22 2.1.3 表达式 24 2.1.4 运算符 24 2.2 流程控制 27 2.2.1 条件语句 27 2.2.2 循环语句 30 2.2.3 其他语句 35 2.3 使用对话框 ...

    从零开始学JavaScript 源代码

    第3章 JavaScript事件处理 第4章 JavaScript基于对象编程 第5章 文档对象模型（DOM） 第6章 String、Math、Array等数据对象 第7章 Window及相关顶级对象 第8章 Document对象 第9章 HTML元素对象 第二篇 JavaScript...

    疯狂HTML 5+CSS 3+JavaScript讲义（第2版）+源代码

    第14章　DOM编程详解 444 14.1　DOM模型概述 445 14.2　DOM模型和HTML文档 446 14.3　访问HTML元素 448 14.4　修改HTML元素 456 14.5　增加HTML元素 458 14.6　删除HTML元素 463 14.7　传统的DHTML模型 467 14.8　...

    JavaScript基础和实例代码

    第3章 JavaScript事件处理 3.1 什么是事件 3.2 HTML文档事件 3.2.1 事件捆绑 3.2.2 浏览器事件 3.2.3 HTML元素事件 3.2.4 IE扩展的事件 3.3 JavaScript如何处理事件 3.3.1 匿名函数 3.3.2 显式声明 3.3.3 手工触发 ...

    源文件程序天下JAVASCRIPT实例自学手册

    第3章 JavaScript事件处理 3.1 什么是事件 3.2 HTML文档事件 3.2.1 事件捆绑 3.2.2 浏览器事件 3.2.3 HTML元素事件 3.2.4 IE扩展的事件 3.3 JavaScript如何处理事件 3.3.1 匿名函数 3.3.2 显式声明 3.3.3 手工触发 ...

    javascript脚本化文档

    DOM的0级别只是定义了一个Document类，并且本章常常非正式地称其为Document对象。可是，W3C DOM定义了一个Document API，它提供了可用于HTML和XML文档的通用文档功能，以及一个专门的HTMLDocument API，用来添加特定...

    javascript入门教程

    第1章 JavaScript语言概述 ...第3章 JavaScript事件处理 第4章 JavaScript基于对象编程 第5章 文档对象模型(DOM) 第6章 String、Math、Array等数据对象 第7章 Window及相关顶级对象 第8章 Document对象

    js入门教程(共8个pdf文件）

    一共分八章讲解：（pdf格式） ...第3章 JavaScript事件处理 第4章 JavaScript基于对象编程 第5章 文档对象模型(DOM) 第6章 String、Math、Array等数据对象 第7章 Window及相关顶级对象 第8章 Document对象

    JavaScript入门必备教程

    第3章 JavaScript事件处理.pdf 第4章 JavaScript基于对象编程.pdf 第5章 文档对象模型(DOM).pdf 第6章 String、Math、Array等数据对象.pdf 第7章 Window及相关顶级对象.pdf 第8章 Document对象.pdf

    JavaScript 教程 （六部分）

    第3章 JavaScript事件处理.pdf 第4章 JavaScript基于对象编程.pdf 第5章 文档对象模型(DOM).pdf .第6章 String、Math、Array等数据对象.pdf 第7章 Window及相关顶级对象.pdf 第8章 Document对象.pdf

    Javascript DHTML DOM基础和基本API第1/5页

    什么叫DOM，DOM是文档对象模型(Document Object Model，是基于浏览器编程（在本教程中，可以说就是DHTML编程）的一套API接口，W3C出台的推荐标准，每个浏览器都有一些细微的差别，其中以Mozilla的浏览器最与标准...

Magicbox
Global site tag (gtag.js) - Google Analytics