泉州浮桥网页设计培训班实例笔记HTML DOM 实例(二)-Document 对象

泉州浮桥网页设计培训班实例笔记HTML DOM 实例(二)-Document 对象

Document 对象

使用 document.write() 向输出流写文本

<html><body>

<script type=”text/javascript”>

document.write(“Hello World!”)

</script>

</body></html>

使用 document.write() 向输出流写 HTML

<html><body>

<script type=”text/javascript”>

document.write(“<h1>Hello World!</h1>”)

</script>

</body></html>

返回当前文档的标题

<html><head>

<title>My title</title>

</head>

<body>

该文档的标题是:

<script type=”text/javascript”>

document.write(document.title)

</script>

</body></html>

返回当前文档的 URL

<html><body>

该文档的 URL 是:

<script type=”text/javascript”>

document.write(document.URL)

</script>

</body></html>

返回当前文档的 referrer

<html><body>

<p>referrer 属性返回加载本文档的文档的 URL。</p>

本文档的 referrer 是:

<script type=”text/javascript”>

document.write(document.referrer)

</script>

</body></html>

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

<html><body>

本文档的域名是:

<script type=”text/javascript”>

document.write(document.domain)

</script>

</body></html>

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

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

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

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

返回文档中锚的数目

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

返回文档中第一个锚的 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>

计算文档中表单的数目

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

访问集合中的项目

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

计算文档中的图像数目

<html><body>

<img border=”0″ src=”/i/eg_smile.gif” />

<br />

<img border=”0″ src=”/i/eg_mouse.jpg” />

<br /><br />

<script type=”text/javascript”>

document.write(“本文档包含:” + document.images.length + ” 幅图像。”)

</script>

</body></html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注