1、节点节点类型DOM定义了 Node的接口以及许多种节点类型来表示节点的多个方面! Document最顶层的节点，所有的其他节点都是附属于它的。 DocumentTypeDTD引用（使用语法）的对象表现形式，例如。它不能包含子节点。 DocumentFragment可以像 Document一样来保存其他节点。 Element表示起始标签和结束标签之间的内容，例如或者。这是唯一可以同时包含特性和子节点的节点类型。 Attr代表一对特性名和特性值。这个节点类型不能包含子节点。 Text代表 XML文档中的在起始标签和结束标签之间，或者 CData Section内包含的普通文本。这个节点类型不能包含
2、子节点。 CDataSection的对象表现形式。这个节点类型仅能包含文本节点 Text作为子节点。 Entity表示在 DTD中的一个实体定义，例如。这个节点类型不能包含子节点。 EntityReference代表一个实体引用，例如。这个节点类型不能包含子节点。 ProcessingInstruction代表一个 PI(处理指令)。这个节点类型不能包含子节点。 Comment代表注释。这个节点类型不能包含子节点。 Notation代表在 DTD中定义的记号。这个很少用到，所以我们不会讨论。 还定义了对应不同节点类型的 12个常量. Node.ELEMENT_NODE (1) Node.ATT
3、RIBUTE_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) 节点类型常量都是 Node对象的属
4、性，但是 IE不支持 Node对象,但是仍可以使用数值 Node接口也定义了一些所有节点类型都包含的特性和方法。我们在下面的表格中列出了这些特性和方法：特性/方法 类型/返回类 型 说 明nodeName String节点的名字；根据节点的类型而定义,元素节点返回 tagName，文本节点返回#text,属性节点返回属性名nodeValue String节点的值；根据节点的类型而定义.元素节点此属性为空，文本节点些属性即为节点中的字符串，属性节点返回属性值nodeType Number 节点的类型常量值之一ownerDocument Document 指向这个节点所属的文档firstChild
5、 Node 指向在 childNodes列表中的第一个节点lastChild Node 指向在 childNodes列表中的最后一个节点childNodes NodeList 所有子节点的列表previousSibling Node 指向前一个兄弟节点；如果这个节点就 是第一个兄弟节点，那么该值为 nullnextSibling Node 指向后一个兄弟节点；如果这个节点就是最后一个兄弟节点，那么该值为 nullhasChildNodes() Boolean 当 childNodes包含一个或多个节点时， 返回真attributes NamedNodeMap 包含了代表一个元素的特性的 Att
6、r对象；仅用于 Element节点appendChild(node) Node 将 node添加到 childNodes的末尾removeChild(node) Node 从 childNodes中删除 nodereplaceChild (newnode,oldnode) Node将 childNodes中的 oldnode替换成newnodeinsertBefore (newnode,refnode) Node在 childNodes中的 refnode之前插入newnode除节点外，DOM 还定义了一些助手对象，它们可以和节点一起使用，但不是 DOM文档必有的部分。 NodeList节点数
7、组，按照数值进行索引；用来表示一个元素的子节点。比如 childNodes。NodeList 有个 length属性表示节点数量 NamedNodeMap同时用数值和名字进行索引的节点表；用于表示元素特性。比如元素的 attributes。NamedNodeMap 对象也有一个 length属性来指示它所包含的节点的数量。 这些助手对象为处理 DOM文档提供附加的访问和遍历方法。属性节点正如前面提到的，即便 Node接口已具有 attributes方法，且已被所有类型的节点继承，然而，只有 Element节点才能有特性。Element 节点的attributes属性其实是 NamedNodeM
8、ap，它提供一些用于访问和处理其内容的方法： getNamedItem(name)返回 nodeName属性值等于 name的节点； removeNamedItem(name)删除 nodeName属性值等于 name的节点； setNamedItem(node)将 node添加到列表中，按其 nodeName属性进行索引； item(pos)像 NodeList一样，返回在位置 pos的节点； 请记住这些方法都是返回一个 Attr节点，而非特性值。 当 NamedNodeMap用于表示特性时，其中每个节点都是 Attr节点，它的nodeName属性被设置为特性名称，而 nodeValue属性
9、被设置为特性的值。示例：Some Text!var p1 = document.getElementById(“p1“);/访问 ID 属性alert(p1.attributes.getNamedItem(“id“).nodeValue;/也可以用数值来访问 ID 属性alert(p1.attributes.item(0).nodeValue;/也可以改变它的值p1.attributes.getNamedItem(“id“).nodeValue = “newP1“;Attr节点也有一个完全等同于（同时也完全同步于）nodeValue 属性的value属性，并且有 name属性和 nodeNam
10、e属性保持同步。我们可以随意使用这些属性来修改或变更特性。但这些方法都比较复杂，所以 DOM又定义了三个元素方法来帮助访问特性： getAttribute(name)等于 attributes.getNamedItem(name).value setAttribute(name, newValue)等于attribute.getNamedItem(name).value = newValue removeAttribute(name)等于 attributes.removeNamedItem(name) NodeList事实上我们早接触过 NodeList了var allTags = docu
11、ment.getElementsByTagName(“*“);alert(allTags.item(1).tagName);/访问了第二个元素alert(allTags0);/在 JavaScript 可以这样访问第一个元素，但这只能是 JavaScript 里正常运行getElementsByTagName与 getElementsByName都返回 NodeList，可以使用item(index)方法访问其中的内容，在 JavaScript中还可使用数组形式的下标访问！创建和操纵节点迄今为止，已经学过了如何访问文档中的不同节点，不过这仅仅是使用DOM所能实现的功能中的很小一部分。还能添加、
12、删除、替换（或者其他操作）DOM文档中的节点。正是这些功能使得 DOM具有真正意义上的动态性。创建新节点DOM Document（文档）中有一些方法用于创建不同类型的节点，即便在所有的浏览器中的浏览器 document对象并不需要全部支持所有的方法。下面的表格列出了包含在 DOM Level 1中的方法，并列出不同的浏览器是否支持项。方 法 描 述 IE MOZ OP SAFcreateAttribute (name) 用给定名称 name创建特性节点 createCDATASection (text)用包含文本 text的文本子节点创建一个 CDATA Section createComme
13、nt(text) 创建包含文本 text的注释节点 createDocumentFragment() 创建文档碎片节点 createElement (tagname) 创建标签名为 tagname的元素 createEntity Reference(name) 创建给定名称的实体引用 节点 createProcessing Instruction(target, data)创建包含给定 target和data的 PI节点 createTextNode(text) 创建包含文本 text的文本节点 注：IE = Windows 的 IE 6；MOZ = 任意平台的 Mozilla 1.5；OP=
14、任意平台的 Opera 7.5；SAF=MacOS 的 Safari 1.2最常用到的几个方法是：createDocumentFragment()、createElement()和 createText- Node()；其他的一些方法要么就是没什么用（createComment()），要么就是浏览器的支持不够，目前还不太能用。动态创建一个段落示例var p = document.createElement(“p“);/创建一个元素节点，传入标签名var txt = document.createTextNode(“创建文本节点, 传参数即是文本内容“);p.appendChild(txt);/
15、将 txt 所引用的文本节点插入 p 到 p 的最后面(在这里 p 是空的)/直到现在，页面不会出现任何内容，必须将创建的节点插入到文档中document.body.appendChild(p);/p 将出现在最后移动，删除节点方法及注意事项appendChild,removeChild,replaceChild,insertBeforevar p1 = document.getElementById(“p1“);document.body.appendChild(p1);/p1 将会被作为 body 的最后一个子节点，然而页面上仍只有一个 pp1.parentNode.removeChild
16、(p1);/removeChild 必须是要删除的节点的父节点调用/p1 将会从页面上消失，然而它并没有完全消失，我们还可以再将其插入文档document.body.appendChild(p1);/因为变量 p1 包含了节点的引用var p2 = document.getElementById(“p2“);p2.parentNode.replaceChild(p1,p2);/p2 将会被替换成 p1，p2将消失/而 p1 将从原来的位置移到 p2 的位置克隆节点cloneNode基于上面的原因，DOM 为我们提供了一个克隆节点的方法用于生成一个节点的副本var p1 = document.getElementById(“p1“);var p2 = p1.cloneNode();document.body.appendChild(p2);/页面上将会多出一个段落 ,不过段落中什么都没有p2 = p1.cloneNode(true);/使用参数 true 表示克隆节点时包含子节点document.body.appendChild(p2);
