JavaScript高级程序设计学习笔记第十章--DOM

2022-10-07 09:09:06

1.DOM：文档对象模型，是针对 HTML 和 XML 文档的一个 API（应用程序编程接口）。

2.DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构。

3.文档节点是每个文档的根节点。在这个例子中，文档节点只有一个子节点，即<html>元素，我们称之为文档元素。文档元素是文档的最外层元素，文档中的其他所有元素都包含在文档元素中。每个文档只能有一个文档元素。在 HTML 页面中，文档元素始终都是<html>元素。在 XML 中，没有预定义的元素，因此任何元素都可能成为文档元素。

4.Node类型：

nodeType属性：每个节点都有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)。

为了确保跨浏览器兼容，最好还是将 nodeType 属性与数字值进行比较，可以确定节点类型。例如：

 if (someNode.nodeType == 1){ //适用于所有浏览器

 alert("Node is an element.");

 }

nodeName属性与nodeValue属性：这两个属性的值取决于NodeType属性。在使用这两个值以前，最好是像上面这样先检测一下节点的类型。

对于元素节点， nodeName 中保存的始终都是元素的标签名，而 nodeValue 的值则始终为 null。

childNodes 属性：每个节点都有一个 childNodes 属性，其中保存着一个 NodeList 对象。 NodeList 是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。
虽然可以通过方括号语法来访问 NodeList 的值，而且这个对象也有 length 属性，但它并不是 Array 的实例。必须先将其转化为数组。（Array.prototype.slice.call(arguments,0)能将具有length属性的对象转成数组）

下列代码可以在任意浏览器中使用，将nodeList转化为数组，比较通用。

 function convertToArray(nodes){

 var array = null;

 try {

 array = Array.prototype.slice.call(nodes, 0); //针对非 IE 浏览器

 } catch (ex) {

 array = new Array();

 for (var i=0, len=nodes.length; i < len; i++){

 array.push(nodes[i]);//或者array[i]=nodes[i],据说比push快

 }

 }

 return array;

 }

parentNode 属性：每个节点都有一个 parentNode 属性，该属性指向文档树中的父节点。包含在 childNodes 列表中的所有节点都具有相同的父节点，因此它们的 parentNode 属性都指向同一个节点。

previousSibling和 nextSibling 属性：在childNodes 列表中的每个节点相互之间都是同胞节点。通过使用列表中每个节点的 previousSibling和 nextSibling 属性，可以访问同一列表中的其他节点。列表中第一个节点的 previousSibling 属性值为 null，而列表中最后一个节点的 nextSibling 属性的值同样也为 null。

firstChild 和 lastChild属性：父节点的 firstChild 和 lastChild属性分别指向其 childNodes 列表中的第一个和最后一个节点。其中， someNode.firstChild 的值
始终等于 someNode.childNodes[0] ，而 someNode.lastChild 的值始终等于 someNode.childNodes [someNode.childNodes.length-1]。在只有一个子节点的情况下， firstChild 和lastChild 指向同一个节点。如果没有子节点，那么 firstChild 和 lastChild 的值均为 null。

hasChildNodes()方法：在节点包含一或多个子节点的情况下返回 true。

ownerDocument属性：该属性指向表示整个文档的文档节点。这种关系表示的是任何节点都属于它所在的文档，任何节点都不能同时存在于两个或更多个文档中。通过这个
属性，我们可以不必在节点层次中通过层层回溯到达顶端，而是可以直接访问文档节点。

节点之间的属性之间的指针关系（指针关系是只读的）如下所示：

操作节点的方法：操作某个节点的子节点

appendChild()--插入在末尾：用于向 childNodes 列表的末尾添加一个节点。添加节点后， childNodes 的新增节点、父节点及以前的最后一个子节点的关系指针都会相应地得到更新。更新完成后， appendChild()返回新增的节点。例如：

 var returnedNode = someNode.appendChild(newNode);

 alert(returnedNode == newNode); //true

 alert(someNode.lastChild == newNode); //true

