1. 概述
每个载入浏览器的 HTML 文档都会成为 Document 对象。 Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问
2. 常用属性
Cookie | 设置或返回当前文档有关的所有 Cookie |
---|---|
title | 返回当前文档的标题 |
URL | 返回当前文档的URL |
3. 常用方法
方法 | 说明 |
---|---|
close() | 关闭一个由 document.open 方法打开的输出流 |
getElementById() | 返回对拥有指定 ID 的第一个对象的引用 |
getElementsByName() | 方法可返回带有指定名称的对象的集合 |
getElementsByTagName() | 方法可返回带有指定标签名的对象的集合 |
write() | 方法可向文档写入 HTML 表达式或 JavaScript 代码 |
4. 示例
4.1 getElementByID() 方法
getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。语法是
document.getElementById(id)
如下图表示,通过ID获取值:
示例代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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>
4.2 getElementByName() 方法
getElementsByName() 方法可返回带有指定名称的对象的集合。该方法与 getElementById() 方法相似,但是它查询元素的 name 属性,而不是 id 属性。
因为一个文档中的 name 属性可能不唯一,所以 getElementsByName() 方法返回的是元素的数组,而不是一个元素。
4.3 getElementByTagName()方法
getElementsByTagName() 方法可返回带有指定标签名的对象的集合,返回元素的顺序是它们在文档中的顺序。
如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法,它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序。
传递给 getElementsByTagName() 方法的字符串可以不区分大小写。
4.4 write()方法
write() 方法可向文档写入 HTML 表达式或 JavaScript 代码。 可列出多个参数(exp1,exp2,exp3,...) ,它们将按顺序被追加到文档中。语法是:
document.write(exp1,exp2,exp3,....)
如下图所示,HTML中添加语句:
示例代码如下:
<html>
<body>
<script type="text/javascript">
document.write("Hello World! ","Hello You! ","<p style='color:blue;'>Hello World!</p>")
</script>
</body>
</html>