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

HTML DOM 实例-Document 对象的更多相关文章

  1. javascript之DOM(二Document对象)

    javascript通过Document类型来表示文档.在浏览器中document是HTMLDocument对象(继承自Document)的一个实例,表示整个html页面.而且在浏览器中documen ...

  2. 【JavaScript】DOM之Document对象

    JS(JavaScript) 一.Document对象 1.Document对象是什么 Document对象 是DOM的基本规范也是重要的对象之一,以访问,更新页面内容的属性和方法通过conslie. ...

  3. HTML DOM部分---document对象;

    <style type="text/css"> #d3{ color:red} </style> </head> <body> &l ...

  4. DOM中document对象的常用属性方法

    每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.anchors  返 ...

  5. js基础之DOM中document对象的常用属性方法

    -----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.an ...

  6. dom对象详解--document对象(二)

       dom对象详解--style对象 style对象 style对象和document对象下的集合对象styleSheets有关系,styleSheets是文档中所有style对象的集合,这里讲解的 ...

  7. JavaScript之HTML DOM Document 对象

    文档对象代表您的网页. 如果您希望访问 HTML 页面中的任何元素,那么您总是从访问 document 对象开始. 下面是一些如何使用 document 对象来访问和操作 HTML 的实例. 查找 H ...

  8. 报表软件JS开发引用HTML DOM的location和document对象

    上一次提到,在报表软件FineReport的JavaScript开发中,可以访问并处理的HTML DOM对象有windows.location.document三种.这次就继续介绍后两种,locati ...

  9. HTML DOM Document 对象

    HTML DOM Document 对象 HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点: 文档是一个文档. 所有的HTML ...

随机推荐

  1. .Net MVC 导入导出Excel总结(三种导出Excel方法,一种导入Excel方法) 通过MVC控制器导出导入Excel文件(可用于java SSH架构)

    .Net MVC  导入导出Excel总结(三种导出Excel方法,一种导入Excel方法) [原文地址] 通过MVC控制器导出导入Excel文件(可用于java SSH架构)   public cl ...

  2. iOS开发UI篇—Quartz2D使用(信纸条纹)

    iOS开发UI篇—Quartz2D使用(信纸条纹) 一.前导程序 新建一个项目,在主控制器文件中实现以下几行代码,就能轻松的完成图片在视图中的平铺. #import "YYViewContr ...

  3. [Jquery]某宝图片轮播(无缝、带左右切换按钮)

    [效果] 左右移动(非渐隐) [思路] 1.结构与样式 ①最外层div盒子当容器,里面ul宽度无限大并且相对定位(到时候移动其实移的是ul的left) ②按钮的透明度可用background:rgba ...

  4. 内存管理单元(MMU)和协处理器CP15介绍(转)

    内存管理单元(MMU)和协处理器CP15介绍内存管理单元(MMU)介绍嵌入式系统中,存储系统差别很大,可包含多种类型的存储器件,如FLASH,SRAM,SDRAM,ROM等,这些不同类型的存储器件速度 ...

  5. ajax 创建对象验证

    function getValue(){ var str = $("#selectid option:selected").val(); //获得选中的值 var num = $( ...

  6. C++ 之 const 随笔记

    const关键字,相信对C语言有所了解的同学都应该知道他的作用:1.修饰常量,2.修饰指针,3.修饰函数 1.修饰常量 const修饰后的变量被定义为常量 2.修饰指针 当用const修饰指针的时候, ...

  7. ajaxsearch要点1

    ajaxsearch中必须将form的class定义为pagerForm,才能在foot中submit按钮得到值

  8. 用qpython3写一个最简单的发送短信的程序

    到目前为止并没有多少手机应用是用python开发的,不过qpython可以作为一个不错的玩具推荐给大家来玩. 写一个最简单的发送短信的程序,代码如下: #-*-coding:utf8;-*- #qpy ...

  9. ViewHolder简洁写法

    ViewHolder holder = null;         if(convertView == null){                 convertView = mInflater.i ...

  10. PHP fastcgi模式大文件上传500错误

    最近在项目中中上传图片时,大约有300多K,结果报了个服务器错误,以前从未遇到过,错误的内容如下: mod_fcgid: www.111cn.net HTTP request length 13229 ...