Document 对象
Document 对象代表整个HTML 文档，可用来访问页面中的所有元素。
Document 对象是 Window 对象的一个部分，可通过 window.document 属性来访问。

Document 对象的集合：
(1)all[]:all 集合返回对文档中所有 HTML 元素的引用。
语法：

document.all[i]

document.all[name]

document.all.tags[tagname]

说明：
第一：all[] 是一个多功能的类似数组的对象，它提供了对文档中所有 HTML 元素的访问。
第二：all[] 已经被 Document 接口的标准的 getElementByid() 方法和 getElementsByTagName() 方法以及 Document 对象的 getElementsByName() 方法所取代。
(2)anchors[]:anchors 集合可返回对文档中所有 Anchor 对象的引用。
语法：

document.anchors[]

举例如下：


<html>

<body>

<a name="first">First anchor</a><br />

<a name="second">Second anchor</a><br />

<a name="third">Third anchor</a><br />

<br />

Number of anchors in this document:

<script type="text/javascript">

document.write(document.anchors.length)

</script>

</body>

</html>

(3)forms[]:返回对文档中所有 Form 对象的引用。
语法：

document.forms[]

举例如下：


<html>

<body>

<form name="Form1"></form>

<form name="Form2"></form>

<form name="Form3"></form>

<script type="text/javascript">

document.write("This document contains: ")

document.write(document.forms.length + " forms.")

</script>

</body>

</html>

输出结果：This document contains: 3 forms. 
(4)images[]:返回对文档中所有 Image 对象的引用。
语法：

document.images[]

举例如下：


<html>

<body>

<img border="0" src="hackanm.gif" width="48" height="48"><br />

<img border="0" src="compman.gif" width="107" height="98"><br />

<script type="text/javascript">

document.write("This document contains: ")

document.write(document.images.length + " images.")

</script>

</body>

</html>

输出结果：This document contains: 2 images.
(5)links[]：返回对文档中所有 Area 和 Link 对象的引用。
语法：

document.links[]

Document 对象的属性:
(1)body:提供对 <body> 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 <frameset>。
(2)cookie :可设置或查询与当前文档相关的所有 cookie。
语法：

document.cookie

说明：该属性是一个可读可写的字符串，可使用该属性对当前文档的 cookie 进行读取、创建、修改和删除操作。
(3)domain:可返回下载当前文档的服务器域名。
语法：

document.domain

说明：该属性是一个只读的字符串，包含了载入当前文档的 web 服务器的主机名。
(4)lastModified:返回文档最后被修改的日期和时间。
语法：

document.lastModified

说明：该值来自于 Last-Modified HTTP 头部，它是由 Web 服务器发送的可选项。
(5)referrer:返回载入当前文档的文档的 URL。
语法：

document.referrer

说明：如果当前文档不是通过超级链接访问的，则为 null。这个属性允许客户端 JavaScript 访问 HTTP 引用头部。
(6)title:返回当前文档的标题。
语法：

document.title

(7)URL:返回当前文档的 URL。
语法：

document.URL

说明：一般情况下，该属性的值与包含文档的 Window 的 location.href 属性相同。不过，在 URL 重定向发生的时候，这个 URL 属性保存了文档的实际 URL，而 location.href 保存了请求的 URL。

Document 对象的方法：
(1)close():关闭用 document.open() 方法打开的输出流，并显示选定的数据。
语法：

document.close()

说明：该方法将关闭 open() 方法打开的文档流，并强制地显示出所有缓存的输出内容。如果您使用 write() 方法动态地输出一个文档，必须记住当你这么做的时候要调用 close() 方法，以确保所有文档内容都能显示。一旦调用了 close()，就不应该再次调用 write()，因为这会隐式地调用 open() 来擦除当前文档并开始一个新的文档。
(2)getElementById():返回对拥有指定 id 的第一个对象的引用。
说明：HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。不过，如果您需要查找文档中的一个特定的元素，最有效的方法是 getElementById()。在操作文档的一个特定的元素时，最好给该元素一个 id 属性，为它指定一个（在文档中）唯一的名称，然后就可以用该 ID 查找想要的元素。
举例1：


