JS HTML DOM ---document对象

最新推荐文章于 2024-07-02 08:55:42 发布

望望byte

最新推荐文章于 2024-07-02 08:55:42 发布

阅读量185

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript html

原文链接：https://www.w3school.com.cn/jsref/dom_obj_document.asp

版权

JavaScript学习笔记专栏收录该内容

71 篇文章 0 订阅

订阅专栏

document对象

定义：
每个载入浏览器的 HTML 对象都将是 Document 对象
用途：
实现从脚本对HTML页面中所有元素进行访问
tips：
Window对象是Document对象的父级，

Document 对象集合

集合–all[]

all 集合返回对文档中所有 HTML 元素的引用。
all[] 是一个多功能的类似数组的对象，它提供了对文档中所有 HTML 元素的访问。

all[] 数组源自 IE 4 并且已经被很多其他的浏览器所采用。

语法：

document.all[i]
document.all[name]
document.all.tags[tagname]

all[] 已经被 Document 接口的标准的 getElementById() 方法和 getElementsByTagName() 方法以及 Document 对象的 getElementsByName() 方法所取代。尽管如此，这个 all[] 数组在已有的代码中仍然使用。
all[] 包含的元素保持了最初的顺序，如果你知道它们在数组中的确切数字化位置，可以直接从数组中提取它们。
然而，更为常见的是使用 all[] 数组，根据它们的 HTML 属性 name 或 id 来访问元素。
如果多个元素拥有指定的 name，将得到共享同一名称的元素的一个数组。

集合 --anchors[]

anchors集合可返回对文档中所有 Anchor对象的引用
实例：

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

集合–forms[]

返回对文档中所有 Form对象引用
实例：

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

集合–images[]

返回对文档中所有 Image对象引用

注释：
为了与 0 级 DOM 兼容，该集合不包括由 <object> 标记定义的图像。
实例：

<html>

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

<script type="text/javascript">
document.write("This document contains: ")
document.write(document.images.length + " images.")
</script>
</body>

</html>

集合–links[]

返回文档中所有Area 和link对象引用
实例：

<html>
<body>

<img src="planets.gif" 
width="145" height="126" 
usemap="#planetmap" />

<map name="planetmap">
<area id="venus" shape="circle" 
coords="124,58,8" 
alt="Venus"
href="venus.htm" />
</map>
<br />

Number of links in this document:
<script type="text/javascript">
document.write(document.links.length)
</script>

</body>
</html>

Document对象属性

属性–body

提供对<body>元素的直接访问
对于定义可框架集的文档，该属性引用最外层的

属性–cookie

设置或返回与当前文档有关的所有cookie

说明
该属性是一个可读可写的字符串，可使用该属性对当前文档的 cookie 进行读取、创建、修改和删除操作。

提示：
该属性的行为与普通的读/写属性是不同的。
实例：
返回与当前文档相关的cookie

document.write(document.cookie)

属性–domain

domain 属性可返回下载当前文档的服务器域名。
说明
该属性是一个只读的字符串，包含了载入当前文档的 web 服务器的主机名。
提示：
domain 属性可以解决因同源安全策略带来的不同文档的属性共享问题。
实例：

<html>
<body>

本文档的域名是：
<script type="text/javascript">
document.write(document.domain)
</script>

</body>
</html>

在这里插入图片描述

属性–lastModified

lastModified 属性可返回文档最后被修改的日期和时间。
说明
该值来自于 Last-Modified HTTP 头部，它是由 Web 服务器发送的可选项。
实例：

document.write(document.lastModified)

属性–referrer

referrer 属性可返回载入当前文档的文档的 URL。
说明
如果当前文档不是通过超级链接访问的，则为 null。
这个属性允许客户端 JavaScript 访问 HTTP 引用头部。

属性–title

title 属性可返回当前文档的标题（ HTML title 元素中的文本）。

<html>
<head>
<title>My title</title>
</head>

<body>
The title of the document is: 
<script type="text/javascript">
document.write(document.title)
</script>
</body>

</html>

属性–URL

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

Document对象方法

方法–open（）

打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
open() 方法可打开一个新文档，并擦除当前文档的内容。
语法：

