js学习笔记：DOM——节点层次

DOM（文档对象模型）是针对HTML和XML文档的一个API，描绘了一个层次化的节点树。
DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。
节点分为几种不同的类型。

文档节点是每个文档的根节点。html元素为文档元素。

文档元素是文档的最外层元素 文档中的其他所有元素都包含在文档元素中。 每个文档都只能有一个文档元素。

在html页面中，文档元素始终都是html元素。

Node类型

DOM1定义了一个Node接口，该接口将由DOM中的所有节点类型实现。

这个Node接口在js中是作为Node类型实现的。js中所有节点类型都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法。

nodeType属性

每一个节点都有一个nodeType属性，用于表明节点的类型。
节点类型由在Node类型中定义的下列12个数值常量来表示：

Node.ELEMENT_NODE（1） Node.ARRIBUTE_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与上面这些常量，可以很容易地确定节点的类型。

?

1 2 3

if(someNode.nodeType ==  Node.ELEMENT_NODE){     alert("node is an element"); }

为了确保跨浏览器兼容，最好还是将nodeType属性与属性值进行比较：

?

1 2 3

if(someNode.nodeType ==  1){     alert("node is an element"); }

nodeName和nodeValue属性

这两个属性值完全取决于节点的类型，因此在使用这两个值以前最好先检测一下节点的类型：

?

1 2 3

if(someNode.nodeType ==  1){     value = someNode.nodeName；   //nodeName的值是元素的标签名 }

在这个例子中，首先检查节点类型，看它是不是一个元素。
对于一个元素节点，nodeName中保存的始终都是元素的标签名，nodeValue的值则始终为null。

节点关系

childNodes

每个节点都有一个childNodes属性，其中保存着一个NodeList对象。

NodeList是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。

虽然可以通过方括号语法来访问NodeList的值，而且这个对象也有length属性，但它并不是Array类型的实例。

NodeList对象的独特之处在于，它实际上是基于DOM结构动态查询的结果，因此DOM结构的变化能够自动反映在NodeList中。

下面的例子展示了如何访问保存在NodeList中的节点：可以通过方括号，也可以使用item（）方法。

?

1 2 3

var firstChild = someNode.childNodes[0]; var secondChild = someNode.childNodes.item(1); var count = someNode.childNodes.length;

其中length属性表示的是访问NodeList的那一刻，其中包含的节点数量。

之前介绍过，对arguments对象使用Array.prototype.slice（）方法可以将其转换为数组，我们也可以对NodeList对象采取同样的方法，从而将其转换为数组：

?

1	var ArrayNodes = Array.prototype.slice.call（someNode.childNodes,0);

parentNode　

每个节点都有一个parentNode属性，该属性指向文档树中的父节点。

包含在childNodes列表中的所有节点都具有相同的父节点，因此他们的parentＮｏｄｅ属性都指向同一个节点。

previousSibling nextSibling

包含在childNodes列表中的每个节点相互之间都是同胞节点，通过使用每个节点的previousSibling和nextSibling属性，可以访问到同一列表中的其他节点。

列表中第一个节点的previousSibling属性为null。 列表中最后一个节点的nextSibling属性也为null。 如果列表中只有一个节点，那么该节点的previousSibling和nextSibling属性都为null

firstChild lastChild

父节点的firstChild属性指向其childNodes列表中的第一个节点。值始终等于childNodes[0]

父节点的lastChild属性指向其childNodes列表中的最后一个节点。值始终等于childNodes[childNodes.length-1]

在只有一个子节点的情况下，firstChild和lastChild指向同一个节点。

如果没有子节点，那么firstChild和lastChild都为null。

hasChildNodes（）

此方法在节点包含一或多个子节点的情况下返回true。
比查询childNodes列表的length属性更简单。

ownerDocument

所有节点都有这个属性，该属性指向标是整个文档的文档节点。

这种关系表示的是任何节点都属于它所在的文档，任何节点都不能同时存在于两个或更多个文档中。

通过这个属性，我们可以不必在节点层次中通过层层回溯到达顶端，而是可以直接访问文档节点。

操作节点

appendChild（）

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

?

1 2 3

var returnedNode = someNode.appendChild(newNode); alert(returnedNode == newNode); //true alert(someNode.lastChild == returnedNode); //true

如果传入到appendChild中的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新位置。
即使可以将DOM树看成是由一系列指针连接起来的，但任何DOM节点也不能同时出现在文档中的多个位置上。
因此，如果在调用appendChild（）时传入的是父节点的第一个子节点，那么该节点就会成为父节点的最后一个子节点。