<html>

<head>

<script type="text/javascript">

function getValue()

  {

  var x=document.getElementById("myHeader");

  alert(x.innerHTML);

  }

</script>

</head>

<body>

<h1 id="myHeader" onclick="getValue()">这是一个标题</h1>

<p>点击标题弹出消息框</p>

</body>

</html>

举例2：定义了一个工具函数，这样您就可以通过一个较短的名字来使用 getElementById() 方法了。

function id(x) {

  if (typeof x == "string") return document.getElementById(x);

  return x;

  }

上面这个函数接受元素 ID 作为它们的参数。对于每个这样的参数，您只要在使用前编写 x = id(x) 就可以了。
(3)getElementsByName():返回带有指定名称的对象集合。
语法：

document.getElementsByName(name)

说明：该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。另外因为一个文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

(4)getElementsByTagName():返回带有指定标签名的对象集合。
语法：

document.getElementsByTagName(tagname)

说明：getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。
注释：传递给 getElementsByTagName() 方法的字符串可以不区分大小写。
比如：var x=document.getElementsByTagName("input");//<input name="myInput" type="text" size="20" />

可以用 getElementsByTagName() 方法获取任何类型的 HTML 元素的列表:
比如：获取文档中所有的表

var tables = document.getElementsByTagName("table");

alert ("This document contains " + tables.length + " tables");

也可以使用 getElementsByTagName() 方法获取文档中的一个特定的元素。
比如：获得文档中的第四个段落。

var myParagragh = document.getElementsByTagName("p")[3];

(5)open()：打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
语法：

document.open(mimetype,replace)

参数：mimetype：规定正在写的文档的类型。默认值是 "text/html"。replace：当此参数设置后，可引起新文档从父文档继承历史条目。
说明一：该方法将擦除当前 HTML 文档的内容，开始一个新的文档，新文档用 write() 方法或 writeln() 方法编写。
说明二：调用 open() 方法打开一个新文档并且用 write() 方法设置文档内容后，必须记住用 close 方法关闭文档，并迫使其内容显示出来。

(6)write():向文档写 HTML 表达式 或 JavaScript 代码。
语法：

document.write(exp1,exp2,exp3,.)

我们通常按照两种的方式使用 write() 方法：
一是在使用该方在文档中输出 HTML，另一种是在调用该方法的的窗口之外的窗口、框架中产生新文档。在第二种情况中，请务必使用 close() 方法来关闭文档。

(7)writeln()：与 write() 方法作用相同，外加可在每个表达式后写一个换行符。
注释：在编写 <pre> 标记的内容时，该方法很有用。

原文链接：https://www.cnblogs.com/codeshark/archive/2008/07/17/1245142.html

