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

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

效果图：

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

示例代码：

<!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编程提升

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

相关推荐

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