?

1 2 3

var returnedNode = someNode.appendChild(someNode.firstChild); alert(someNode.firstChild == returnedNode); //false alert(someNode.lastChild == returnedNode); //true

insertBefore（）

如果需要把节点放在childNodes列表中某个特定的位置上，而不是放在末尾，那么可以使用insertBefore方法。这个方法接收两个参数：要插入的节点和作为参照的节点。

插入节点后，被插入的节点会变成参照节点的前一个同胞节点， 同时被方法返回。

如果参照节点是null，则insertBefore（）与appendChild（）执行相同的操作。

?

1 2 3 4 5 6 7 8 9 10 11 12

//插入后成为最后一个子节点 returnedNode = someNode.insertBefore(newNode,null); alert(someNode.lastChild == returnedNode); //true   //插入后成为第一个子节点 returnedNode = someNode.insertBefore(newNode,someNode.firstNode); alert(newNode == returnedNode); //true alert(someNode.firstChild == returnedNode); //true   //插入到最后一个子节点前面 returnedNode = someNode.insertBefore(newNode,someNode.lastNode); alert(returnedNode == someNode.childNodes[someNode.childNodes.length-2]); //true

到此介绍的appendChild（）和insertBefore（）都只插入节点，不会移除节点。

replaceChild（）

此方法接收两个参数，要插入的节点和要替换的节点。
要替换的节点将由这个方法返回并从文档树中移除，同时由要插入的节点占据其位置。

?

1 2 3 4 5

//替换第一个子节点 var returnedNode = someNode.replaceChild(newNode,someNode.firstChild);   //替换最后一个子节点 var returnedNode = someNode.replaceChild(newNode,someNode.lastChild);

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

removeChild（）

如果只想移除节点而不插入节点，可以使用removeChild（）方法。这个方法接收一个参数，即要移除的节点。被移除的节点将成为方法的返回值。

?

1 2 3 4 5

//移除第一个子节点 var returnedNode = someNode.removeChild(someNode.firstChild);   //移除最后一个子节点 var returnedNode = someNode.removeChild(someNode.lastChild);

与使用replaceChild（）方法一样，通过removeChild（）移除的节点仍然为文档所有，只不过在文档中已经没有了自己的位置。

前面介绍的几个方法操作的都是某个节点的子节点，也就是说，要使用这几个方法都要先取得父节点。
如果在不支持子节点的节点上调用了这些方法，这会导致错误发生。

其他方法

有两个方法是所有类型的节点都有的。

cloneNode（）

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

true：执行深复制，也就是复制节点及其整个子节点树。 false：执行浅复制，即只复制节点本身。

复制后返回的节点副本属于文档所有，但并没有为它指定父节点。

?

1

• item 1
• item 2
• item 3

?

1 2 3 4 5 6 7

//深复制 var deepList = myList.cloneNode(true); alert(deeplist.childNodes.length); //3   //浅复制 var deepList = myList.cloneNode(false); alert(deeplist.childNodes.length); //0

cloneNode（）方法不会复制添加到DOM节点中的js属性，例如事件处理程序等。这个方法只复制特性，子节点（深复制情况下），其他一切都不会复制。

normalize（）

这个方法唯一的作用就是处理文档树中的文本节点。
由于解析器的实现或DOM操作等问题，可能会出现文本节点不包含文本，或者接连出现两个文本节点的情况。
当在某个节点上调用这个方法时，就会在该节点的后代节点中查找上述两种情况：

如果找到了空文本节点则删除 如果找到相邻的文本节点则将它们合并为一个文本节点。

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

有两个内置的访问其子节点的快捷方式：

documentElement属性：该属性始终指向HTML页面中的< html >元素，较为方便快捷 通过childNodes列表访问文档元素

以下面的这个页面为例：

?

1

这个页面在经过浏览器解析后，其文档中只包含一个子节点，即html元素。可以通过documentElement属性或childNodes列表访问这个元素

?

1	var html = document.documentElement; ////取得对

的引用 alert(html == document.childNodes[0]); //true alert(html == document.firstChild); //true

这个例子说明，documentElement、childNodes[0]、firstChild都指向< html>元素。

body

作为HTMLDocument的实例，document对象还有一个body属性，直接指向< body >元素。

?

1	var body = document.body; //取得对

的引用

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

doctype

