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()分别用于打开和关闭文档输出流。

时间: 2024-12-28 20:18:20

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

DOM中document对象的常用属性方法总结

提要: 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问 1.常见对象属性 document.title                 //设置文档标题等价于HTML的<title>标签document.bgColor               //设置页面背景色document.fgColor               //设置前景色(文本颜色)document.linkColor    

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

一.写在前面 本人前端菜鸟一枚,学习前端不久,学习过程中有很多概念.定义在使用时容易混淆,在此给向我一样刚踏入前端之门的童鞋们归纳一下.今天给大家分享一下js中window与document对象.setInterval与setTimeout定时器的用法与区别.讲得不对的地方,烦请大家指正,还望前辈.大牛多多指教! 二.window对象与document对象的用法和区别 window是全局对象,document是window对象的一个属性它也是一个对象.如图: document对象指的页面这个文档

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

-----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.anchors  返回对文档中所有 Anchor 对象的引用.还有document.links/document.forms/document.images等 2  document.URL       返回当前文档的url 3  document.title       返回当前文档的标题 方法 1 

HTML DOM 实例-Document 对象

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

读Secrets of the JavaScript Ninja(二)对象

面向对象和原型 理解原型 在JavaScript中,可通过原型实现继承.原型的概念很简单.每个对象都含有原型的引用,当查找属性时,若对象本身不具有该属性,则会查找原型上是否有该属性. 每个对象都可以有一个原型,每个对象的原型也可以拥有一个原型,以此类推,形成一个原型链.查找特定属性将会被委托在整个原型链上,只有当没有更多的原型可以进行查找时,才会停止查找. 对象构造器与原型 当用作为函数调用Ninja时,什么都不会做.在用new操作符时返回一个对象,并且设置了它的原型为Ninja,所以ninja

Javascript Vs DOM Vs BOM

当前想法有些乱,整理不下去了... 以后如果想起来,再继续整理.... 1.Javascript的组成部分 Javascript的内容分成三个部分:ECMAScript.DOM和BOM. 浏览器,可以看成是ECMAScript运行的宿主环境,然而并不是唯一的宿主环境. The BOM consists of the objects navigator, history, screen, location and document which are children of window. In

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

   dom对象详解--style对象 style对象 style对象和document对象下的集合对象styleSheets有关系,styleSheets是文档中所有style对象的集合,这里讲解的重点是style对象,styleSheets不是重点. style对象定义:Represents the current settings of all possible inline styles for agiven element,即表示当前元素的样式设置. 例,可拖动的窗口 <!DOCTYP

javascript系列之DOM(二)

原生DOM扩展 我们接着第一部分来说,上文提到了两种常规的DOM操作:创建文档片段和遍历元素节点.我们知道那些雨后春笋般的库,有很大一部分工作就是提供了一些优秀 的DOM操作API.可见原生的一些方法和属性,还不能很灵活快捷的来完成我们所希望的操作.下面将总结出总结出几种很实用的扩展方法.包括 after()和before(), A:after()和before() 1 function after(elem){ 2 if(this.parentNode){ 3 this.parentNode.

JavaScript之DOM对象的获取

之前我们讲过JavaScript之DOM对象获取的两篇文章,本文是该系列文章之三,点击回顾上两篇文章能更好地理解本文.<JavaScript之DOM对象的获取(一)>: <JavaScript之DOM对象的获取(二)> 接下来,开始讲述本文内容.在文档中,我们还可以通过不同的现象和特征获取DOM对象. 8.document.activeElement 这是一个属性,返回当前获取焦点的元素  效果 9.document.anchors 返回对文档中所有Anchor对象的引用,即获取当