您的位置：首页 > Web前端 > JavaScript

js手册学习--Document 对象

2011-11-01 20:44 369 查看
转载：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

第一个表单名称是：Form1
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航