任何 DOM 节点也不能同时出现在文档中的多个位置上。因此，如果在调用 appendChild()时传入了父节点的第一个子节点，那么该节点就会成为父节点的最后一个子节点。例如：

 //someNode 有多个子节点

 var returnedNode = someNode.appendChild(someNode.firstChild);

 alert(returnedNode == someNode.firstChild); //false

 alert(returnedNode == someNode.lastChild); //true

insertBefore()--插入：将节点放在 childNodes 列表中某个特定的位置上，而不是放在末尾。这个方法接受两个参数：要插入的节点和作为参照的节点。插入节点后，被插
入的节点会变成参照节点的前一个同胞节点（previousSibling），同时被方法返回。如果参照节点是null，则 insertBefore()与 appendChild()执行相同的操作。例如：

 //插入后成为最后一个子节点

 returnedNode = someNode.insertBefore(newNode, null);

 alert(newNode == someNode.lastChild); //true

 //插入后成为第一个子节点

 var returnedNode = someNode.insertBefore(newNode, someNode.firstChild);

 alert(returnedNode == newNode); //true

 alert(newNode == someNode.firstChild); //true

 //插入到最后一个子节点前面

 returnedNode = someNode.insertBefore(newNode, someNode.lastChild);

 alert(newNode == someNode.childNodes[someNode.childNodes.length-2]); //true

replaceChild()--替换：接受的两个参数是：要插入的节点和要替换的节点。要替换的节点将由这个方法返回并从文档树中被移除，同时由要插入的节点占据其位置。例如：

 //替换第一个子节点

 var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);

 //替换最后一个子节点

 returnedNode = someNode.replaceChild(newNode, someNode.lastChild);

在使用 replaceChild()插入一个节点时，该节点的所有关系指针都会从被它替换的节点复制过来。尽管从技术上讲，被替换的节点仍然还在文档中，但它在文档中已经没有了自己的位置。

removeChild()--移除：接受一个参数，即要移除的节点。被移除的节点将成为方法的返回值。通过 removeChild()移除的节点仍然为文档所有，只不过在
文档中已经没有了自己的位置。例如：

 //移除第一个子节点

 var formerFirstChild = someNode.removeChild(someNode.firstChild);

 //移除最后一个子节点

 var formerLastChild = someNode.removeChild(someNode.lastChild);

以上方法适用于有子节点的节点。

以下两种方法适用于所有节点

cloneNode()：用于创建调用这个方法的节点的一个完全相同的副本。接受一个布尔值参数，表示是否执行深复制。在参数为 true的情况下，执行深复制，也就是复制节点及其整个子节点树；在参数为 false 的情况下，执行浅复制，即只复制节点本身。复制后返回的节点副本属于文档所有，但并没有为它指定父节点。该方法不会复制特性、子节点，不会复制添加到 DOM 节点中的 JavaScript 属性（例如事件处理等）。

normalize()：这个方法唯一的作用就是处理文档树中的文本节点。由于解析器的实现或 DOM 操作等原因，可能会出现文本节点不包含文本，或者接连出现两个文本节点
的情况。当在某个节点上调用这个方法时，就会在该节点的后代节点中查找上述两种情况。如果找到了空文本节点，则删除它；如果找到相邻的文本节点，则将它们合并为一个文本节点。

5.Document类型：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 对象。通过这个文档对象，不仅可以取得与页面有关的信息，而且还能操作页面的外观及其底层结构。

子节点：有两个内置的访问其子节点的快捷方式。第一个就是 documentElement属性，该属性始终指向 HTML 页面中的<html>元素。另一个就是通过 childNodes 列表访问文档元素，但通过 documentElement 属性则能更快捷、更直接地访问该元素。例如： var html = document.documentElement; //取得对<html>的引用

document 对象还有一个 body 属性，直接指向<body>元素。因为经常要使用这个元素，所以 document.body 在 JavaScript 代码中出现的频率非常高。例如： var body = document.body; //取得对<body>的引用

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

