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

最新推荐文章于 2021-01-07 11:56:51 发布

iteye_12370

最新推荐文章于 2021-01-07 11:56:51 发布

阅读量266

点赞数

分类专栏： 5、HTML/JavaScript 文章标签：编程 JavaScript XHTML HTML CSS ViewUI

5、HTML/JavaScript 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

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="改变层内容"
οnclick="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内容"
οnclick="all_input()" />
<input name="b3" type="button" value="显示season内容" οnclick="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" οnclick="hidden_b2()" />
<input name="btn2" type="button" value="display隐藏图b2" οnclick="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 οnlοad="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="全选" οnclick="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编程提升