DOM Document节点类型详解

最新推荐文章于 2020-10-19 09:54:31 发布

weixin_33905756

最新推荐文章于 2020-10-19 09:54:31 发布

阅读量888

点赞数

文章标签： php javascript ViewUI

在前面 DOM 概况中，我们知道了 DOM 总共有 12 个节点类型，今天我们就来讲下 DOM 中最重要的节点类型之一的 document 节点类型。

1、概况

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

nodeType 的值为 9
nodeName 的值为 '#document'
nodeValue 的值为 null
parentNode 的值为 null
ownerDocument 的值为 null
其子节点可能是一个 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>元素

weixin_33905756

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM Document节点类型详解

在前面 DOM 概况中，我们知道了 DOM 总共有 12 个节点类型，今天我们就来讲下 DOM 中最重要的节点类型之一的 document 节点类型。1、概况Javascript 通过 Document 类型表示文档。在浏览器中， document 对象是 HTMLDocument（继承自 Document 类型）的一个实例，表示整个 HTML 页面。而且， document 对象是 wi...
复制链接

扫一扫