JavaScript高级程序设计第十章知识总结

来源：互联网发布：数控冲床编程教学编辑：程序博客网时间：2024/05/17 03:46

一、理解包含不同层次节点的DOM

1.节点层次

以下面的HTML为例：

<html>

<head>

<title>Sample Page</title>

</head>

<body>

<p>Hello World!</p>

</body>

</html>

原文地址：点击打开链接

可以将这个简单的HTML文档表示为一个层次结构。

文档节点是每个文档的根节点。在这个例子中，文档节点只有一个子节点<html>元素，我们称之为文档元素。文档元素是文档的最外层元素，文档中的其他元素都包含在文档元素中。

（1）Node类型

DOM1级定义了一个Node接口，该接口将有DOM中的所有节点类型实现。这个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这两个属性。这两个属性的值完全取决于节点的类型。对于元素节点，nodeName中保存的始终都是元素的签名，而nodeValue的值则始终为null。

②节点关系

每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList对象是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。

③操作节点

操作节点最常使用的方法就是appendChild（）。

④其他方法

有两个方法是所有类型的节点都有的。第一个就是cloneNode（），用于创建调用这个方法的节点的一个完全相同的副本。第二个是normalize（）方法。这个方法唯一的用处就是处理文档树中的文本节点。

二、Document类型

document节点具有以下特征：

nodeType的值为9；

nodeName的值为“#document”；

nodeValue的值为null；

parentNode的值为null；

ownerDocument的值为null；

其子节点可能是一个DocumentType（最多一个）、Element（最多一个）、ProcessingInstruction或Comment。

1.文档的子节点

DOM有两个内置的访问其子节点的快捷方式。第一个是documentElement属性，该属性始终指向HTML页面中的<html>元素。另一个就是通过childNodes列表访问文档元素，但通过documentElement属性则能更快捷、更直接地访问该元素。

2.文档信息

document对象有一些标准的Document对象所没有的属性。第一个就是title。包含着<title>元素中的文本——显示在浏览器窗口的标题栏或标签页上。

接下来介绍的3个属性都与对网页的请求有关，它们是URL、domain和referrer。URL属性中包含页面完整的URL，domain属性中只包含页面的域名，而referrer属性中则保存着链接到当前页面的那个页面的URL。在没有来源页面的情况下，referrer属性中可能会包含空字符串。

URL与domain属性是互相关联的。

例如，如果document.URL等于http：//www.wrox.com/WileyCDA/，那么document.domain就等于www.wrox.com。

在这三个属性中，只有domain是可以设置的。

3.查找元素

取得元素的操作可以用document对象的几个方法来完成。其中Document类型为此提供了两个方法：getElementById（）和getElementsByTagName（）。

第一个方法接收一个参数：要取得的元素ID。这里的ID必须与页面中元素的id严格匹配。例如：

可以使用下面代码取得这个元素：

var div = document.getElementById（”myDiv”）；

第二个方法接受一参数：要取得的元素的标签名，返回的是包含零或多个元素的NodeList。例如，下面代码会取得页面中所有的<img>元素，并返回一个HTMLCollection。

var images = document.getElementsByTagName（”img”）；

第三个方法，只有HTMLDocument类型才有的方法，是getElementByName（）。这个方法会返回带有给定name特性的所有元素。最常用getElementsByName（）方法的情况是取得单选按钮。

4.特殊集合

除了属性和方法，document对象还有一些特殊的集合。这些集合都是HTMLCollection对象：

document.anchors，包含文档中所有带name特性的<a>元素

document.applets，包含文档中所有<applet>元素，因为不再推荐使用<applet>元素因此这个集合不再建议使用。

document.forms，包含文档中所有的<form>元素，与document.getElementByTagName（”form”）得到的结果相同。

document.images，包含文档中所有的<img>元素，与document.getElementsByTagName（”img”）得到的结果相同。

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

5.DOM一致性检测

document.implementation属性可以用来检测浏览器实现了哪些部分。这个方法接收两个参数：要检测的DOM功能的名称及版本号。

6.文档写入

有一个document对象的功能已经存在很多年了，那就是将输出流写入到网页中的能力。这个能力体系在以下4个方法中：write（）、writeln（）、open（）、close（）。其中，write（）和writeln（）都接受一个字符串参数，即要写入到输出流中的文本。write（）会原样写入。而writeln（）会在字符串的末尾添加一个换行符（\n）。

三、Element类型

Element类型用于表现XML或HTML元素，提供了对元素标签名、子节点及特性的访问。Element节点具有以下特征：

nodeType的值为1；

nodeName的值为元素的标签名；

nodeValue的值为null；

parentNode可能是Document或Element；

其子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference。要访问元素的标签名，可以使用nodeName属性，也可以使用tagName属性；这两个属性会返回相同的值。

1.html元素

所有的HTML元素都由HTMLElement类型或其子类型表示。每个HTML元素中都存在下列标准特性：

id，元素在文档中的唯一标识符。

title，有关元素的附加说明信息，一般通过工具提示条显示出来。

lang，元素内容的语言代码，很少使用。

dir，语言的方向。值为”ltr”（left-to-right，从左至右）或”rtl”（right-to-left，从右至左），也很少使用。

className，与元素的class特性相对应，即为元素指定的CSS类。

2.取得特性

每个元素都由一个或多个特新，这些特性的用途是给出相应元素或其内容的附加信息。操作特性的DOM方法主要有三个，分别是getAttribute（）、setAttribute（）和removeAttribute（）。

