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. P256 VRF实现解读

    目录 P256 VRF实现及其改造 公式推导 H1:把任意信息映射到曲线上的点 H2: 映射任意信息为(1,q) 计算随机数 随机数的proof 如何验证 VRF优点 针对S256曲线的改造 1. 使 ...

  2. 【oracle】update select语句

  3. Regular Forestation CodeForces - 1252F(树同构)

    Regular Forestation \[ Time Limit: 1000 ms\quad Memory Limit: 262144 kB \] 题意 给出一个节点为 \(n\) 的树,问删掉树上 ...

  4. Linux性能优化实战学习笔记:第十八讲

    一.内存的分配和回收 1.管理内存的过程中,也很容易发生各种各样的“事故”, 对应用程序来说,动态内存的分配和回收,是既核心又复杂的一的一个逻辑功能模块.管理内存的过程中,也很容易发生各种各样的“事故 ...

  5. loj 6051 「雅礼集训 2017 Day11」PATH - 多项式 - 钩子公式

    题目传送门 传送门 设 $m = \sum_{i = 1}^{n} a_i$. 总方案数显然等于 $\frac{m!}{\prod_{i = 1}^{n} a_i!}$. 考虑这样一个网格图,第 $i ...

  6. 企业级Nginx负载均衡与keepalived高可用实战(一)Nginx篇

    1.集群简介 1.1.什么是集群 简单地说,集群就是指一组(若干个)相互独立的计算机,利用高速通信网络组成的一个较大的计算机服务系统,每个集群节点(即集群中的每台计算机)都是运行各自服务的独立服务器. ...

  7. spring boot开启gzip

    Web服务使用Spring Boot2X且运行在Tomcat或者Jetty中,支持gzip压缩可以 修改配置文件 application.properties server.compression.e ...

  8. luogu p2705 小球

    题目部分 题目描述 有 R 个红色盒子和 B 个蓝色盒子,还有 R 个红色小球和 B 个蓝色小球.每个盒子只能装一个小球,每个小球都要放在一个盒子里. 如果把一个红色小球放在一个红色盒子里,那么得分是 ...

  9. Docker 创建 Redis 容器

    Docker 创建 Redis 容器 # 配置文件映射: # -v /root/redis/redis.conf:/etc/redis/redis.conf # 数据目录映射: # -v /root/ ...

  10. Sitecore 十大优秀功能

    为客户的需求创建最佳解决方案是我们的主要目标.良好的设计不仅仅是视觉吸引力,还要确保用户体验简单直观.在设计Sitecore网站时,我们始终牢记这一点  . 以下是一些我最喜欢的功能,可以帮助我们使用 ...