DocumentType子节点：通常将<!DOCTYPE>标签看成一个与文档其他部分不同的实体，可以通过 doctype 属性（在浏览器中是 document.doctype）来访问它的信息。

各个节点对document.doctype 的支持差别很大，可以给出如下总结。

IE8 及之前版本：如果存在文档类型声明，会将其错误地解释为一个注释并把它当作 Comment节点；而 document.doctype 的值始终为 null。
IE9+及 Firefox：如果存在文档类型声明，则将其作为文档的第一个子节点； document.doctype是一个 DocumentType 节点，也可以通过 document.firstChild 或 document.childNodes[0]访问同一个节点。
Safari、 Chrome 和 Opera：如果存在文档类型声明，则将其解析，但不作为文档的子节点。 document.doctype 是一个 DocumentType 节点，但该节点不会出现在 document.childNodes 中。
由于浏览器对 document.doctype 的支持不一致，因此这个属性的用处很有限。

浏览器间的这种不一致性也导致了位于<html>元素外部的注释没有什么用处。

文档的信息：

属性：

title属性：包含着<title>元素中的文本——显示在浏览器窗口的标题栏或标签页上。通过这个属性可以取得当前页面的标题，也可以修改当前页面的标题并反映在浏览器的标题栏中。修改 title 属性的值不会改变<title>元素。
对网页的请求有关属性：
- URL：包含页面完整的 URL（即地址栏中显示的 URL）
- domain：只包含页面的域名
- referrer：保存着链接到当前页面的那个页面的 URL。在没有来源页面的情况下， referrer 属性中可能
  会包含空字符串。
- 以上三个属性所有这些信息都存在于请求的 HTTP 头部
- 在这 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"，它们之间就可以通信了。
- 但是，将 document.domain 设置为"wrox.com"之后，就不能再将其设置回"p2p.wrox.com"，否则将会导致错误。
URL 与 domain 属性是相互关联的。例如，如果 document.URL 等于 http://www.wrox.com/WileyCDA/，那么 document.domain 就等于 www.wrox.com。

操作：

获取元素的操作：
- getElementById()：接收一个参数：要取得的元素的 ID。如果找到相应的元素则返回该元素，如果不存在带有相应 ID 的元素，则返回 null。注意，这里的 ID 必须与页面中元素的 id特性（attribute）严格匹配，包括大小写。如果页面中多个元素的 ID 值相同， getElementById()只返回文档中第一次出现的元素。
- getElementsByTagName()：这个方法接受一个参数，即要取得元素的标签名，而返回的是包含零或多个元素的 NodeList。在 HTML 文档中，这个方法会返回一
  个 HTMLCollection 对象，作为一个“动态”集合，该对象与 NodeList 非常类似。与 NodeList 对象类似，可以使用方括号语法或 item()方法来访问 HTMLCollection 对象中的项。而这个对象中元素的数量则可以通过其 length 属性取得。例如：
```
 var images = document.getElementsByTagName("img");

 alert(images.length); //输出图像的数量

 alert(images[0].src); //输出第一个图像元素的 src 特性

 alert(images.item(0).src); //输出第一个图像元素的 src 特性
```
- namedItem()：TMLCollection 对象还有的方法，使用这个方法可以通过元素的 name特性取得集合中的项。例如，假设上面提到的页面中包含如下<img>元素：<img src="myimage.gif" name="myImage"> ，获取这个img的方法就是var myImage = images.namedItem("myImage");
- HTMLCollection提供按索引访问（alert(images.item(0).src);）和按名称访问（var myImage = images.namedItem("myImage");）两种方式，只要向方括号中传入数值或字符串形式的索引值，就会在后台调用相应的方法。对数值索引就会调用 item()，而对字符串索引就会调用 namedItem()。
- 要想取得文档中的所有元素，可以向 getElementsByTagName()中传入"*"
- getElementsByName()（只有 HTMLDocument 类型才有的方法）：返回带有给定 name 特性的所有元素，也会返回一个 HTMLCollectioin。
特殊方法：
- document.anchors，包含文档中所有带 name 特性的<a>元素；
- document.links，包含文档中所有带 href 特性的<a>元素。
- document.applets，包含文档中所有的<applet>元素，因为不再推荐使用<applet>元素，所以这个集合已经不建议使用了；
- document.forms，包含文档中所有的<form>元素，与 document.getElementsByTagName("form")得到的结果相同；
- document.images，包含文档中所有的<img>元素，与 document.getElementsByTagName("img")得到的结果相同；