Document另一个可能的子节点是DocumentType。
通常将< !DOCTYPE>标签看成一个与文档其它部分不同的实体，可以通过doctype属性访问。

?

1	var doctype = document.doctype; // 取得对的引用

由于浏览器对document.doctype的支持不一致，因此这个属性的用处有限。

多数情况下，我们都用不着在document对象上调用appendChild（）、removeChild（）和replaceChild（）方法，因为文档类型（如果存在的话）是只读的，而且document只能有一个元素子节点。

文档信息

作为HTMLDocument的一个实例，document对象还有一些标准的Document对象所没有的属性，这些属性提供了document对象所表现的网页的一些信息。

title

title属性包含着< title >元素中的文本——显示在浏览器窗口的标题栏或标签页上。
通过这个属性可以取得当前页面的标题，也可以修改当前页面的标题并反映在浏览器的标题栏中。
修改title属性的值会改变< title >元素。

?

1 2 3 4 5

//取得文档标题 var originalTitle = document.title;   //设置文档标题 document.title = "new page title";

URL domain referrer

接下来介绍的三个属性都与对网页的请求有关，他们是URL、domain、referrer。

URL属性中包含着页面完整的URL（即地址栏中显示的URL） domain属性中只包含页面的域名 referrer属性中则保存着链接到当前页面的那个页面的URL。在没有来源页面的情况下，referrer属性中可能会包含空字符串。

所有这些信息都存在于请求的HTTP头部，只不过是通过这些属性让我们能够在js中访问它们而已。

?

1 2 3 4 5 6 7 8

//取得完整的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个属性中，只有domian是可以设置的。但由于安全方面的限制，也并非可以给domain设置任何值，不能将这个属性设置为URL中不包含的域。

?

1 2 3

//假设页面来自p2p.wrox.com域 document.domian = "wrox.com"; //成功 document.domain = "nzonline.net"; //出错

由于跨域安全限制，来自不同子域的页面无法通过js通信。而通过将每个页面的document.domain设置为相同的值，这些页面就可以互相访问对方包含的js对象了。

例如：有一个页面加载自www.wrox.com，其中包含一个内嵌框架，框架内的页面加载自p2p.wrox.com。由于document.domain字符串不一样，内外两个页面之间无法互相访问对方的js对象。但如果将这两个页面的document.domain都设置为“wrox.com”，它们之间就可以通信了。

浏览器对domain属性还有一个限制，如果域名一开始是“松散的”（loose），那么不能将它再设置为紧绷的（tight）。

?

1 2 3

//假设页面来自p2p.wrox.com域 document.domian = "wrox.com"; //松散的，成功 document.domain = "p2p.wrox.com"; //紧绷的，出错

查找元素

getElementById（）

接收一个参数：要取得的元素Id。如果找到相应的元素就返回该元素，如果没有找到就返回null。
这里的id必须和页面中元素的id特性严格匹配，包括大小写。

?

1

some text

下面的代码可以取得对div元素的引用：

?

1	var div = document.getElementById("myDiv");

下面的代码却会返回null

?

1	var div = document.getElementById("mydiv");

如果页面中多个元素的ID值相同，getElementById（）只返回文档中第一次出现的元素。

getElementsByTagName（）

这个方法接收一个参数，即要取得元素的标签名，返回的是包含零或多个元素的NodeList。在HTML文档中，这个方法会返回一个HTMLCollection对象，作为一个“动态”集合，该对象与NodeList类似。

?

1	var images = document.getElementsByTagName("img");

这行代码会将一个HTMLCollection对象保存在images变量中。与NodeList对象类似，可以使用方括号或item（）方法来访问HTMLCollection对象中的项。这个对象中元素的数量则可以通过其length属性取得。

?

1 2 3

images.length;  //输出图像的数量 images[0].src;  //输出第一个图像元素的src特性 iamges.item(0).src;  //输出第一个图像元素的src特性

HTMLCollection对象还有一个方法，叫做namedItem（），使用这个方法可以通过元素的name特性取得集合中的项。

?

1

?

1	var myImage = images.namedItem("myImage");

在提供按索引访问项的基础上，HTMLCollection还支持按名称访问项：

?

1	var myImage = images["myImage"];

总结来说，对HTMLCollection而言，我们可以向方括号中传入数值或字符串形式的索引值：

对数值索引就会调用item（） 对字符串索引就会调用namedItem（）

要取得文档中的所有元素，可以向getElementsByTagName（）中传入“ * ”。在js及css中，“ *“ 表示全部。

