javascript之DOM(二Document对象)
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对象)的更多相关文章
- 【JavaScript】DOM之Document对象
JS(JavaScript) 一.Document对象 1.Document对象是什么 Document对象 是DOM的基本规范也是重要的对象之一,以访问,更新页面内容的属性和方法通过conslie. ...
- javascript中window与document对象、setInterval与setTimeout定时器的用法与区别
一.写在前面 本人前端菜鸟一枚,学习前端不久,学习过程中有很多概念.定义在使用时容易混淆,在此给向我一样刚踏入前端之门的童鞋们归纳一下.今天给大家分享一下js中window与document对象.se ...
- HTML DOM部分---document对象；
<style type="text/css"> #d3{ color:red} </style> </head> <body> &l ...
- DOM中document对象的常用属性方法
每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1 document.anchors 返 ...
- js基础之DOM中document对象的常用属性方法
-----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1 document.an ...
- Css、javascript、dom(二)
一.css常用标签及页面布局 1.常用标签 position(定位) z-index(定位多层顺序) background(背景) margin(外边距) padding(内边距) font-size ...
- JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- HTML DOM 实例-Document 对象
使用 document.write() 向输出流写文本 <html><body><script type="text/javascript">d ...
- JavaScript学习总结二(Date对象的用法)
javascript Date对象的常用API 1:创建日期 Date 对象用于处理日期和时间. 可以通过 new 关键词来定义 Date 对象.以下代码定义了名为 myDate 的 Date 对象: ...
随机推荐
- ubuntu安装dia
linux下一款不错的流程图工具:dia.安装此工具:1.打开终端(快捷键:ctrl+alt+t).2.输入命令: $sudo apt-get install dia 3.提示“解压缩后会消耗掉 20 ...
- 比较两个jar包的版本号
一.背景 我们经常会遇到比较两个jar包的版本号,这里贴下相关实现. 请尊重作者劳动成果,转载请标明原文链接:https://www.cnblogs.com/waterystone/p/1138547 ...
- AtCoder Grand Contest 036 简要题解
从这里开始 比赛目录 Problem A Triangle 考虑把三角形移到和坐标轴相交,即 然后能够用坐标比较简单地计算面积,简单构造一下就行了. Code #include <bits/st ...
- STM32调试,发现HAL_Init();之后无法调试,甚至无法让程序停下来
症状 最近开始学习STM32Cube,发现新建工程后无法正常调试,过了HAL_Init();之后就无法继续调试了. 无法进行让程序暂停以及停止等操作.并在输出窗口不断刷出 ERROR: Can not ...
- rem与em的使用和区别
区别是:浏览器根据谁来转化成px值. 当使用rem单位,转换为像素大小取决于根元素的字体大小,即HTML元素的字体大小. 有一个比较普遍的误解,认为em单位是相对于父元素的字体大小.事实上,根据W3C ...
- v8引擎详解（摘）-- V8引擎是一个JavaScript引擎实现
随着Web相关技术的发展,JavaScript所要承担的工作也越来越多,早就超越了“表单验证”的范畴,这就更需要快速的解析和执行JavaScript脚本.V8引擎就是为解决这一问题而生,在node中也 ...
- 【09】Jenkins：Pipeline 补充
写在前面的话 我们在使用普通的构建任务的时候使用了 Sonar 做代码质量管理,也使用了 Publish Over SSH 插件中更新上线,但是我们在 Pipeline 怎么使用他们呢. 如果你没有查 ...
- LinkedHashMap 的核心就 2 点，搞清楚，也就掌握了
HashMap 有一个不足之处就是在迭代元素时与插入顺序不一致.而大多数人都喜欢按顺序做某些事情,所以,LinkedHashMap 就是针对这一点对 HashMap 进行扩展,主要新增了「两种迭代方式 ...
- [個人紀錄] postgre dump出table 再用psql還原
--dump tablepg_dump --host #server --port 5432 --username #username --format plain --ignore-version ...
- 香草js侦测元素是否离开视窗viewport
很多时候,我们需要检查一个元素是否已经部分不在或者全部不在视窗区域,当这种现象发生时做相应的处理. 比如在CMS编辑内容时,其工具菜单很有可能因为内容区域过长导致滑出视窗区域,而工具栏又是经常要使用的 ...