HTML中 DOM操作的Document 对象详解(收藏)的更多相关文章

  1. JavaScript（四）——DOM操作——Window.document对象

    一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:    var a =docunment.getElementById(&qu ...

  2. 转-JS中document对象详解

    对象属性 document.title //设置文档标题等价于HTML的<title>标签 document.bgColor //设置页面背景色 document.fgColor //设置 ...

  3. JavaScript——DOM操作——Window.document对象

    一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:    var a =docunment.getElementById(&qu ...

  4. JS中document对象详解

    转自:http://www.cnblogs.com/andycai/archive/2010/06/29/1767351.html 对象属性 document.title //设置文档标题等价于HTM ...

  5. jQuery 源码解析(二十四) DOM操作模块 包裹元素 详解

    本节说一下DOM操作模块里的包裹元素子模块,该模块可将当前匹配的元素替换指定的DOM元素,有如下方法: wrap(html)               ;在每个匹配元素的外层添加一层DOM元素   ...

  6. jQuery 源码解析(二十三) DOM操作模块 替换元素 详解

    本节说一下DOM操作模块里的替换元素模块,该模块可将当前匹配的元素替换指定的DOM元素,有两个方法,如下: replaceWith(value)     ;使用提供的新内容来替换匹配元素集合中的每个元 ...

  7. jQuery 源码解析(二十二) DOM操作模块 复制元素 详解

    本节说一下DOM操作模块里的复制元素子模块,该模块可以复制一个DOM节点,并且可选择的设置是否复制其数据缓存对象(包含事件信息)和是否深度复制(子孙节点等),API如下: $.clone(elem, ...

  8. jQuery 源码分析(二十一) DOM操作模块 删除元素 详解

    本节说一下DOM操作模块里的删除元素模块,该模块用于删除DOM里的某个节点,也可以理解为将该节点从DOM树中卸载掉,如果该节点有绑定事件,我们可以选择保留或删除这些事件,删除元素的接口有如下三个: e ...

  9. jQuery 源码分析(二十) DOM操作模块 插入元素 详解

    jQuery的DOM操作模块封装了DOM模型的insertBefore().appendChild().removeChild().cloneNode().replaceChild()等原生方法.分为 ...

随机推荐

  1. JDK8 Lamdba表达式转换成Map，value为null问题

    // 将list转换成Map类型 Map<String, String> map = list.stream().collect(Collectors.toMap(Person::getI ...

  2. 注册CSDN账号的尴尬

    因为新浪博客这里代码显示不大好用,打算把关于编程和应用开发的东西改到那里去写,可是点击注册....   竟然要输入手机号,无法跳过.... 要知道,楼主现在可是在国外,压根没有可用于注册的手机号啊.. ...

  3. 算法学习--Day3

    今天搞了一波算法的哈希,代码难道不大,记录在这里吧. 题目描述     “臭味相投”——这是我们描述朋友时喜欢用的词汇.两个人是朋友通常意味着他们存在着许多共同的兴趣.然而作为一个宅男,你发现自己与他 ...

  4. Educational Codeforces Round 21 D - Array Division （前缀和+二分）

    传送门 题意 将n个数划分为两块,最多改变一个数的位置, 问能否使两块和相等 分析 因为我们最多只能移动一个数x,那么要么将该数往前移动,要么往后移动,一开始处理不需要移动的情况 那么遍历sum[i] ...

  5. BestCoder Round #74 (div.1) 1002Shortest Path（hdoj5636）

    哈哈哈哈,我就知道这道题目再扔给我,我还是不会,就是这么菜,哈哈哈 一开始官方题解就没搞懂-然后就看了一下别人的代码,水水过就算了.今天拿到-GG: 题意: 一开始,有一张原图,有一条长度为n的链. ...

  6. 基于FBX SDK的FBX模型解析与加载 -（一）

    http://blog.csdn.net/bugrunner/article/details/7210511 1. 简介 FBX是Autodesk的一个用于跨平台的免费三维数据交换的格式(最早不是由A ...

  7. jsp 接收汉字参数乱码

    这两天跟汉字问题较上劲了,真是考验基本功 1.  ${param.userName} 乱码 解决方法: <%String name = (String)request.getParameter( ...

  8. UVA - 11082 Matrix Decompressing

    2. B - Matrix Decompressing 题意:定义一个R*C的正整数矩阵(1<=R,C<=20),设Ai为前i行所有元素之和,Bi为前i列所有元素之和. 题目已知R,C和数 ...

  9. 利用VS自带的dotfuscator混淆代码的学习

    对于一些原创的敏感代码,我们可以通过简单的重命名混淆使得别人难以真正理解执行原理.这一点,使用VS自带的dotfuscator即可实现. 如上图所示,你可以自定义选择哪些类被排除重命名,内置的规则中, ...

  10. 日历 php

    <?php $year=@$_GET['year']; //获得地址栏的年份 $month=@$_GET['month']; //获得地址栏的月份 if(empty($year)) $year= ...