javascript通过Document类型来表示文档。在浏览器中document是HTMLDocument对象（继承自Document）的一个实例，表示整个html页面。而且在浏览器中document对象还是window对象的一个属性，因此可以作为全局属性来用

Document节点具有下列特征：

nodeType=9

nodeName=”#document”

nodeValue=null

parentNode=null

ownerDocument=null

其子节点可以使DocumentType类型（仅允许1个），Element（最多1个），ProcessingInstruction，Comment。<html>就是文档中Document类型节点的子节点

Document表示HTML或其他XML文档。最常见的还是作为HTMLDocument实例的document对象，通过该文档对象，不仅可以操作页面信息，还可以操作页面外观及背景结构。

1、文档子节点：DocumentType类型（仅允许1个），Element（最多1个），ProcessingInstruction，Comment。有两个内置访问子节点的属性

documentElement属性，该属性始终指向当前文档的<html>节点

childNodes属性，访问文档子节点。显然在文档中childNodes列表下只有一个html元素

作为HTMLDocument的实例，document还有一个始终指向<body>的属性：document.body;

  1. alert(document.body.nodeName);//BODY

输出BODY，通过document对象指向body。

Document另一个可能的子节点为DocumentType。通常将<!DOCTYPE>标签看成一个与文档其他部分不同的实体，通过document的doctype属性来访问它的信息。//不同浏览器对该属性的支持不同

2、文档信息

document作为HTMLDocument的对象，还有一些特有的属性。

title属性：包含着title中的文本。可以使用document.title来修改标题内容，这样只会在浏览器显示中修改，而实际文档中的内容则不变

url属性：完整的URL，地址栏中显示的url。

domain属性：只包含页面的域名

referrer属性：包含着链接到当前页面的来源页面的url，如果当前页是起始页，则为空字符串 

  1. <html>
  2.   <head>
  3.     <title>Test</title>
  4.   </head>
  5.   <body>
  6.     <p id="pd" name="test"><!--注释--></p>
  7.     <script type="text/javascript">
  8.       alert(document.title);//Test
  9.       var url=document.URL;
  10.       var domain=document.domain;
  11.       var referrer=document.referrer;
  12.       alert(url);//当前页面的存储位置
  13.       alert(domain);//空
  14.       alert(referrer);//空
  15.     </script>
  16.   </body>
  17. </html>

由于是静态页面，没有发布到服务器，所以域名和来源页的url都为空。

3、查找元素

最常见的DOM应用就是获取对元素的引用，关于对元素的引用Domcument类型提供了两个方法：getElementById()和getElementByTagName()

getElementById()方法接收一个参数ID，如果找到相应的ID则返回元素，否则返回null。id即为页面元素的id属性。

getElementsByTagName()方法接收一个参数标签名，返回的是包含零个或多个元素的NodeList。在HTML文档中，该方法返回一个HTMLCollection对象，该对象和NodeList很类似。 

  1. <p id="pd" name="test">no.1</p>
  2.     <p id="pt">no.2</p>
  3.     <script type="text/javascript">
  4.       alert(document.getElementById("pd").firstChild.nodeValue);//no.1
  5.       alert(document.getElementById("pt").firstChild.nodeValue);//no.2
  6.  
  7.       var pList=document.getElementsByTagName("p");
  8.       for(var i=0;i<pList.length;i++)
  9.       {
  10.         alert(pList.item(i).firstChild.nodeValue);
  11.       }//no.1
  12.       //no.2
  13.     </script>

4、特殊集合

document还有一些特殊的集合，这些集合都是HTMLCollection类型：

document.anchors//返回文档中所有带name属性的<a>元素

document.forms//返回文档中所有<form>元素

document.images//返回文档中的所有<image>元素

document.links//返回所有带href属性的<a>元素

这些元素始终可以通过HTMLDocument对象访问到。

5、一致性检测

检测浏览器实现了DOM的那些部分，可以通过document.implementation属性，DOM1为该属性定义了一个方法hasFeature(),接收两个参数，要检测的DOM功能的名称及其版本号，如果支持返回true。

  1. alert(document.implementation.hasFeature("XML","1.0"));//true