?

1	var allElements = document.getElementByTagName("*");

这行代码返回的HTMLCollection中，就包含了整个页面中的所有元素——按照他们出现的先后顺序。

虽然标签名是区分大小写的，但为了最大限度与既有html页面兼容，传给getElementByTagName（）中的标签名是不需要区分大小写的。但对于XML而言，getElementByTagName（）就会区分大小写。

getElementsByName（）

只有HTMLDocument类型才有的方法，这个方法会返回带有给定name特性的所有元素。
最常使用getElementsByName（）方法的情况是取得单选按钮，因为一般所有单选按钮都具有相同的name特性，这才能确保几个单选项中只有一个被发送给浏览器。
我们可以使用如下代码取得所有单选按钮：

?

1	var radios = document.getElementsByName("color");

与getElementsByTagName（）类似，getElementsByName（）方法也会返回一个HTMLCollection。
但是对这里取到的单选按钮来说，namedItem（）则只会取得第一项，因为每一项的name特性都相同。

特殊集合

除了属性和方法，document对象还有一些特殊的集合。这些集合都是HTMLCollection对象，为访问文档常用的部分提供了快捷方式。

document.anchors：包含文档中所有带name属性的< a >元素 document.applets：包含文档中所有的< applet >元素，因为不再使用推荐这个元素，所以这个集合已经不建议使用了。 document.forms：包含文档中所有的< form >元素 document.images：包含文档中所有的< img >元素 document.links：包含文档中所有带href属性的< a >元素

这个特殊集合始终都可以通过HTMLDocument对象访问到，而且集合中的项也会随着当前文档内容的更新而更新。

文档写入

document对象有一个功能，即将输出流写入到网页中。这个能力体现在下列4个方法中：

write（）

writeln（）

其中，write（）和writeln（）方法都接收一个字符串参数，即要写入输出流中的文本。

write（）会原样写入 writeln（）会在字符串的末尾添加一个换行符（\n）

在页面被加载的过程中，可以使用这两个方法向页面中动态地加入内容。
此外，还可以使用这两个方法动态地包含外部资源，例如js文件等。

在包含js文件时，注意不能直接包含字符串“< /script>”,因为这会导致该字符串被解释为脚本块的结束，它下面的代码将无法执行。
为避免这个问题，只需加入转义字符\即可：

?

1	document.write("<script type="\"text/javascript\""> src=\"file.js\">"+ "<\/script>")

这样，字符串”<\ /script>”不会被当做外部< script >标签的关闭标签。

前面的例子使用document.write( )在页面被呈现的过程中直接向其中输出了内容。 
如果在文档加载结束后再调用document.write（），那么输出的内容将会重写整个页面。

?

1 2 3

window.onload = function(){     document.write("hello world"); }

在这个例子中，我们等到页面完全加载之后才执行函数，这时字符串”hello world”会重写整个页面内容。

open（）

close（）

这两个方法分别用于打开和关闭网页的输出流。如果实在页面加载期间使用write（）或writeln（）方法，则不需要用到这两个方法。

Element类型

Element类型用于表现XML或HTML元素，Element节点具有以下特征：

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

要访问元素的标签名，可以使用nodeName属性，也可以使用tagName属性；这两个属性会返回相同的值。

?

1	<div id="myDiv">some text</div>

?

1 2 3

var div = document.getElementById("myDiv"); div.tagName;  //"DIV" div.nodeName == div.tagName; //true

在html中，标签名始终都以全部大写表示；而在XML中，标签名则始终会与源代码中的保持一致。假如不确定脚本将会在html或xml中执行，最好还是在比较之前将标签名转换为相同的大小写形式。

?

1	if(element.tagName.toLowerCase() == "div"){ }

HTML元素

所有HTML元素都由HTMLElement类型或其子类型表示。HTMLElement继承自Element并添加了一些属性。添加的这些属性分别对应于每个HTML元素中都存在的下列标准特性：

id title：有关元素的附加说明信息，一般通过工具提示条显示出来 lang：元素内容的语言代码，很少使用 dir：语言的方向，值为“ltr”或“rtl” className：与元素的class特性对应，没有命名为class是因为class是ECMAscript的保留字。

上述这些属性都可以用来取得或修改相应的特性值。

?

1	<div id="myDiv" class="bd" title="body text" lang="en" dir="ltr"></div>

?

1 2 3 4 5

var div = document.getElementById("myDiv"); div.id; //"myDiv" div.className; //"bd" div.title = "some other text"; div.lang = "fr";

