js手册学习--Document 对象

来源：互联网发布：智多星软件多少钱编辑：程序博客网时间：2024/06/03 04:46

转载：http://www.w3school.com.cn/js/index.asp

1.1

<html><body><script type="text/javascript">document.write("Hello World!")</script></body></html>

输出：

Hello World!

1.2

<html><body><script type="text/javascript">document.write("<h1>Hello World!</h1>")</script></body></html>

输出：

Hello World!

2.1返回当前文档的标题

<html><head><title>My title</title></head><body>该文档的标题是：<script type="text/javascript">document.write(document.title)</script></body></html>

输出：

该文档的标题是：My title

3.1返回当前文档的 URL

<html><body>该文档的 URL 是：<script type="text/javascript">document.write(document.URL)</script></body></html>

输出：

该文档的 URL 是：http://www.w3school.com.cn/tiy/loadtext.asp?f=hdom_document_url

4.1返回当前文档的 referrer

<html><body><p>referrer 属性返回加载本文档的文档的 URL。</p>本文档的 referrer 是：<script type="text/javascript">document.write(document.referrer)</script></body></html>

输出：

referrer 属性返回加载本文档的文档的 URL。

本文档的 referrer 是：http://www.w3school.com.cn/tiy/t.asp?f=hdom_document_referrer

5.1返回下载当前文档的服务器域名

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

输出：

本文档的域名是：www.w3school.com.cn

6.1使用 getElementById()

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

输出：

这是标题

点击标题，会提示出它的值。

7.1使用 getElementsByName()

<html><head><script type="text/javascript">function getElements()  {  var x=document.getElementsByName("myInput");  alert(x.length);  }</script></head><body><input name="myInput" type="text" size="20" /><br /><input name="myInput" type="text" size="20" /><br /><input name="myInput" type="text" size="20" /><br /><br /><input type="button" onclick="getElements()" value="名为 'myInput' 的元素有多少个？" /></body></html>

8.1打开一个新的文档，添加一些文本，然后关闭它。

<html><head><script type="text/javascript">function createNewDoc()  {  var newDoc=document.open("text/html","replace");  var txt="<html><body>学习 DOM 非常有趣！</body></html>";  newDoc.write(txt);  newDoc.close();  }</script></head><body><input type="button" value="打开并写入一个新文档" onclick="createNewDoc()"></body></html>

9.1返回文档中锚的数目

<html><body><a name="first">第一个锚</a><br /><a name="second">第二个锚</a><br /><a name="third">第三个锚</a><br /><br />文档中锚的数目：<script type="text/javascript">document.write(document.anchors.length)</script></body></html>

输出：

第一个锚
第二个锚
第三个锚

文档中锚的数目：3

10.1返回文档中第一个锚的 innerHTML

<html><body><a name="first">第一个锚</a><br /><a name="second">第二个锚</a><br /><a name="third">第三个锚</a><br /><br />本文档中第一个锚的 InnerHTML 是：<script type="text/javascript">document.write(document.anchors[0].innerHTML)</script></body></html>

输出：

第一个锚
第二个锚
第三个锚

本文档中第一个锚的 InnerHTML 是：第一个锚

11.1计算文档中表单的数目

<html><body><form name="Form1"></form><form name="Form2"></form><form name="Form3"></form><script type="text/javascript">document.write("文档包含： " + document.forms.length + " 个表单。")</script></body></html>

输出：、

文档包含： 3 个表单。

12.1访问集合中的项目

<html><body><form id="Form1" name="Form1">您的姓名：<input type="text"></form><form id="Form2" name="Form2">您的汽车：<input type="text"></form><p>要访问集合中的项目，你既可以使用项目编号，也可以使用项目名称：</p><script type="text/javascript">document.write("<p>第一个表单名称是：" + document.forms[0].name + "</p>")document.write("<p>第一个表单名称是：" + document.getElementById("Form1").name + "</p>")</script></body></html>

输出：

要访问集合中的项目，你既可以使用项目编号，也可以使用项目名称：

第一个表单名称是：Form1