本文整理 JavaScript 中 Document 对象的常用属性与方法，涵盖文档标题、背景色、链接颜色等基础设置，以及 write、createElement 等动态内容生成方法。同时深入解析 body、location、selection、images 和 forms 等子对象的属性应用，包括通过集合或 name 属性引用元素、动态修改样式及处理表单数据，帮助开发者快速掌握前端 DOM 操作核心技巧。
Document 基础属性设置
document.title 用于设置或获取文档标题，其效果等同于 HTML 中的 title 标签。
document.bgColor 用于设置页面的背景颜色。
document.fgColor 用于设置页面的前景色，即文本显示颜色。
document.linkColor 用于定义未点击过的链接颜色。
document.alinkColor 用于设置激活状态下的链接颜色，即鼠标焦点停留在该链接时的颜色。
document.vlinkColor 用于设置已点击过的链接颜色。
document.URL 属性用于获取当前文档的 URL，通过修改此属性可在同一窗口中打开另一个网页。
document.fileCreatedDate 为只读属性，返回文件创建的日期。
document.fileModifiedDate 为只读属性，返回文件最后修改的日期。
document.charset 用于设置或获取文档的字符集，例如简体中文通常对应 gb2312。
document.fileSize 为只读属性，返回文件的大小。
document.cookie 用于设置或读取当前文档的 Cookie 数据。
———————————————————————
Document 常用对象方法
常用对象方法
document.write() 方法用于动态地向页面写入内容。
document.createElement(Tag) 方法用于创建一个指定标签名的 HTML 元素对象。
document.getElementById(ID) 方法用于获取指定 ID 值的 DOM 对象。
document.getElementsByName(Name) 方法用于获取指定 Name 属性的所有对象集合。
document.body.appendChild(oTag) 用于将指定元素 oTag 添加为 body 的子节点。
———————————————————————
Body 主体子对象详解
body-主体子对象
document.body 属性指定文档主体的开始和结束，等价于 HTML 中的 <body>...</body> 标签。
document.body.bgColor 用于设置或获取主体背景颜色。
document.body.link 用于设置未点击过的链接颜色。
document.body.alink 用于设置激活链接（鼠标焦点在此链接上）的颜色。
document.body.vlink 用于设置已点击过的链接颜色。
document.body.text 用于设置文本颜色。
document.body.innerText 用于设置 <body>...</body> 标签之间的纯文本内容。
document.body.innerHTML 用于设置 <body>...</body> 标签之间的 HTML 代码。
document.body.topMargin 用于设置页面上边距。
document.body.leftMargin 用于设置页面左边距。
document.body.rightMargin 用于设置页面右边距。
document.body.bottomMargin 用于设置页面下边距。
document.body.background 用于设置背景图片。
document.body.appendChild(oTag) 方法用于动态生成一个 HTML 对象并添加到 body 中。
Body 常用对象事件
常用对象事件
document.body.onclick="func()" 用于在鼠标指针单击对象时触发指定函数。
document.body.onmouseover="func()" 用于在鼠标指针移到对象时触发指定函数。
document.body.onmouseout="func()" 用于在鼠标指针移出对象时触发指定函数。
———————————————————————
Location 位置子对象属性
location-位置子对象
document.location.hash 用于获取 URL 中 # 号后的部分。
document.location.host 用于获取域名加端口号（注意：某些环境下可能仅返回主机名如 localhost，而不包含端口号）。
document.location.hostname 用于获取域名。
document.location.href 用于获取完整的 URL 地址。
document.location.pathname 用于获取 URL 的目录部分。
document.location.port 用于获取端口号。
document.location.protocol 用于获取网络协议（如 http:）。
document.location.search 用于获取 URL 中 ? 号后的部分。
document.location.reload() 方法用于刷新当前网页。
document.location.reload(URL) 用于打开新的网页（注：标准用法中 reload 通常不接受参数，此处可能指代重新加载指定 URL）。
document.location.assign(URL) 方法用于加载新的文档，即打开新的网页。
document.location.replace(URL) 方法用于用新的文档替换当前文档，即打开新的网页且不产生历史记录。
———————————————————————
Selection 选区子对象应用
selection-选区子对象
document.selection 属性用于获取当前文档中的文本选区。
例如：
<div>请选中这里的部分文字。</div>
<div><input type="button" value="请选中部分文字，然后点击这里执行 empty" onclick="javaｓｃｒｉｐｔ:Foo();" /></div>
<ｓｃｒｉｐｔ type="text/javaｓｃｒｉｐｔ" language="javaｓｃｒｉｐｔ">
<!--
function Foo()
{
document.selection.empty();
}
-->
</ｓｃｒｉｐｔ>
selection的createRange方法
document.selection.createRange() 方法根据当前文字选择返回 TextRange 对象，或根据控件选择返回 ControlRange 对象。
配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。
这些好像都是只有在IE下才能实现。。
———————————————————————
Images 图象集合操作
images集合(页面中的图象)
a)通过集合引用
document.images 对应页面上的 img 标签集合。
document.images.length 对应页面上 img 标签的个数。
document.images[0] 表示第 1 个 img 标签。
document.images[i] 表示第 i-1 个 img 标签。
b)通过name属性直接引用
img name="oImage"
document.images.oImage 通过 document.images.name 属性直接引用。
c)引用图片的src属性
document.images.oImage.src 通过 document.images.name 属性.src 获取图片源地址。
d)创建一个图象
var oImage
oImage = new Image()
document.images.oImage.src="1.jpg"
同时在页面上建立一个 img 标签与之对应就可以显示。
———————————————————————-
Forms 表单集合处理
forms集合(页面中的表单)
a)通过集合引用
document.forms 对应页面上的 form 标签集合。
document.forms.length 对应页面上 form 标签的个数。
document.forms[0] 表示第 1 个 form 标签。
document.forms[i] 表示第 i-1 个 form 标签。
document.forms[i].length 表示第 i-1 个 form 中的控件数。
document.forms[i].elements[j] 表示第 i-1 个 form 中第 j-1 个控件。
b)通过标签name属性直接引用
<form name="Myform"><input name="myctrl"/></form>
document.Myform.myctrl 通过 document.表单名.控件名直接引用。
c)访问表单的属性
document.forms[i].name 对应 form name 属性。
document.forms[i].action 对应 form action 属性。
document.forms[i].encoding 对应 form enctype 属性。
document.forms[i].target 对应 form target 属性。
document.forms[i].appendChild(oTag) 用于动态插入一个控件到表单中。
图层对象与 DOM 引用技巧
document.all.oDiv 用于引用图层 oDiv（注：document.all 仅 IE 支持，常用于判断浏览器种类）。
document.all.oDiv.style.display="" 将图层设置为可视。
document.all.oDiv.style.display="none" 将图层设置为隐藏。
document.getElementId("oDiv") 通过 getElementId 引用对象（注：标准方法为 getElementById）。
document.getElementId("oDiv").style="" 设置对象样式。
document.getElementId("oDiv").display="none" 设置对象为隐藏。
/*document.all表示document中所有对象的集合
只有ie支持此属性，因此也用来判断浏览器的种类*/
图层对象的4个属性
document.getElementById("ID").innerText 用于动态输出文本。
document.getElementById("ID").innerHTML 用于动态输出 HTML 内容。
document.getElementById("ID").outerText 同 innerText。
document.getElementById("ID").outerHTML 同 innerHTML