并不是对所有属性的修改都会在页面中直观地表现出来。

对id、lang的修改对用户而言是不可见的（如果没有基于它们设置的css样式） 对title的修改则只会在鼠标移动到这个元素上时才会显示出来 对dir的修改则会在属性被重写的那一刻，立即影响页面中文本的左右 修改className时，如果新类关联了与此前不同的css样式，那么就会立即应用新的样式

取得特性

getAttribute（）

用于取得特性值。 
注意：传递给getAttribute（）的特性名与实际的特性名相同，因此要想得到class特性值，应传入“class”而不是“className”。 
如果给定的特性名称不存在，此方法返回null。

通过getAttribute（）方法也可以取得自定义特性。

?

1	<div id="myDiv" my_special_attribute="hello"></div>

?

1	var value = div.getAttribute("my_special_attribute");

不过，特性的名称是不区分大小写的，即“ID”和“id”表示的是同一个特性。

另外，根据HTML5规范，自定义特性应该加上data-前缀以便验证。

任何元素的特性也都可以直接通过DOM元素本身的对应属性来访问（如div.id）。但是自定义特性则不会有对应的属性，只能以getAttribute（）来获取。

有两类特殊的特性，它们虽然有对应的属性名，但属性的值与通过getAttribute（）返回的值并不相同。

第一类：style 
在通过getAttribute（）访问时，返回的style特性值中包含的是CSS文本 通过属性访问则会返回一个对象 第二类：onclick这样的事件处理程序。在元素上使用时，onclick特性中包含的是js代码。 
通过getAttribute（）访问，就会返回相应代码的字符串 访问onclick属性，则会返回一个js函数（如果未在元素中指定相应特性则返回null）。

由于存在这些差别，开发过程中不经常使用getAttribute（），而是只使用对象的属性。在取得自定义特性值的时候才使用getAttribute方法。

设置特性

setAttribute（）

这个方法接收两个参数：要设置的特性名和值。

特性已经存在，则会以指定的值替换现有的值 特性不存在，会创建该属性并设置相应的值

?

1	div.setAttribute("id","someOtherId");

通过setAttribute（）方法既可以操作HTML特性也可以操作自定义特性。通过这个方法设置的特性名会被统一转换为小写形式，即“ID”会变成“id”。

因为所有特性都是属性，所以直接给属性赋值也可以设置特性的值：

?

1	div.id = "someOtherId";

不过，给元素添加一个自定义的属性，该属性不会自动成为元素的特性：

?

1 2	div.myColor = "red"; div.getAttribute("myColor"); //null

总结一下元素特性与自定义特性： 
* 在元素中设置特性，可以通过属性获得元素特性，却不能获得自定义特性，只能用getAttribute（）方法获得。 
* 设置元素的属性，通过getAttribute（）无法获得自定义属性对应的特性，而可以获得元素特性。 
即，元素特性和属性是对应的，但自定义的却无法自动在有属性或特性的情况下添加对应的特性或属性。

removeAttribute（）

这个方法用于彻底删除元素的特性。 
调用这个方法不仅会清除特性的值，而且也会从元素中完全删除特性。

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特性，可以使用以下代码：

?

1	var id = element.attributes.getNamedItem("id").nodeValue;

也可以使用方括号语法通过特性名称访问节点：

?

1	var id = element.attributes["id"].nodeValue;

也可以使用这种语法来设置特性的值，即先取得特性节点，然后再将其nodeValue设置为新值。

?

1	var id = element.attributes["id"].nodeValue = "someOtherId"

调用removeNamedItem（）方法与在元素上调用removeAttribute（）方法的效果相同——直接删除具有给定名称的特性。两个方法唯一的区别就是，removeNamedItem（）返回表示被删除特性的Attr节点：

?

1	var oldAttr = element.attributes.removeNamedItem("id");

最后，setNamedItem（）是个很不常用的方法，通过这个方法可以为元素添加一个新特性，但需要为它传入一个特性节点。

一般来说，由于使用attributes的各种方法不够方便，一般还是使用getAttribute（），setAttribute（），removeAttribute（）比较多。

不过，要想遍历元素的特性，attributes属性倒是可以派上用场。

针对attributes对象中的特性，不同浏览器返回的顺序不同。

创建元素

document.createElement（）

这个方法可以创建新元素。只接受一个参数，即要创建元素的标签名。这个标签名在html中不区分大小写，而在xml中则是区分大小写的。 
此方法返回这个新元素的引用。