5.DOM一致性检测：由于 DOM 分为多个级别，也包含多个部分，因此检测浏览器实现了 DOM 的哪些部分就十分必要了。

document.implementation 属性就是为此提供相应信息和功能的对象，与浏览器对 DOM 的实现直接对应。 DOM1 级只为 document.implementation 规定了一个方法，即 hasFeature()。这个方法接受两个参数：要检测的 DOM 功能的名称及版本号。如果浏览器支持给定名称和版本的功能，则该方法返回 true，如下面的例子所示： var hasXmlDom = document.implementation.hasFeature("XML", "1.0");

6.文档写入：将输出流写入到网页中的能力。

write():接受一个字符串参数，即要写入到输出流中的文本,原样写入。
writeln():接受一个字符串参数，即要写入到输出流中的文本，与write()不同的是会在文本后面加入一个\n
open()：打开网页的输出流。如果是在页面加载期间使用 write()或 writeln()方法，则不需要用到这个方法。
close()：关闭网页的输出流。如果是在页面加载期间使用 write()或 writeln()方法，则不需要用到这个方法。

严格型 XHTML 文档不支持文档写入。对于那些按照 application/xml+xhtml内容类型提供的页面，这两个方法也同样无效。

7.Element类型：

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

nodeType 的值为 1；
nodeName 的值为元素的标签名；
nodeValue 的值为 null；
parentNode 可能是 Document 或 Element；
其子节点可能是 Element、 Text、 Comment、 ProcessingInstruction、 CDATASection 或EntityReference。

要访问元素的标签名，可以使用 nodeName 属性，也可以使用 tagName 属性。

HTML元素:

所有 HTML 元素都由 HTMLElement 类型表示，不是直接通过这个类型，也是通过它的子类型来表示。HTMLElement 类型直接继承自 Element 并添加了一些属性。添加的这些属性分别对应于每个 HTML元素中都存在的下列标准特性。

id，元素在文档中的唯一标识符。
title，有关元素的附加说明信息，一般通过工具提示条显示出来。
lang，元素内容的语言代码，很少使用。
dir，语言的方向，值为"ltr"（left-to-right，从左至右）或"rtl"（right-to-left，从右至左），也很少使用。
className，与元素的 class 特性对应，即为元素指定的 CSS 类。没有将这个属性命名为 class，是因为 class 是 ECMAScript 的保留字。也就是所获取这个属性的时候写element.className，但是在该元素标签下对应的是class="……"

操作元素特性：

getAttribute():获取class属性的时候，不再用className了，而是用class就可以，例如 alert(div.getAttribute("class"));
- 如果给定名称的特性不存在， getAttribute()返回 null。
- 也可以取得自定义特性（即标准 HTML 语言中没有的特性）的值，特性的名称是不区分大小写的，即"ID"和"id"代表的都是同一个特性。另外也要注意，根据 HTML5 规范，自定义特性应该加上 data-前缀以便验证。
- style定义的CSS属性与onclick等定义的事件处理程序，通过getArrtibute返回的是相应的代码。
setAttribute()：这个方法接受两个参数：要设置的特性名和值。如果特性已经存在，setAttribute()会以指定的值替换现有的值；如果特性不存在，setAttribute()
则创建该属性并设置相应的值。
- 通过 setAttribute()方法既可以操作 HTML 特性也可以操作自定义特性。通过这个方法设置的特性名会被统一转换为小写形式，即"ID"最终会变成"id"。
- 因为所有特性都是属性，所以直接给属性赋值可以设置特性的值，例如：div.id = "someOtherId"; ，但是这个方式对于自定义属性就不好使了，并不能使用这个方式添加自定义属性。
removeAttribute()：用于彻底删除元素的特性。调用这个方法不仅会清除特性的值，而且也会从元素中完全删除特性。这个方法并不常用，但在序列化 DOM 元素时，可以通过它来确切地指定要包含哪些特性。

