Skip to content

Document对象

名称 说明
bgColor 设置或检索 Document 对象的背景色
getElementByID( ) 根据HTML元素指定的ID，获得唯一的一个HTML元素。如：访问DIV层对象、图片Img对象
getElementsByName( ) 根据HTML元素指定的name，获得相同名称的一组元素。如：访问表单元素(全选功能)

DIV

DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。

DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。

制作浮动的广告图片

问题

如何在页面上方显示广告图片？如何控制图片的移动？

分析

使用DIV层，把图片放在层中，然后使用JavaScript控制层的位置坐标

实现思路

在页面中插入层，然后在层中插入图片

编写脚本

  1. 使用getElementByID( )方法获取层对象
  2. 捕获鼠标滚动事件，改变层对象的位置坐标

常见的页面坐标的介绍

  • z-index: 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

  • top:指定元素的上边界位置。

  • pixelTop:设置或返回元素的上边界。

  • left:指定元素的左边界位置。

  • scrolltop:页面滚动的高度

实现

浮动广告
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<SCRIPT language="javascript">
  var advInitTop = 0;
  function inix() {
    advInitTop = document.getElementById("advLayer").style.pixelTop;
  }
  function move() {
    document.getElementById("advLayer").style.pixelTop = advInitTop + document.body.scrollTop;
  }
  window.onscroll = move;  //窗口的滚动事件，当页面滚动时调用move( )函数
</SCRIPT>

<DIV id="advLayer" style="position:absolute;    left:16px;  top:129px;  width:180px;    height:230px;   z-index:1;"><A
    href="http://www.taobao.com"><IMG src="images/advpic.gif" width="180" height="230" border="0"></A></DIV>
源代码
js_document_getElementByID1.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <TITLE>getElementById方法</TITLE>
  <SCRIPT language="javascript">
    var advInitTop = 0;
    function inix() {
      advInitTop = document.getElementById("advLayer").style.pixelTop;
    }
    function move() {
      document.getElementById("advLayer").style.pixelTop = advInitTop + document.body.scrollTop;
    }
    window.onscroll = move;  //窗口的滚动事件，当页面滚动时调用move( )函数
  </SCRIPT>
</HEAD>

<BODY onload="inix( )">
  <P>&nbsp;</P>
  <P><IMG src="images/contentpic.jpg" width="993" height="1799"></P>
  <P>&nbsp;</P>
  <DIV id="advLayer" style="position:absolute;  left:16px;  top:129px;  width:180px;    height:230px;   z-index:1;"><A
      href="http://www.taobao.com"><IMG src="images/advpic.gif" width="180" height="230" border="0"></A></DIV>
</BODY>

</HTML>

带关闭按钮的浮动窗口

问题

如何实现带关闭功能的浮动窗口？

分析

把带关闭的图标放到层中，当点击图标时层消失。

实现思路：

在页面中插入层，在层中插入图片

编写脚本

  1. 使用getElementById( )方法获得层对象

  2. 设置层的样式style的显示属性display="none"

实现1

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<SCRIPT language="javascript">
  function closeMe() {
    document.getElementById("closeLayer").style.display = "none";
    document.getElementById("advLayer").style.display = "none";
  }
</SCRIPT>

<DIV id="closeLayer" onclick="closeMe( )"
  style="position:absolute;left:166px;  top:132px;  width:27px; height:19px;z-index:2;">
  <IMG src="images/close.jpg" width="26" height="18">
</DIV>
源代码
js_document_getElementByID1.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <TITLE>getElementById方法</TITLE>
  <SCRIPT language="javascript">
    var advInitTop = 0;
    function inix() {
      advInitTop = document.getElementById("advLayer").style.pixelTop;
    }
    function move() {
      document.getElementById("advLayer").style.pixelTop = advInitTop + document.body.scrollTop;
    }
    window.onscroll = move;  //窗口的滚动事件，当页面滚动时调用move( )函数
  </SCRIPT>
</HEAD>

<BODY onload="inix( )">
  <P>&nbsp;</P>
  <P><IMG src="images/contentpic.jpg" width="993" height="1799"></P>
  <P>&nbsp;</P>
  <DIV id="advLayer" style="position:absolute;  left:16px;  top:129px;  width:180px;    height:230px;   z-index:1;"><A
      href="http://www.taobao.com"><IMG src="images/advpic.gif" width="180" height="230" border="0"></A></DIV>
</BODY>

</HTML>

实现2

让关闭图标所在的层像浮动窗口一样，也跟随滚动条同步滚动。

js_document_getElementByID1.html
1
2
3
4
5
6
7
8
9
<SCRIPT language="javascript">
  var advInitTop = 0;
  var closeInitTop = 0;

  function move() {
    document.getElementById("advLayer").style.pixelTop = advInitTop + document.body.scrollTop;
    document.getElementById("closeLayer").style.pixelTop = closeInitTop + document.body.scrollTop;
  }
