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;

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，如果当前页是起始页，则为空字符串 

<html>

  <head>

    <title>Test</title>

  </head>

  <body>

    <p id="pd" name="test"><!--注释--></p>

    <script type="text/javascript">

      alert(document.title);//Test

      var url=document.URL;

      var domain=document.domain;

      var referrer=document.referrer;

      alert(url);//当前页面的存储位置

      alert(domain);//空

      alert(referrer);//空

    </script>

  </body>

</html>

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

3、查找元素

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

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

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

<p id="pd" name="test">no.1</p>

    <p id="pt">no.2</p>

    <script type="text/javascript">

      alert(document.getElementById("pd").firstChild.nodeValue);//no.1

      alert(document.getElementById("pt").firstChild.nodeValue);//no.2

      var pList=document.getElementsByTagName("p");

      for(var i=0;i<pList.length;i++)

      {

        alert(pList.item(i).firstChild.nodeValue);

      }//no.1

      //no.2

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

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. 复杂模拟 | 1014 模拟K个同时到来的人在N个窗口，每个窗口只能站M个人的银行排队

    这题我以为还是之前银行排队的思路,但是做着做着就做不下去了了.看了答案我才理解到底是什么个思路. 是这样的:不同于之前排队的题,这里的K个人是同时到来的.所以首先应该让K个人的前N*M(也就是黄线内的 ...

  2. loj2305 NOI2017 游戏

    题目链接 思路 既然\(x\)的数量那么小,我们就可以先把每个\(x\)搜索一遍. 枚举x的时候不需要把\(a,b,c\)全枚举一遍,只要枚举其中的两个就可以枚举到当前位置选任何车的情况. 然后就变成 ...

  3. 第02组 Beta冲刺（3/4）

    队名:十一个憨批 组长博客 作业博客 组长黄智 过去两天完成的任务:了解整个游戏的流程 GitHub签入记录 接下来的计划:继续完成游戏 还剩下哪些任务:完成游戏 燃尽图 遇到的困难:没有美术比较好的 ...

  4. 本地手动一步步搭建WNMP环境(nginx+php+mysql) Windows平台

    环境:Windows 10 x64 参考文章: WNMP完整教程      windows下PHP环境的搭建 我自定义安装后的目录结构: +WNMP ++MySQL_Server-8.0.13 ++n ...

  5. java byte[]和base64互相转换

      1.方式一 import java.io.UnsupportedEncodingException; import java.util.Base64; // byte[]转base64 Strin ...

  6. ssm架构数据库连接字符串配置到外部报错

    报错: Could not load driverClass ${jdbc.driver} 解决办法: 将 <bean class="org.mybatis.spring.mapper ...

  7. Docker 镜像/容器操作命令

    一.镜像操作   1.拉取镜像 # docker pull tomcat # docker pull tomcat:8.0.21-jre8 # docker pull 192.168.220.150: ...

  8. pyqt中pyrcc和pyuic的使用

    一.pyrcc的使用 1.1 作用 将资源文件转换成py文件,并在主程序引入 1.2 资源文件编写说明 新建resource.qrc,代码如下: <!DOCTYPE RCC><RCC ...

  9. Unity调用windows系统dialog 选择文件夹

    #region 调用windows系统dialog 选择文件夹 [StructLayout(LayoutKind.Sequential, CharSet = CharSet.Auto)] public ...

  10. 单点登录（sso）入门

    单点登录的英文名叫做Single Sign On,简称SSO. 在以前,一般我们就单系统,所有的功能都在同一个系统上. 后来,我们为了合理利用资源和降低耦合性,于是把单系统拆分成多个子系统. 比如阿里 ...