Document对象

简述

document 是文档对象，隶属于 window（window.document），是 DOM（文档对象模型） 的核心入口，专门用来代表整个 HTML 网页文档。

核心作用

代表当前整个网页 HTML 结构，把所有标签转成 JS 可操作的对象；
获取页面元素（标签）、修改内容、样式、属性；
创建、新增、删除网页标签；
监听页面元素事件，实现交互效果。

常见属性和方法

常见属性常见方法

名称	说明
title	设置或获取文档的标题
body	获取文档的 body 元素
head	获取文档的 head 元素
forms	获取文档中所有表单元素的集合
images	获取文档中所有图片元素的集合
links	获取文档中所有链接元素的集合
scripts	获取文档中所有脚本元素的集合
readyState	获取文档的加载状态
domain	获取或设置文档的域名
referrer	获取引用当前页面的 URL
URL	获取当前文档的完整 URL
bgColor	设置或检索 Document 对象的背景色

名称	说明
getElementById()	根据HTML元素指定的ID，获得唯一的一个HTML元素
getElementsByName()	根据HTML元素指定的name，获得相同名称的一组元素
getElementsByClassName()	根据元素的 class 名称获取元素集合
getElementsByTagName()	根据元素的标签名获取元素集合
querySelector()	根据 CSS 选择器获取第一个匹配的元素
querySelectorAll()	根据 CSS 选择器获取所有匹配的元素集合
createElement()	创建一个新的 HTML 元素
createTextNode()	创建一个新的文本节点
appendChild()	向元素末尾添加子元素
removeChild()	从元素中移除子元素
replaceChild()	替换元素中的子元素
insertBefore()	在指定子元素前插入新元素
write()	向文档写入 HTML 内容
writeln()	向文档写入 HTML 内容并添加换行符
close()	关闭文档的输出流
open()	打开文档的输出流

DIV

<div> 是 HTML 通用块级容器标签，全称 division（分区/分割），是网页布局最常用的骨架标签。

核心特点

块级元素：默认独占一行，自动换行；
无默认样式：本身不加颜色、边框、缩进，纯空白容器；
无语义：只用来装内容、做分区，不代表文本、标题、图片等具体含义；
可嵌套：div 里面可以再放 div、文字、图片、表单、各种标签。

主要作用

网页整体布局分区（头部、侧边栏、主体、底部）；
包裹一组元素，统一加 CSS 样式（宽高、颜色、边距、居中）；
配合 class / id，供 JS（document）获取、操作、修改内容与样式；
实现弹性布局、网格布局、卡片模块等页面结构。

示例

<!-- 单个容器 -->
<div class="box">我是div容器，用来装内容</div>

<!-- 布局分区 -->
<div class="header">网页头部</div>
<div class="main">主体内容区</div>
<div class="footer">网页底部</div>

制作浮动的广告图片

问题

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

分析

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

实现思路

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

编写脚本

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

常见的页面坐标的介绍

z-index: 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
top:指定元素的上边界位置。
pixelTop:设置或返回元素的上边界。
left:指定元素的左边界位置。
scrolltop:页面滚动的高度

实现

效果源代码

浮动广告
<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
<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>

带关闭按钮的浮动窗口

问题

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

分析

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

实现思路：

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

编写脚本

使用getElementById( )方法获得层对象
设置层的样式style的显示属性display="none"

实现1

效果

源代码

<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
<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

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

效果

源代码

<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>

源代码

js_document_getElementByID1.html
<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>

全选效果

问题

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

实现思路：

创建一组同名的复选框

编写脚本

使用getElementsByName( )方法获得一组同名的复选框对象。
通过循环来改变复选框是否被选中属性checked的值。

实现

效果

源代码

<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>'

源代码

js_document_getElementsByName.html
<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>