attributes 属性：Element 类型是使用 attributes 属性的唯一一个 DOM 节点类型。

attributes 属性中包含一个NamedNodeMap，与 NodeList 类似，也是一个“动态”的集合。

元素的每一个特性都由一个 Attr 节点表示，每个节点都保存在 NamedNodeMap 对象中。 NamedNodeMap 对象拥有下列方法。

getNamedItem(name)：返回 nodeName 属性等于 name 的节点；
removeNamedItem(name)：从列表中移除 nodeName 属性等于 name 的节点；
setNamedItem(node)：向列表中添加节点，以节点的 nodeName 属性为索引；
item(pos)：返回位于数字 pos 位置处的节点。

attributes 属性中包含一系列节点，每个节点的 nodeName 就是特性的名称，而节点的 nodeValue就是特性的值。要取得元素的 id 特性，可以使用以下代码： var id = element.attributes.getNamedItem("id").nodeValue; 或者使用方括号语法通过特性名称访问节点的简写方式： var id = element.attributes["id"].nodeValue;

调用 removeNamedItem()方法与在元素上调用 removeAttribute()方法的效果相同——直接删除具有给定名称的特性。下面的例子展示了两个方法间唯一的区别，即 removeNamedItem()返回表示被删除特性的 Attr 节点。

创建新元素：

使用 document.createElement()方法可以创建新元素。这个方法只接受一个参数，即要创建元素的标签名。这个标签名在 HTML 文档中不区分大小写，而在 XML（包括 XHTML）文档中，则是区分大小写的。例如，使用下面的代码可以创建一个<div>元素。例如： var div = document.createElement("div"); 使用 createElement()方法创建新元素的同时，也为新元素设置了 ownerDocuemnt 属性。此时，还可以操作元素的特性，为它添加更多子节点，以及执行其他操作。但是还没有添加到文档树里，需要使用appendChild()、 insertBefore()或 replaceChild()方法。

8.Text类型：

文本节点由 Text 类型表示，包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的HTML 字符，但不能包含 HTML 代码。 Text 节点具有以下特征：

nodeType 的值为 3；
nodeName 的值为"#text"；
nodeValue 的值为节点所包含的文本；
parentNode 是一个 Element；
不支持（没有）子节点。

可以通过 nodeValue 属性或 data 属性访问 Text 节点中包含的文本，这两个属性中包含的值相同。对 nodeValue 的修改也会通过 data 反映出来，反之亦然。

操作文本的方法：

appendData(text)：将 text 添加到节点的末尾。
deleteData(offset, count)：从 offset 指定的位置开始删除 count 个字符。
insertData(offset, text)：在 offset 指定的位置插入 text。
replaceData(offset, count, text)：用 text 替换从 offset 指定的位置开始到 offset+count 为止处的文本。
splitText(offset)：从 offset 指定的位置将当前文本节点分成两个文本节点。
substringData(offset, count)：提取从 offset 指定的位置开始到 offset+count 为止处的字符串。
文本节点还有一个 length 属性，保存着节点中字符的数目。而且，nodeValue.length 和 data.length 中也保存着同样的值。

在默认情况下，每个可以包含内容的元素最多只能有一个文本节点，而且必须确实有内容存在。

创建文本节点：document.createTextNode()创建新文本节点。这个方法接受一个参数——要插入节点中的文本。

