JavaScript-DOM（上篇）

来源：互联网发布：树莓派 nginx 编辑：程序博客网时间：2024/06/05 18:07

节点层次

DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中不同的信息及（或）标记。每个节点都拥有各自的特点、数据和方法，另外也与其他节点存在某种关系。节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构。文档节点是每个文档的根节点。文档元素是文档的最外层元素，文档中的其他所有元素都包含在文档元素中。每个文档只能有一个文档元素。

Node类型

DOM1级定义了一个Node接口，该接口将由DOM中的所有节点所有节点类型实现。这个Node接口在JavaScript中是作为Node类型实现的；除了IE之外，在其他浏览器中都可以访问到这个类型。JavaScript中的所有节点类型都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法。每个节点都有一个nodeType属性，用于表明节点的类型。并不是所有节点类型都受到web浏览器的支持。开发人员最常用的就是元素和文本节点。

要了解节点的具体信息，可以使用nodeName和nodeValue这两个属性。对于元素节点，nodeName中保存的始终都是元素的标签名，而nodeValue的值始终为null。

文档中所有的节点之间都存在这样或那样的关系。节点间的各种关系可以用传统的家族关系来描述，相对于把文档树比喻成家谱。每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。NodeList并不是Array的实例。NodeList是基于DOM结构动态执行查询的结果，因此DOM结构的变化能够自动反应在NodeList对象中。

每个节点都有一个parentNode属性，该属性指向文档树中的父节点。包含在childNodes列表中的每个节点相互之间都是同胞节点。通过使用列表中每个节点的previousSibling和nextSibling属性，可以访问同一列表中的其他节点。父节点的firstChild和lastChild属性分别指向其childNodes列表中第一个和最后一个节点。

hasChildNodes()是一个非常有用的方法，这个方法在节点包含一个或多个子节点的情况下放回true；所有节点都有的最后一个属性是ownerDocument，该属性指向表示整个文档的文档节点。

appendChild()用于向childNodes列表的末尾添加一个节点，如果传入的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新位置。

insertBefore()把节点放在childNodes列表中的某个特定的位置。接收两个参数：要插入的节点和作为参照的节点。插入节点后，被插入的节点会变为参照节点的前一个同胞节点，同时被方法返回。如果参照节点是null，则这个方法和appendChild()方法执行相同的操作。

replaceChild()方法接收两个参数：要插入的节点和要替换的节点。

removeChild()移除节点，接收一个参数，即要移除的节点。被移除的节点将成为方法的返回值。

cloneNode()用于创建调用这个方法的节点的一个完全相同的副本。接收一个布尔值参数，表示是否执行深复制。

normalize()处理文档树中的文本节点。

Document类型

JavaScript通过Document类型表示文档。在浏览器中，document对象是HTMLDocument（继承自Document类型）的一个实例，表示整个HTML页面。而且，document对象是window对象的一个属性，因此可以将其作为全局对象来访问。Document类型可以表示HTML页面或者其他基于XML的文档。不过，最常见的应用还是作为HTMLDocument实例的document对象。

documentElement属性指向HMTL页面中的<html>元素，body属性指向<body>元素。所有浏览器都支持document.documentElement和document.body属性。

doctype属性（在浏览器中是document.doctype）来访问Document的另一个子节点DocumentType。但由于浏览器对document.doctype的支持不一致，因此这个属性的用处很有限。

title属性包含着<title>元素中文本-显示在浏览器窗口的标题栏或标签页上。可以获取也可以修改。

URL属性中包含页面完整的URL（即地址栏中显示的URL），domain属性中只包含页面的域名，而referrer属性中则保存着链接到当前页面的那个页面的URL。在没有来源页面的情况下，referrer属性中可能会包含空字符串。只有domain是可以设置的。但由于安全方面的限制，也并非可以给domain设置任何值。浏览器对domain属性还有一个限制，即如果域名一开始是“松散的”，那么不能将它再设置为“紧绷的”。

getElementById()，接收一个参数：要取得的元素的ID。如果页面中多个元素的ID值相同，那个这个方法只返回文档中第一次出现的元素。

getElementsByTagName()，接收一个参数：要取得元素的标签名。返回的是包含零或多个元素的NodeList。在HTML文档中，这个方法会返回一个HTMLCollection对象，作为一个“动态”集合，改对象与NodeList非常类似。HTMLCollection对象还有一个方法namedItem()，使用这个方法可以通过元素的name特性取得集合中的项。想要取得文档中的所有元素，可以向getElementsByTagName()中传入“*”。

getElementsByName()，返回带有给定name特性的所有元素。与getElementsByTagName()类似，getElementsByName()方法也会返回一个HTMLCollection。但是，对于单选按钮来说，namedItem()方法则只会取得第一项（因为每一项的name特性都相同）。

常见的特殊集合：document.anchors，包含文档中所有带name特性的<a>元素；document.links，包含文档中所有带href特性的<a>元素。特殊集合始终可以通过HTMLDocument对象访问到，而且，与HTMLCollection对象类似，集合中的项也会随着当前文档内容的更新而更新。

document.implementation属性用来检测浏览器实现了DOM的那些部分，与浏览器对DOM的实现直接对应。DOM1级只为document.implementation规定了一个方法，即hasFeature()。这个方法接受两个参数：要检测的DOM功能的名称及版本号。如果浏览器支持给定名称和版本的功能，则该方法返回true。建议多数情况下，在使用DOM的某些特殊的功能之前，最好除了检测hasFeature()之外，还同时使用能力检测。

write()和writeln()方法都接受一个字符串参数，即要写入到输入流中的文本。write()会原样写入，而writeln()则会在字符串的末尾添加一个换行符（\n）。open()和close()方法分别用于打开和关闭网页的输出流。如果是在页面加载期间使用write()或writeln()方法，则不需要用到这两个方法。

阅读全文

0 0