微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

Dom Document节点类型详解

2015-10-10 20:23 伯乐在线

(点击上方,可快速关注)


今天我们就来讲下DOM中最重要的节点类型之一的document节点类型。


1、概况


Javascript 通过 Document 类型表示文档。在浏览器中, document 对象是 HTMLDocument(继承自 Document 类型)的一个实例,表示整个 HTML 页面。而且, document 对象是 window 对象的一个属性,因此可以将其作为全局对象来访问。 Document 节点具有如下特性:


  1. nodeType 的值为 9

  2. nodeName 的值为 ‘#document’

  3. nodeValue 的值为 null

  4. parentNode 的值为 null

  5. ownerDocument 的值为 null

  6. 其子节点可能是一个 DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction 或者 Comment


Document 类型可以表示 HTML 页面或者其他基于 XML 的文档。不过最常见的应用还是作为 HTMLDocument 实例的 document 对象。通过这个文档对象,不仅可以取得与页面有关的信息,而且还能操作页面的外观及其底层结构。


var d = document;

console.log(d.nodeType); // 9

console.log(d.nodeName); // #document

console.log(d.nodeValue); // null

console.log(d.parentNode); // null

console.log(d.ownerDocument); // null


2、文档的子节点


虽然 DOM 标准规定 Document 节点的子节点可以是 DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction 或者 Comment,但还是有两个内置的访问其子节点的快捷方式。第一个就是 documentElement 属性,该属性始终指向 HTML 页面中的 <html> 元素,另一个就是通过 childNodes 列表访问文档元素:(假设没有指定文档类型)


var html = document.documentElement;

console.log(html === document.childNodes[0]); // true

console.log(html === document.firstChild); // true


作为 HTMLDocument 的实例,document 对象还有一个 body 属性,直接指向 <body> 元素。


var body = document.body;


所有的浏览器都支持 document.documentElement 和 document.body 属性


Document 另一个可能的子节点是 DocumentType。通常将 <!DOCTYPE> 标签看成一个和文档其他部分不同的实体,可以通过 doctype 属性来访问它的信息:


var doctype = document.doctype; // 取得对 <!DOCTYPE> 的引用

console.log(doctype);

console.log(document.firstChild === doctype); // true

console.log(document.childNodes.length); // 2 (doctype 以及 documentElement)


但是浏览器对 document.doctype 的支持差别很大,使得这个属性的用处很有限。


文档的子节点还能是注释节点:


<!-- a -->

<!DOCTYPE html>

<script>

console.log(document.childNodes.length); // 3 (chrome)

</script>

<!-- b -->


但是,现实中的浏览器在处理位于 <html> 外部的注释方面存在差异,比如 chrome 下就直接忽视上面的第二个注释节点。


3、文档信息


作为 HTMLDocument 的一个实例,document 对象还有一些标准的 Document 对象所没有的属性。


// 取得文档标题

var title = document.title;


// 设置文档标题

document.title = 'New Page Title';


// 取得完整的 url

var url = document.url;


// 取得域名

var domain = document.domain;


// 取得来源页面的 url

var referrer = document.referrer;


domain 属性是可以设置的,这点在跨域通信中应用甚广。由于安全方面的考虑,也并非可以给 domain 设置任何值。


// 假设页面来自 p2p.wrox.com


document.domain = 'wrox.com'; // 成功


document.domain = 'cnblogs.com'; // 出错


浏览器对 domain 属性还有一个限制,即如果域名一开始是 “松散的”,那么不能再将它设置为 “紧绷的”:


// 假设页面来自 p2p.wrox.com


document.domain = 'wrox.com';


document.domain = 'p2p.wrox.com'; // 出错


4、查找元素


var a = document.getElementById('..');


var b = document.getElementsByTagName('..');


// HTMLCollection

var images = document.getElementsByTagName('img');


console.log(images.length);

console.log(images[0].src);

console.log(images.item(0).src);


// 通过元素的name特性取得集合中的项

var myImage = images.namedItem('..');


// 也可以

var myImage = images['..']; // .. 为name值


// 对于HTMLCollection而言,我们可以向方括号中传入数字或者字符串(name值)

// 在后台,对数字调用item(),对字符串索引调用namedItem()

var myImage = images[0];

var myImage = images['nameOfMyImage'];


// 取得文档中的所有元素

var allElements = document.getElementsByTagName('*');


// document.getElementsByName

var radios = document.getElementsByName('color');


5、特殊集合


除了属性和方法,document 对象还有一些特殊的集合,这些集合都是 HTMLCollection 对象,为访问文档常用的部分提供了快捷方式:


document.anchors // 包含所有带name特性的<a>元素

document.forms // 包含文档中所有的<form>元素

document.images // 包含文档中所有的<img>元素

document.links // 包含文档中所有带href的<a>元素




前端大全

微信号:FrontDev

打造东半球最好的 前端技术 微信号

--------------------------------------

商务合作QQ:2302462408

投稿网址:top.jobbole.com

 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 容器相比虚拟机更为安全的十三个方面 手机掉水里怎么办?妙招让你的手机完好如初! 达内Android学员5月份就业喜报,最高月薪15000元! 最常用的 Eclipse 快捷键总结 HotFix的抉择