分割文本节点：splitText()，这个方法会将一个文本节点分成两个文本节点，即按照指定的位置分割 nodeValue 值。原来的文本节点将包含从开始到指定位
置之前的内容，新文本节点将包含剩下的文本。这个方法会返回一个新文本节点，该节点与原节点的parentNode 相同（就是分割的后面的节点）。

8.Comment类型：注释在 DOM 中是通过 Comment 类型来表示的。

nodeType 的值为 8；
nodeName 的值为"#comment"；
nodeValue 的值是注释的内容；
parentNode 可能是 Document 或 Element；
不支持（没有）子节点。

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

使用 document.createComment()并为其传递注释文本也可以创建注释节点。

9.CDATASection类型:

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

nodeType 的值为 4；
nodeName 的值为"#cdata-section"；
nodeValue 的值是 CDATA 区域中的内容；
parentNode 可能是 Document 或 Element；
不支持（没有）子节点。

CDATA 区域只会出现在 XML 文档中，因此多数浏览器都会把 CDATA 区域错误地解析为 Comment或 Element。

在真正的 XML 文档中，可以使用 document.createCDataSection()来创建 CDATA 区域，只需为其传入节点的内容即可。

10.DocumentType类型:

Document-Type 包含着与文档的 doctype 有关的所有信息，它具有下列特征：

nodeType 的值为 10；
nodeName 的值为 doctype 的名称；
nodeValue 的值为 null；
parentNode 是 Document；
不支持（没有）子节点。

DOM1 级描述了DocumentType 对象的 3 个属性： name、 entities 和 notations。其中， name 表示文档类型的名称；entities 是由文档类型描述的实体的 NamedNodeMap 对象； notations 是由文档类型描述的符号的NamedNodeMap 对象。通常，浏览器中的文档使用的都是 HTML 或 XHTML 文档类型，因而 entities
和 notations 都是空列表（列表中的项来自行内文档类型声明）。但不管怎样，只有 name 属性是有用的。这个属性中保存的是文档类型的名称，也就是出现在<!DOCTYPE 之后的文本。

11.DocumentFragment类型：文档片段

DocumentFragment 节点具有下列特征：

nodeType 的值为 11；
nodeName 的值为"#document-fragment"；
nodeValue 的值为 null；
parentNode 的值为 null；
子节点可以是 Element、 ProcessingInstruction、 Comment、 Text、 CDATASection 或EntityReference。

12.Attr 类型

元素特性

性节点具有下列特征：

nodeType 的值为 2；
nodeName 的值是特性的名称；
nodeValue 的值是特性的值；
parentNode 的值为 null；
在 HTML 中不支持（没有）子节点；
在 XML 中子节点可以是 Text 或 EntityReference。

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

尽管它们也是节点，但特性却不被认为是 DOM 文档树的一部分。

使用 document.createAttribute()并传入特性的名称可以创建新的特性节点。

13.动态脚本：在页面加载时不存在，但将来的某一时刻通过修改 DOM 动态添加的脚本。

创建动态脚本：插入外部文件和直接插入 JavaScript 代码。

插入外部文件举例：

 function loadScript(url){

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

 script.type = "text/javascript";

 script.src = url;

 document.body.appendChild(script);

 }

 loadScript("client.js");

在执行最后一行代码把<script>元素添加到页面中之前，是不会下载外部文件的。

行内方式举例：

 //除了IE，都好用，因为IE不允许DOM操作script元素

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

 script.type = "text/javascript";

 script.appendChild(document.createTextNode("function sayHi(){alert('hi');}"));

 document.body.appendChild(script);‘

 //改用text属性，IE就好用了

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

 script.type = "text/javascript";

 script.text = "function sayHi(){alert('hi');}";

 document.body.appendChild(script);
//综合起来
function loadScriptString(code){
var script = document.createElement("script");
script.type = "text/javascript";
try {
script.appendChild(document.createTextNode(code));
} catch (ex){
script.text = code;
}
document.body.appendChild(script);
}

动态样式：在页面刚加载时不存在的样式。与动态脚本类似

码农公寓

相关文章