您的位置：首页 > Web前端 > JavaScript

《JavaScript高级程序设计》读书笔记(六):DOM

2016-02-27 14:47 507 查看

1.Node类型

JavaScript 中的所有节点类型都继承自 Node类型

每个节点都有一个
nodeType 属性,用于表明节点的类型。节点类型由在Node
类型中定义的下列12个数值常量来表示,任何节点类型必居其一:

 Node.ELEMENT_NODE(1);

 Node.ATTRIBUTE_NODE(2);

 Node.TEXT_NODE(3);

 Node.CDATA_SECTION_NODE(4);

 Node.ENTITY_REFERENCE_NODE(5);

 Node.ENTITY_NODE(6);

 Node.PROCESSING_INSTRUCTION_NODE(7);

 Node.COMMENT_NODE(8);

 Node.DOCUMENT_NODE(9);

 Node.DOCUMENT_TYPE_NODE(10);

 Node.DOCUMENT_FRAGMENT_NODE(11);

 Node.NOTATION_NODE(12)。

要了解节点的具体信息,可以使用 nodeName 和 nodeValue 这两个属性。这两个属性的值完全取决于节点的类型。在使用这两个值以前,最好是像下面这样先检测一下节点的类型。

if (someNode.nodeType == 1){

value = someNode.nodeName; //nodeName 的值是元素的标签名

}

2.Document类型

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

 nodeType 的值为 9;

 nodeName 的值为"#document";

 nodeValue 的值为 null;

 parentNode 的值为 null;

 ownerDocument 的值为 null;

 其子节点可能是一个 DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction或 Comment。

var html = document.documentElement;//取得对<html>的引用

var body = document.body; //取得对<body>的引用

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

//取得文档标题

var originalTitle = document.title;

//设置文档标题

document.title = "New page title";

URL,domain,referrer:

//取得完整的 URL

var url = document.URL;

//取得域名

var domain = document.domain;

//取得来源页面的 URL

var referrer = document.referrer

URL 与 domain 属性是相互关联的。例如,如果 document.URL 等于 http://www.wrox.com/WileyCDA/,那么 document.domain 就等于 www.wrox.com。

在这 3 个属性中,只有 domain 是可以设置的。但由于安全方面的限制,也并非可以给 domain 设置任何值。如果 URL 中包含一个子域名,例如 p2p.wrox.com,那么就只能将 domain 设置为"wrox.com"(URL 中包含"www",如 www.wrox.com 时,也是如此)。不能将这个属性设置为 URL 中不包含的域,如下面的例子所示。

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

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

document.domain = "nczonline.net"; // 出错!

当页面中包含来自其他子域的框架或内嵌框架时,能够设置document.domain就非常方便了。由于跨域安全限制,来自不同子域的页面无法通过 JavaScript 通信。而通过将每个页面的document.domain 设置为相同的值,这些页面就可以互相访问对方包含的 JavaScript 对象了。例如,假设有一个页面加载自 www.wrox.com,其中包含一个内嵌框架,框架内的页面加载自 p2p.wrox.com。由于 document.domain 字符串不一样,内外两个页面之间无法相互访问对方的
JavaScript 对象。但如果将这两个页面的 document.domain 值都设置为"wrox.com",它们之间就可以通信了。

浏览器对 domain 属性还有一个限制,即如果域名一开始是“松散的”(loose),那么不能将它再设置为“紧绷的”(tight)。换句话说,在将 document.domain 设置为"wrox.com"之后,就不能再将其设置回"p2p.wrox.com",否则将会导致错误,如下面的例子所示。

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

document.domain = "wrox.com"; //松散的(成功)

document.domain = "p2p.wrox.com"; //紧绷的(出错!)

3.DOM小结

DOM 是语言中立的 API,用于访问和操作 HTML 和 XML 文档。DOM1 级将 HTML 和 XML 文档形象地看作一个层次化的节点树,可以使用 JavaScript 来操作这个节点树,进而改变底层文档的外观和结构。

DOM 由各种节点构成,简要总结如下。

 最基本的节点类型是 Node,用于抽象地表示文档中一个独立的部分;所有其他类型都继承自

Node。

 Document 类型表示整个文档,是一组分层节点的根节点。在 JavaScript 中,document 对象是

Document 的一个实例。使用 document 对象,有很多种方式可以查询和取得节点。

 Element 节点表示文档中的所有 HTML 或 XML 元素,可以用来操作这些元素的内容和特性。

 另外还有一些节点类型,分别表示文本内容、注释、文档类型、CDATA 区域和文档片段。

4.DOM拓展

1.选择符API

querySelector()方法
querySelector()方法接收一个
CSS
选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回
null。

//取得 body 元素

var body = document.querySelector("body");

//取得 ID 为"myDiv"的元素

var myDiv = document.querySelector("#myDiv");

//取得类为"selected"的第一个元素

var selected = document.querySelector(".selected");

//取得类为"button"的第一个图像元素

var img = document.body.querySelector("img.button");

querySelectorAll()方法

querySelectorAll()方法接收的参数与
querySelector()方法一样,都是一个
CSS
选择符,但返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个
NodeList
的实例。具体来说,返回的值实际上是带有所有属性和方法的
NodeList,而其底层实现则类似于一组元素的快照,而非不断对文档进行搜索的动态查询。这样实现可以避免使用
NodeList 对象通常会引起的大多数性能问题。

2.元素遍历

Element Traversal API 为 DOM 元素添加了以下 5 个属性。

 childElementCount:返回子元素(不包括文本节点和注释)的个数。

 firstElementChild:指向第一个子元素;firstChild 的元素版。

 lastElementChild:指向最后一个子元素;lastChild 的元素版。

 previousElementSibling:指向前一个同辈元素;previousSibling 的元素版。 nextElementSibling:指向后一个同辈元素;nextSibling 的元素版。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航