`
buliangniu
  • 浏览: 92269 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Document对象用法

阅读更多

1、返回当前文档标题

 

<html>
<head>
    <title>My title</title>
</head>
<body>
    该文档的标题是:

    <script type="text/javascript">
        document.write(document.title) //返回当前文档的标题 
    </script>

</body>
</html>

 

2、返回当前文档的URL

 

<html>
<head>
    <title>返回当前文档的URL</title>
</head>
<body>
    该文档的URL是:

    <script type="text/javascript">
        document.write(document.URL) //返回当前文档的URL
    </script>

</body>
</html>

  

3、属性返回加载本文档的文档的URL

 

<html>
<head>
    <title>referrer 属性返回加载本文档的文档的 URL</title>
</head>
<body>
    本文档的 referrer 是:

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

</body>
</html>

 

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

 

<html>
<head>
    <title>返回下载当前文档的服务器域名</title>
</head>
<body>
    本文档的域名是:

    <script type="text/javascript">
        document.write(document.domain) //返回下载当前文档的服务器域名
    </script>

</body>
</html>

 

5、使用getElementById()

<html>
<head>
    <title>使用getElementById()</title>

    <script type="text/javascript">
        function getValue()
        {
            var x=document.getElementById("myHeader") //通过ID得到元素
            alert(x.innerHTML)
        }
    </script>

</head>
<body>
    <h1 id="myHeader" onclick="getValue()">
        这是一个标题</h1>
    <p>
        点击标题,会提示出它的值。</p>
</body>
</html>

 

6、使用getElementsByName()

<html>
<head>
    <title>使用 getElementsByName()</title>

    <script type="text/javascript">
        function getElements()
        {
            var x=document.getElementsByName("myInput"); //通过Name得到元素
            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>

 

7、返回文档中锚的数目

<html>
<head>
    <title>返回文档中锚的数目</title>
</head>
<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>

 

8、返回文档中第一个锚的innerHTML

<html>
<head>
    <title>返回文档中第一个锚的innerHTML</title>
</head>
<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) //返回文档中第一个锚innerHTML
    </script>

</body>
</html>

 

9、计算文档中表单的数目

<html>
<head>
    <title>计算文档中表单的数目</title>
</head>
<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>

 

10、计算文档中的图像数目

<html>
<head>
    <title>计算文档中的图像数目</title>
</head>
<body>
    <img border="0" src="/01.jpg" />
    <br />
    <img border="0" src="/02.jpg" />
    <br />
    <br />

    <script type="text/javascript">
        document.write("本文档包含:" + document.images.length + " 幅图像。") //计算文档中的图像数目
    </script>

</body>
</html>

 

分享到:
评论

相关推荐

    javascript document 对象的用法大全

    ### JavaScript Document 对象详解 #### 一、Document 对象简介 在Web开发中,`document`对象是浏览器提供的一种能够操作HTML文档的方式。...掌握这些API的使用方法对于提高Web开发效率具有重要意义。

    Document对象

    假设有一个包含多个表单的文档,我们可以使用Document对象的`getElementsByTagName()`方法来获取所有`&lt;form&gt;`元素的集合,然后进一步操作这些表单。以下是一个示例: ```javascript var forms = document....

    什么是document对象?什么是window对象?.pdf

    document对象提供了一系列的属性和方法来操作文档中的内容。 例如,document.location可以获取或设置当前窗口文档的URL。location属性属于window对象,但window和document在DOM结构中是紧密关联的。document.write...

    JavaScript中document用法小结

    JavaScript 中 document 对象用法小结 JavaScript 中的 document 对象是一个非常重要的对象,它提供了大量的属性和方法来操作 HTML 文档。下面是对 document 对象的一些常用属性和方法的总结。 属性 1. `document...

    javascript的document对象

    #### Document对象的方法 - **document.write()**:向文档写入指定的文本。常用于调试或简单的动态内容生成。 - **document.createElement(Tag)**:创建一个新的HTML元素。其中`Tag`参数为元素的标签名,如“div”...

    javascript document对象详细介绍

    ### JavaScript Document对象详解 #### 一、概述 在Web开发中,`document`对象是浏览器提供的核心对象之一,它代表了当前加载的HTML文档,并且提供了访问和操作文档中的元素和内容的方法。通过`document`对象,...

    jQuery获取iframe的document对象的方法

    这里,`#myframe`是`iframe`的ID,`prop('contentWindow')`返回的是`iframe`的窗口对象,而`window`对象在JavaScript中包含了`document`属性,所以通过`.document`可以获取到`iframe`内部的`document`对象。...

    javascript-document对象详解(下).zip

    其次,`29.javascript-document对象详解(下).txt`很可能是文档的文本版,详细解释了`document`对象的更多高级特性和方法。这可能包括`document.querySelector`和`document.querySelectorAll`,它们分别用于选择匹配...

    document对象内容集合.txt

    在给定的文件“document对象内容集合.txt”中,我们深入探讨了与DOM相关的多个知识点,包括其属性、方法以及如何通过JavaScript来操作DOM元素。 ### DOM基本概念 DOM是一种标准,用于表示和交互HTML或XML文档中的...

    第8章+Document对象.pdf

    - **获取元素**: 使用Document对象可以轻松获取HTML文档中的各种元素,例如通过`document.getElementById()`或`document.getElementsByTagName()`方法。 - **修改内容**: 开发者可以通过Document对象修改HTML元素的...

    DOM中document文档对象常用方法

    DOM中document文档对象常用方法.为网页版。打开后,右击查看元素或源码,ok建议使用火狐,谷歌浏览器,ie

    第14章 Document对象

    以下是一个简单的示例,展示了如何使用Document对象的 `open()`、`writeln()` 和 `close()` 方法来动态生成HTML文档内容: ```html &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...

    Javascript的document对象

    通过理解和熟练使用`document`对象及其子对象和方法,开发者能够实现丰富的动态网页效果和用户交互。在实际的Web开发中,结合CSS和DOM操作,`document`对象成为了构建交互式和响应式页面的核心。

    Document对象格式化后输出String

    根据给定的信息,本文将详细解释如何在Java环境中利用dom4j库将Document对象格式化为易读的String形式,并探讨其中涉及的关键概念和技术细节。 ### dom4j库简介 dom4j(Document Object Model for XML)是一款Java...

    DOCUMENT的对象操作

    - 通过`document.getElementsByTagName`, `document.getElementsByClassName`, `document.querySelector`和`document.querySelectorAll`等方法,可以遍历和操作文档对象模型(DOM),找到并修改HTML元素。...

    js关于document和window对象

    document 对象的方法包括: * clear:清除指定文档的内容 * close:关闭文档流 * open:打开文档流 * write:把文本写入文档 * writeln:把文本写入文档,并以换行符结尾 window 对象 window 对象是一个顶层对象...

    JS document对象简单用法完整示例

    本篇文章将详细讲解`document`对象的一些基础用法,包括直接和间接获取页面元素的方法。 1. **直接获取对象** - `getElementById()`:通过元素的ID获取特定元素。例如: ```javascript var element = document....

    JavaScript的document对象和window对象详解

    document对象还具有操作文档内容的方法,如clear()、open()、close()和write(),这些方法可以清除文档内容、打开文档流、关闭文档流以及向文档中写入内容。需要注意的是,document.location实际上是一个Location对象...

    javascript 的document对象

    以下是对 `document` 对象及其相关属性和方法的详细说明: 1. **文档属性**: - `document.title`: 设置或获取当前页面的标题,对应于HTML中的`&lt;title&gt;`标签。 - `document.bgColor`: (过时) 设置页面的背景色,...

    脚本中Document对象内容集合介绍

    下面我们将详细介绍`Document`对象的一些关键属性、方法和事件。 ### 1. 属性 - `document.title`: 用于设置或获取当前页面的标题,对应HTML中的`&lt;title&gt;`标签。 - `document.bgColor`, `document.fgColor`, `...

Global site tag (gtag.js) - Google Analytics