6、文档写入

document具有将输出流写入到文档中去。实现这个功能的方法有write(),writeln(),open(),close().

write()和writeln()方法接收一个字符串参数，表示写入到文档的字符串，writeln多一个回车符。不能直接写入”</script>”，会直接导致结束。

open()和close()分别用于打开和关闭文档输出流。

javascript之DOM(二Document对象)的更多相关文章

  1. 【JavaScript】DOM之Document对象

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

  2. javascript中window与document对象、setInterval与setTimeout定时器的用法与区别

    一.写在前面 本人前端菜鸟一枚,学习前端不久,学习过程中有很多概念.定义在使用时容易混淆,在此给向我一样刚踏入前端之门的童鞋们归纳一下.今天给大家分享一下js中window与document对象.se ...

  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. Css、javascript、dom(二)

    一.css常用标签及页面布局 1.常用标签 position(定位) z-index(定位多层顺序) background(背景) margin(外边距) padding(内边距) font-size ...

  7. JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  8. HTML DOM 实例-Document 对象

    使用 document.write() 向输出流写文本 <html><body><script type="text/javascript">d ...

  9. JavaScript学习总结二(Date对象的用法)

    javascript Date对象的常用API 1:创建日期 Date 对象用于处理日期和时间. 可以通过 new 关键词来定义 Date 对象.以下代码定义了名为 myDate 的 Date 对象: ...

随机推荐

  1. MySQL实战45讲学习笔记：第十二讲

    一.引子 平时的工作中,不知道你有没有遇到过这样的场景,一条 SQL 语句,正常执行的时候特别快,但是有时也不知道怎么回事,它就会变得特别慢,并且这样的场景很难复现,它不只随机,而且持续时间还很短. ...

  2. js中的require、define、export、import【转】

    原文链接:https://www.cnblogs.com/libin-1/p/7127481.html 为什么有模块概念 理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. ...

  3. python脚本生成exe程序

    去年十一月换了新公司后,一直没闲着,马不停蹄地接不同的需求,一个版本一个版本的迭代,也没时间研究python了.十一休假归来,某日,老婆问金融量化需要学python吗?并分享了一个公众号文章,内容是吹 ...

  4. Java中HashMap和TreeMap的区别

    什么是Map集合在数组中我们是通过数组下标来对其内容索引的,而在Map中我们通过对象来对对象进行索引,用来索引的对象叫做key,其对应的对象叫做value.这就是我们平时说的键值对. HashMap ...

  5. nodejs的child_process

    child_process  模块提供了衍生子进程的能力 异步方式:spawn.exec.execFile.fork 同步方式:spawnSync.execSync.execFileSync 说明: ...

  6. Spring Boot 代码覆盖率测试

    代码覆盖率测试是规范软件开发流程里一个必不可少的环节.一般都是在PG末尾阶段,伴随着IT自测产生. ↑以上,是自己yy出来的啊,反正我司是这样要求的.不跑覆盖率,鬼知道你在代码里夹杂了一些什么东西. ...

  7. 修！咻咻！团队Beta作业博客汇总

    作业描述 课程 软件工程1916|W(福州大学) 团队名称 修!咻咻! 作业要求 项目Beta冲刺(团队) 团队目标 切实可行的计算机协会维修预约平台 开发工具 Eclipse 团队信息 队员学号 队 ...

  8. Go排序练习

    1.插入排序 类似扑克起牌,每起一张牌都按大小将牌放到合适的位置 package main import "fmt" func insert(a []]int { for i := ...

  9. 自定义httpservletrequest解析参数

    3.添加参数解析器 4.注册

  10. Spring Cloud灰度发布之Nepxion Discovery

    <蓝绿部署.红黑部署.AB测试.灰度发布.金丝雀发布.滚动发布的概念与区别> 最近公司项目在做架构升级,升级为 Spring Cloud,我们希望能够做到服务的灰度发布,根据访问量逐渐切换 ...