3.设置特性

与getAttribute（）对应的方法是setAttribute（），这个方法接收两个参数：要设置的特性名和值。如果特性已经存在，setAttribute（）会以指定的值替换现有的值；如果特性不存在，setAttribute（）则创建该属性并设置相应的值。

4.attributes属性

Element类型是使用attribute属性的唯一一个DOM节点类型。attribute属性中包含一个NamedNodeMap，与NodeList类似，也是一个”动态”的集合。元素的每一个特性都由一个attr节点表示，每个节点都保存在NamedNodeMap对象中。NamedNodeMap对象拥有下列方法：

getNamedItem(name)：返回nodeName属性等于name的节点；

removeNamedItem(name)：从列表中移除nodeName属性等于name的节点；

setNamedItem(node)：向列表中添加节点，以节点的nodeName属性为索引；

item(pos)：返回位于数字pos位置处的节点。

5.创建元素

使用document.createElement（）方法可以创建新元素。这个方法只接受一个参数，即要创建元素的标签名。不区分大小写。例如，使用下面的代码可以创建一个<div>元素。

var div = document.createElement（”div”）；

6.元素的子节点

元素可以有任意数目的子节点和后代节点，因为元素可以是其他元素的子节点。元素的childNodes属性中包含了它的所有子节点。

四、Text类型

本节点由Text类型表示，包含的是可以照字面解释的纯文本内容。

1.创建文本节点

可以使用document.createTextNode（）创建新文本节点，这个方法接受一个参数——要插入节点中的文本。例如下面代码：

var element = document.createElement（”div”）;

element.className = “message” ;

var textNode = document.createTextNode（”Hello world!”）;

element.appendChild（textNode）;

document.body.appendChild（element）;

这个例子创建了一个新<div>元素并为它指定了值为”message”的class特性。然后又创建了一个文本节点，并将其添加到前面创建的元素中。最后一步，就是将这个元素添加到了文档的<body>元素中，这样就可以在浏览器中看到新创建的元素和文本节点了。

2.规范化文本节点

normalize()方法能够将相邻文本节点合并。如果在一个包含两个或多个文本节点的父元素上调用normalize()方法，则会将所有文本节点合并成一个节点，结果节点的nodeValue等于将合并前每个文本节点的nodeValue值拼接起来的值。

3.分割文本节点

Text类型提供了一个作用于normalize()相反的方法：splitText()。这个方法会将一个文本节点分成两个文本节点，即按照指定的位置分割nodeValue值。原来的文本节点将包含从开始到指定位置之前的内容，新文本节点将包含剩下的文本。

五、Comment类型

Comment类型与Text类型继承自相同的基类，因此它拥有除splitText()之外的所有字符串操作方法。与Text类型相似，也可以通过nodeValue或data属性来取得注释的内容。Comment类型节点具有以下特征：

nodeType的值为8；

nodeName的值为”#comment”；

nodeValue的值是注释的内容；

parentNode可能是Document或Element；

不支持子节点。

六、CDATASection类型

CDATASection类型只针对基于XML的文档，表示的是CDATA区域。与Comment类型类似，因此拥有除splitText()之外的所有字符串操作方法。CDATASection类型节点具有以下特征：

nodeType的值为4；

nodeName的值为”#cdata-section”；

nodeValue的值是CDATA区域中的内容；

parentNode可能是Document或Element；

不支持子节点。

七、DocumentType类型

DocumentType类型具有以下特征：

nodeType的值为10；

nodeName的值为doctype的名称；

nodeValue的值为null；

parentNode是Document；

不支持子节点。

八、DocumentFragment类型

DocumentFragment类型节点具有以下特征：

nodeType的值为11；

nodeName的值为”#document-fragment”;

nodeValue的值为null；

parentNode的值为null；

子节点可以是：Element、ProcessingInstruction、Comment、Text、CDATASection或EntityReference。

九、Attr类型

nodeType的值为2；

nodeName的值是特性的名称；

nodeValue的值是特性的值；

parentNode的值为null；

在HTML中不支持子节点；

在XML中子节点可以是Text或EntityReference。

Attr对象有3个属性：name、value和specified。其中，name是特性名称，value是特性的值，specified是一个布尔值，用以区别特性是在代码中指定的还是默认的。

十、DOM操作技术

1.动态脚本

创建动态脚本有两种方法：插入外部文件和直接插入javascript代码。

动态加载的外部javascript文件能够立即运行，比如下面的<script>元素：

2.动态样式

所谓动态样式是指在页面刚加载时不存在的样式；动态样式是在页面加载完成后动态添加到页面中的。需要注意的是，必须将<link>元素添加到<head>而不是<body>元素，才能保证在所有浏览器中的行为一致。

加载外部样式文件的过程是异步的，也就是加载样式与执行javascript代码的过程没有固定的次序。

3.操作表格

使用核心DOM方法创建表格代码如下：

//创建table

var table = document.createElement("table");

table.border = 1;

table.width = "100%";

//创建tbody

var tbody = document.createElement("tbody");

table.appendChild(tbody);

//创建第一行

tbody.insertRow(0);

tbody.rows[0].insertCell(0);

tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1 , 1"));

tbody.rows[0].insertCell(1);

tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2 , 1"));

//创建第二行

tbody.insertRow(1);

tbody.rows[1].insertCell(0);

tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 2 , 1"));

tbody.rows[1].insertCell(1);

tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2 , 2"));

//将表格添加到文档主体中

document.body.appendChild(table);

0 0