</SCRIPT>
源代码
js_document_getElementByID1.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <TITLE>getElementById方法</TITLE>
  <SCRIPT language="javascript">
    var advInitTop = 0;
    function inix() {
      advInitTop = document.getElementById("advLayer").style.pixelTop;
    }
    function move() {
      document.getElementById("advLayer").style.pixelTop = advInitTop + document.body.scrollTop;
    }
    window.onscroll = move;  //窗口的滚动事件，当页面滚动时调用move( )函数
  </SCRIPT>
</HEAD>

<BODY onload="inix( )">
  <P>&nbsp;</P>
  <P><IMG src="images/contentpic.jpg" width="993" height="1799"></P>
  <P>&nbsp;</P>
  <DIV id="advLayer" style="position:absolute;  left:16px;  top:129px;  width:180px;    height:230px;   z-index:1;"><A
      href="http://www.taobao.com"><IMG src="images/advpic.gif" width="180" height="230" border="0"></A></DIV>
</BODY>

</HTML>

全选效果

问题

如何实现列表的全选或全不选效果？

实现思路：

创建一组同名的复选框

编写脚本

  1. 使用getElementsByName( )方法获得一组同名的复选框对象。

  2. 通过循环来改变复选框是否被选中属性checked的值。

实现

js_document_getElementsByName.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<SCRIPT language="javascript">
  function checkAll(boolValue) {
    var allCheckBoxs = document.getElementsByName("isBuy");
    for (var i = 0; i < allCheckBoxs.length; i++) {
      if (allCheckBoxs[i].type == "checkbox")  //可能有重名的其他类型元素，如图片、控件等，所以要判断类型
        allCheckBoxs[i].checked = boolValue;  //检查是否选中用checked，而不是value
    }
  }
</SCRIPT>

<TR>
  <TD width="6%"><A href="javascript: checkAll(true)">全选</A></TD>
  <TD width="6%"><A href="javascript: checkAll(false)">全不选</A></TD>
</TR>
<TR>
  <TD colspan="2" align="center"><INPUT name="isBuy" type="checkbox" id="isBuy" value="sanguo"></TD>
</TR>
<TR>
  <TD colspan="2" align="center"><INPUT name="isBuy" type="checkbox" id="isBuy" value="paozhu"></TD>
</TR>
<TR>
  <TD colspan="2" align="center"><INPUT name="isBuy" type="checkbox" id="isBuy" value="paozhu"></TD>
</TR>
<TR>
  <TD colspan="2" align="center"><INPUT name="isBuy" type="checkbox" id="isBuy" value="jingwu"></TD>
</TR>
源代码
js_document_getElementsByName.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<HTML>

<HEAD>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <TITLE>getElementByName</TITLE>
  <SCRIPT language="javascript">
    function checkAll(boolValue) {
      var allCheckBoxs = document.getElementsByName("isBuy");
      for (var i = 0; i < allCheckBoxs.length; i++) {
        if (allCheckBoxs[i].type == "checkbox")  //可能有重名的其他类型元素，如图片、控件等，所以要判断类型
          allCheckBoxs[i].checked = boolValue;  //检查是否选中用checked，而不是value
      }
    }
  </SCRIPT>
</HEAD>

<BODY>
  <FORM action="" name="buyForm" method="post">
    <TABLE width="100%" border="0">
      <TR>
        <TD colspan="3"><IMG src="images/head.jpg" width="958" height="175"></TD>
      </TR>
      <TR>
        <TD width="6%"><A href="javascript: checkAll(true)">全选</A></TD>
        <TD width="6%"><A href="javascript: checkAll(false)">全不选</A></TD>
        <TD width="88%"><IMG src="images/top.jpg" width="845" height="18"></TD>
      </TR>
      <TR>
        <TD colspan="2" align="center"><INPUT name="isBuy" type="checkbox" id="isBuy" value="sanguo"></TD>
        <TD><IMG src="images/one.jpg" width="843" height="80"></TD>
      </TR>
      <TR>
        <TD colspan="3" align="center">
          <HR noshade="noshade" style="border:1px  #CCCCCC dashed " />
        </TD>
      </TR>
      <TR>
        <TD colspan="2" align="center"><INPUT name="isBuy" type="checkbox" id="isBuy" value="paozhu"></TD>
        <TD><IMG src="images/two.jpg" width="842" height="79"></TD>
      </TR>
      <TR>
        <TD colspan="3" align="center">
          <HR noshade="noshade" style="border:1px  #CCCCCC dashed " />
        </TD>
      </TR>
      <TR>
        <TD colspan="2" align="center"><INPUT name="isBuy" type="checkbox" id="isBuy" value="paozhu"></TD>
        <TD><IMG src="images/three.jpg" width="844" height="81"></TD>
      </TR>
      <TR>
        <TD colspan="3" align="center">
          <HR noshade="noshade" style="border:1px  #CCCCCC dashed " />
        </TD>
      </TR>
      <TR>
        <TD colspan="2" align="center"><INPUT name="isBuy" type="checkbox" id="isBuy" value="jingwu"></TD>
        <TD><IMG src="images/four.jpg" width="847" height="85"></TD>
      </TR>
      <TR>
        <TD colspan="3" align="center">
          <HR noshade="noshade" style="border:1px  #CCCCCC dashed " />
        </TD>
      </TR>
    </TABLE>
  </FORM>
</BODY>

</HTML>