document.open(mimetype,replace)
//参数： 
// mimetype:可选，规定正在写的文档的类型。默认值是“text/html”
//replace:可选，当此参数设置后，可引起新文档从父文档继承历史条目
//说明：
//该方法将擦除当前 HTML 文档的内容，开始一个新的文档，新文档用 write() 方法或 writeln() 方法编写。

重要事项：
调用 open() 方法打开一个新文档并且用 write() 方法设置文档内容后，必须记住用 close 方法关闭文档，并迫使其内容显示出来。

注释：
属于被覆盖的文档的一部分的脚本或事件句柄不能调用该方法，因为脚本或事件句柄自身也会被覆盖。

实例

<html>
<head>
<script type="text/javascript">
function createNewDoc()
  {
  var newDoc=document.open("text/html","replace");
  var txt="<html><body>Learning about the DOM is FUN!</body></html>";
  newDoc.write(txt);
  newDoc.close();
  }
</script>
</head>
<body>

<input type="button" value="Write to a new document"
onclick="createNewDoc()">

</body>
</html>

方法–close（）

close() 方法可关闭一个由 document.open 方法打开的输出流，并显示选定的数据。
说明
该方法将关闭 open() 方法打开的文档流，并强制地显示出所有缓存的输出内容。如果您使用 write() 方法动态地输出一个文档，必须记住当你这么做的时候要调用 close() 方法，以确保所有文档内容都能显示。

一旦调用了 close()，就不应该再次调用 write()，因为这会隐式地调用 open() 来擦除当前文档并开始一个新的文档。

方法–write（）

write() 方法可向文档写入 HTML 表达式或 JavaScript 代码。

可列出多个参数(exp1,exp2,exp3,…) ，它们将按顺序被追加到文档中。

语法

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

说明
虽然根据 DOM 标准，该方法只接受单个字符串作为参数。不过根据经验，write() 可接受任何多个参数。

我们通常按照两种的方式使用 write() 方法

使用该方法在文档中输出 HTML
在调用该方法的的窗口之外的窗口、框架中产生新文档。在第二种情况中，请务必使用 close() 方法来关闭文档。

document.write("Hello World! ","Hello You! ","<p style='color:blue;'>Hello World!</p>")

方法–writeln()

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

方法–getElementById()

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
getElementById() 是一个重要的方法，在 DOM 程序设计中，它的使用非常常见。我们为您定义了一个工具函数，这样您就可以通过一个较短的名字来使用 getElementById() 方法了：

function id(x) {
  if (typeof x == "string") return document.getElementById(x);
  return x;
  }

上面这个函数接受元素 ID 作为它们的参数。对于每个这样的参数，您只要在使用前编写 x = id(x) 就可以了。

方法–getElementsByName()

getElementsByName() 方法可返回带有指定名称的对象的集合。
该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。

另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。\

方法–getElementsByTagName()

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
说明
getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。

如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。

注释：
传递给 getElementsByTagName() 方法的字符串可以不区分大小写。

Document对象描述

HTMLDocument 接口对 DOM Document 接口进行了扩展，定义 HTML 专用的属性和方法。

很多属性和方法都是 HTMLCollection 对象（实际上是可以用数组或名称索引的只读数组），其中保存了对锚、表单、链接以及其他可脚本元素的引用。

这些集合属性都源自于 0 级 DOM。它们已经被 Document.getElementsByTagName() 所取代，但是仍然常常使用，因为他们很方便。
write() 方法值得注意，在文档载入和解析的时候，它允许一个脚本向文档中插入动态生成的内容。
注意，在 1 级 DOM 中，HTMLDocument 定义了一个名为 getElementById() 的非常有用的方法。
- 在 2 级 DOM 中，该方法已经被转移到了 Document 接口，它现在由 HTMLDocument 继承而不是由它定义了。

望望byte

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS HTML DOM ---document对象

document对象定义：每个载入浏览器的 HTML 对象都将是 Document 对象用途：实现从脚本对HTML页面中所有元素进行访问tips：Window对象是Document对象的父级，Document 对象集合集合–all[]all 集合返回对文档中所有 HTML 元素的引用。all[] 是一个多功能的类似数组的对象，它提供了对文档中所有 HTML 元素的访问。all[] 数组源自 IE 4 并且已经被很多其他的浏览器所采用。语法：document.all[i]
复制链接

扫一扫