你的位置:首页 > Java教程

[Java教程]DOM文档节点DOCUMENT


定义

  JavaScript通过Document类型表示文档。在浏览器中,document对象是HTMLDocument(继承自Document类型)的一个实例,表示整个HTML页面。document对象是window对象的一个属性,可将其作为全局对象来访问。

 

特征

  nodeType:9
  nodeName:#document
  nodeValue:null
  parentNode:null
  ownerDocument:null
  childNode:DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction或Comment

//#document 9 "#document" null console.log(document,document.nodeType,document.nodeName,document.nodeValue)//null null <!DOCTYPE html>console.log(document.parentNode,document.ownerDocument,document.childNodes[0])

 

快捷访问

【子节点】

【1】document.documentElement属性始终指向HTML页面中的<html>元素

  html的特征:
    nodeType:1
    nodeName:HTML
    nodeValue:null
    parentNode:HTMLDocument
    ownerDocument:HTMLDocument

var oHtml = document.documentElement;//<html> 1 "HTML" nullconsole.log(oHtml,oHtml.nodeType,oHtml.nodeName,oHtml.nodeValue)//#document #document <head>console.log(oHtml.parentNode,oHtml.ownerDocument,oHtml.childNodes[0])  

 

【2】document.body属性指向<body>元素

  body的特征:
    nodeType:1
    nodeName:BODY
    nodeValue:null
    parentNode:<html>
    ownerDocument:HTMLDocument

var oBody = document.body;//<body> 1 "BODY" nullconsole.log(oBody,oBody.nodeType,oBody.nodeName,oBody.nodeValue)//<html> #document #textconsole.log(oBody.parentNode,oBody.ownerDocument,oBody.childNodes[0])

 

【3】document.doctype属性指向<!DOCTYPE>标签,但是IE8-不识别,输出null

  <!DOCTYPE>的特征:
    nodeType:8
    nodeName:html
    nodeValue:null
    parentNode:HTMLDocument
    ownerDocument:HTMLDocument

var oDoctype = document.doctype;//IE8-不识别,输出null;其他浏览器输出<!DOCTYPE html>console.log(oDoctype);//因为IE8-浏览器将其识别为注释,输出8;其他浏览器输出10console.log(document.childNodes[0].nodeType);if(oDoctype){  //<!DOCTYPE html> 10 "html" null  console.log(oDoctype,oDoctype.nodeType,oDoctype.nodeName,oDoctype.nodeValue)  //#document #document undefined  console.log(oDoctype.parentNode,oDoctype.ownerDocument,oDoctype.childNodes[0])  }

 

【4】document.head引用文档的<head>元素(IE8-浏览器下不支持)

  兼容写法:

var head = document.head || document.getElementsByTagName("head")[0];

 

【文档信息】

【1】document.title包含着<title>元素中的文本,这个属性可读可写

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title></head><body><script>console.log(document.title);//Documentdocument.title="test";console.log(document.title);//test</script></body></html>  

 

【2】URL(地址)、domain(域名)、referrer(保存着链接到当前页面的那个页面的URL)

  其中domain是可写的,但不能将该属性设置为URL中不包含的域。在IE8-浏览器不允许对domain赋值。chrome浏览器将domain设置为松散的域名后,可以再设置为紧绷的域名,而其他浏览器不允许。
通过设置document.domain为相同的值,如qq.com,可以让a.qq.com和b.qq.com这些页面之间互相访问对方的JavaScript对象,而不再会跨域安全的限制。

console.log(document.URL);//http://www.cnblogs.com/xiaohuochai/console.log(document.domain);//www.cnblogs.com//表示链接到当前页面的上一个页面的URL,可能为空console.log(document.referrer);//http://home.cnblogs.com/followees/

 

【3】document.charset表示文档中实际使用的字符集,也可以用来指定新字符集,该属性可读可写。

console.log(document.charset)//UTF-8(只有firefox不支持)

 

【4】document.defaultView保存着一个指针,指向拥有给定文档的窗口或框架。IE8-浏览器不支持defaultView属性,但IE中有一个等价的属性名叫parentWindow。所以要确定文档的归属窗口,其兼容写法为:

var parentWindow = document.defaultView || document.parentWindow;//Window

 

【特殊集合】

【1】document.anchors包含文档中所有带name特性的<a>元素,所有浏览器都支持

<a href= "#" name="a1">a1</a><a href= "#" name="a2">a2</a><a href= "#" >3</a><script>console.log(document.anchors.length)//2</script>

 

【2】document.links包含文档中所有带href特性的<a>元素

<a href="#">1</a><a href="#">2</a><a>3</a><script>console.log(document.links.length)//2</script>

 

【3】document.forms包含文档中所有的<form>元素,与document.getElementsByTagName("form")结果相同,所有浏览器都支持

<form action="#">1</form><form action="#">2</form><script>console.log(document.forms.length)//2</script>

 

【4】document.images包含文档中所有的<img>元素,与document.getElementsByTagName('img')结果相同,所有浏览器都支持

<img src="#" alt="#"><img src="#" alt="#"><script>console.log(document.images.length)//2</script>

 

【其他】

【1】document.readyState属性有两个可能的值:loading(正在加载文档)、complete(已经加载完文档)。使用document.readyState最恰当方式是通过它来实现一个指示文档已经加载完成的指示器。

function readyStateTest(){  if(document.readyState == "complete"){    alert("页面加载完成");  }else{    setTimeout(readyStateTest,1000);    alert("页面正在加载");  }  };readyStateTest();

 

【2】document.compatMode兼容模式。在标准模式下值为"CSS1Compat",在兼容模式下值为"BackCompat";

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><script>console.log(document.compatMode)//CSS1Compat</script></body></html>  

<html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><script>console.log(document.compatMode)//BackCompat</script></body></html>  

 

方法

  将输出流写入到网页的能力有4个方法:write()、writeln()、open()、close()

  【1】write()和writeln()方法都接收一个字符串参数,即要写入到输出流中的文本。write()会原样写入,而writeln()则在字符串的末尾添加一个换行符(\n),但换行符会被页面解析为空格。在页面被加载的过程中,可以使用这两个方法向页面中动态地加入内容

document.write("<strong>" + (+new Date() )+ "</strong>")//1442840049306document.writeln("<strong>" + (+new Date() )+ "</strong>")//1442840049306

    [注意1]使用write()和writeln()还可以动态包含外部资源,但注意要加入</script>闭合标签时,要加入转义字符,否则会被解释为脚本块的结束

document.write("<script src=\"js.js\"><\/script>");

    [注意2]如果在文档加载结束后,再调用document.write()会重写整个页面

window.onload = function(){  document.write("abc");  }

  

  【2】方法open()和close()分别用于打开和关闭网页的输出流,如果是在页面加载期间使用write()和writeln()方法,则不需要用到这两个方法