?

1	var div = document.createElement("div");

在使用createElement（）方法创建新元素的同时，也为新元素设置了ownerDocument属性。

新创建的元素未被添加到文档树中，可以使用appendChild，insertBefore、replaceChild等方法把新创建的元素添加到文档中：

?

1	document.body.appendChild(div);

一旦将元素添加到文档树中，浏览器就会立即呈现该元素。此后，对这个元素所做的任何修改都会实时反映在浏览器中。

元素的子节点

元素可以有任意数目的子节点和后代节点，因为元素可以是其他元素的子节点。 
元素的childNodes属性中包含了它的所有子节点，这些子节点可能是元素、文本节点、注释或处理指令。

不同浏览器在看到节点方面有差异：

?

1 2 3 4 5

<ul>     <li>item 1</li>     <li>item 2</li>     <li>item 3</li> </ul>

对于以上代码，如果ie解析则ul会有3个节点；其他浏览器则会看做7个子节点（3个li节点加上li元素之间的4个空白符）。但如果像下面这样将元素间的空白符删除，那么所有浏览器都会返回相同数目的子节点。

?

1	<ul><li>item 1</li><li>item 2</li><li>item 3</li></ul>

元素也支持getElementsByTagName（）方法，会返回符合条件的后代元素。

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中也保存着同样的值。

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

?

1 2 3

<div> 没有内容，也就没有文本节点 <div>  有空格，也就有一个文本节点 <div>hello world 有内容，也就有一个文本节点</div></div></div>

可以使用如下代码来访问这些文本子节点：

?

1 2	var textNode = div.firstChild; var textNode = div.childNodes[0];

在取得文本节点的引用后，就可以像下面这样来修改它了：

?

1	div.firstChild.nodeValue = "some other message";

如果这个文本节点当前存在于文档树中，那么修改文本节点的结果就会立即得到反映。 
另外，在修改文本节点时还要注意，此时的字符串会经过HTML编码。也就是说，这是在向DOM文档中插入文本之前，先对其进行HTML编码的一种有效方式。

创建文本节点

document.createTextNode（）

可以使用此方法创建新文本节点，这个方法接收一个参数，即要插入节点中的文本。 
与设置已有文本节点的值一样，作为参数的文本也将按照HTML的格式进行编码。

?

1	var textNode = document.createTextNode("<strong>Hello</strong> world!");

在创建新文本节点的同时，也会为其设置ownerDocument属性。 
不过，除非把新节点添加到文档树中已经存在的节点中，否则我们不会在浏览器窗口中看到新节点。

一般情况下，每个元素只有一个文本子节点。不过在某些情况下也可能包含多个文本子节点，如果两个文本节点是相邻的同胞节点，那么这两个节点中的文本就会连起来显示，中间不会有空格。

规范化文本节点

DOM文档中出现相邻的同胞文本节点很容易导致混乱，因此就催生了一个能够将相邻文本节点合并的方法。

normalize（）

这个方法由Node类型定义。 
如果在一个包含两个或多个文本节点的父元素上调用normalize（）方法，则会将所有文本节点合并成一个节点。结果节点的nodeValue等于将合并前每个文本节点的nodeValue值拼接起来的值。

浏览器在解析文档时永远不会创建相邻的文本节点。这种情况只会作为执行DOM操作的结果出现。

分隔文本节点

Text类型提供了一个作用域normalize（）相反的方法：

splitText（）

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

?

1 2 3 4 5

var textNode = div.firstChild; //"hello world" var newNode = textNode.splitText(5); div.firstChild.nodeValue; //"hello" newNode.nodeValue; //" world" div.childNodes.length; //2

分隔文本节点是从文本节点中提取数据的一种常用DOM解析技术。

Comment类型

注释在DOM中是通过Comment类型来表示的。Comment节点具有以下特征：

nodeType：值为8 nodeName：值为“#comment” nodeValue：值是注释的内容 parentNode：可能是Document或Element 没有子节点

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

?

1	<div id="myDiv"><!--a comment--></div>

?

1 2 3

var div = document.getElementById("myDiv"); var comment = div.firstChild; comment.data; //"a comment"

document.createComment（）

使用此方法可以为其传递注释文本也可以创建注释节点。

?

1	var comment = div.createComment（"a comment"）;

浏览器并不会识别< /html>标签后面的注释。如果要访问注释节点，一定要保证其是< html>元素的后代。

</script>