文档对象模型(DOM)的技巧和诀窍

文档对象模型(DOM)的技巧和诀窍

文档对象模型（Document Object Model，DOM）是用于操纵 XML 和 HTML 数据的最常用工具之一，然而它的潜力却很少被充分挖掘出来。通过利用 DOM 的优势，并使它更加易用，您将获得一款应用于 XML 应用程序（包括动态 Web 应用程序）的强大工具。

　　本期文章介绍了一位客串的专栏作家，同时也是我的朋友和同事 Dethe Elza。Dethe 在利用 XML 进行 Web 应用程序开发方面经验丰富，在此，我要感谢他对我在介绍使用 DOM 和 ECMAScript 进行 XML 编程这一方面的帮助。

—— David Mertz

　　DOM 是处理 XML 和 HTML 的标准 API 之一。由于它占用内存大、速度慢，并且冗长，所以经常受到人们的指责。尽管如此，对于很多应用程序来说，它仍然是最佳选择，而且比 XML 的另一个主要 API —— SAX 无疑要简单得多。DOM 正逐渐出现在一些工具中，比如 Web 浏览器、SVG 浏览器、OpenOffice，等等。

　　DOM 很好，因为它是一种标准，并且被广泛地实现，同时也内置到其他标准中。作为标准，它对数据的处理与编程语言无关（这可能是优点，也可能是缺点，但至少使我们处理数据的方式变得一致）。DOM 现在不仅内置于 Web 浏览器，而且也成为许多基于 XML 的规范的一部分。既然它已经成为您的工具的一部分，并且或许您偶尔还会使用它，我想现在应该充分利用它给我们带来的功能了。 网页教学网

　　在使用 DOM 一段时间后，您会看到形成了一些模式 —— 您想要反复做的事情。快捷方式可以帮助您处理冗长的 DOM，并创建自解释的、优雅的代码。这里收集了一些我经常使用的技巧和诀窍，还有一些 javascript 示例。

insertAfter 和 prependChild

第一个诀窍就是“没有诀窍”。DOM 有两种方法将孩子节点添加到容器节点（常常是一个 Element，也可能是一个 Document 或 Document Fragment）：appendChild(node) 和 insertBefore(node, referenceNode)。看起来似乎缺少了什么。假如我想在一个参考节点后面插入或者由前新增（prepend）一个子节点（使新节点位于列表中的第一位），我该怎么做呢？很多年以来，我的解决方法是编写下列函数：

　　清单 1. 插入和由前新增的错误方法

function insertAfter(parent, node, referenceNode) { if(referenceNode.nextSibling) { parent.insertBefore(node, referenceNode.nextSibling); } else { parent.appendChild(node); } } function prependChild(parent, node) { if (parent.firstChild) { parent.insertBefore(node, parent.firstChild);

} else { parent.appendChild(node); } }

　　实际上，像清单 1 一样，insertBefore() 函数已经被定义为，在参考节点为空时返回到 appendChild()。因此，您可以不使用上面的方法，而使用 清单 2 中的方法，或者跳过它们仅使用内置函数：

　　清单 2. 插入和由前新增的正确方法

function insertAfter(parent, node, referenceNode) { parent.insertBefore(node, referenceNode.nextSibling); } function prependChild(parent, node) { parent.insertBefore(node, parent.firstChild); }

　　如果您刚刚接触 DOM 编程，有必要指出的是，虽然您可以使多个指针指向一个节点，但该节点只能存在于 DOM 树中的一个位置。因此，如果您想将它插入到树中，没必要先将它从树中移除，因为它会自动被移除。当重新将节点排序时，这种机制很方便，仅需将节点插入到新位置即可。

　　根据这种机制，若想交换两个相邻节点（称为 node1 和 node2）的位置，可以使用下列方案之一：

node1.parentNode.insertBefore(node2, node1); 或 node1.parentNode.insertBefore(node1.nextSibling, node1); 网页教学网

 

　　还可以使用 DOM 做什么？

　　Web 页面中大量应用了 DOM。若访问 bookmarklets 站点（参阅 参考资料），您会发现很多有创意的简短脚本，它们可以重新编排页面，提取链接，隐藏图片或 Flash 广告，等等。

　　但是，因为 Internet Explorer 没有定义 Node 接口常量（可以用于识别节点类型），所以您必须确保在遗漏接口常量时，首先为 Web 在 DOM 脚本中定义接口常量。

　　清单 3. 确保节点被定义

if (!window['Node']) { window.Node = new Object(); 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; }

　　清单 4 展示如何提取包含在节点中的所有文本节点：

　　清单 4. 内部文本

function innerText(node) { // is this a text or CDATA node?

if (node.nodeType == 3 || node.nodeType == 4) { return node.data; } var i; var returnValue = []; for (i = 0; i < node.childNodes.length; i++) { returnValue.push(innerText(node.childNodes[i])); } return returnValue.join(''); }

　　快捷方式

　　人们常常抱怨 DOM 太过冗长，并且简单的功能也需要编写大量代码。例如，如果您想创建一个包含文本并响应点击按钮的 <div> 元素，代码可能类似于：

　　清单 5. 创建 <div> 的“漫长之路”

function handle_button() { var parent = document.getElementById('myContainer'); var div = document.createElement('div'); div.className = 'myDivCSSClass'; div.id = 'myDivId'; div.style.position = 'absolute'; div.style.left = '300px'; div.style.top = '200px'; var text = "This is the first text of the rest of this code"; var textNode = document.createTextNode(text); div.appendChild(textNode); parent.appendChild(div); 网页教学网 }

　　若频繁按照这种方式创建节点，键入所有这些代码会使您很快疲惫不堪。必须有更好的解决方案 —— 确实有这样的解决方案！下面这个实用工具可以帮助您创建元素、设置元素属性和风格，并添加文本子节点。除了 name 参数，其他参数都是可选的。

　　清单 6. 函数 elem() 快捷方式

function elem(name, attrs, style, text) { var e = document.createElement(name); if (attrs) { for (key in attrs) { if (key == 'class') { e.className = attrs[key]; } else if (key == 'id') { e.id = attrs[key]; } else { e.setAttribute(key, attrs[key]); } } } if (style) { for (key in style) { e.style[key] = style[key]; } } if (text) { e.appendChild(document.createTextNode(text)); } return e; }

　　使用该快捷方式，您能够以更加简洁的方法创建 清单 5 中的 <div> 元素。注意，attrs 和 style 参数是使用 JavaScript 文本对象而给出的。

　　清单 7. 创建 <div> 的简便方法

function handle_button() { Webjx.Com var parent = document.getElementById('myContainer'); parent.appendChild(elem('div', {class: 'myDivCSSClass', id: 'myDivId'} {position: 'absolute', left: '300px', top: '200px'}, 'This is the first text of the rest of this code')); }

　　在您想要快速创建大量复杂的 DHTML 对象时，这种实用工具可以节省您大量的时间。模式在这里就是指，如果您有一种需要频繁创建的特定的 DOM 结构，则使用实用工具来创建它们。这不但减少了您编写的代码量，而且也减少了重复的剪切、粘贴代码（错误的罪魁祸首），并且在阅读代码时思路更加清晰。

　　接下来是什么？

　　DOM 通常很难告诉您，按照文档的顺序，下一个节点是什么。下面有一些实用工具，可以帮助您在节点间前后移动：

　　清单 8. nextNode 和 prevNode

// return next node in document order function nextNode(node) { if (!node) return null; if (node.firstChild){ return node.firstChild; } else { return nextWide(node); } } // helper function for nextNode() function nextWide(node) { if (!node) return null; if (node.nextSibling) { return node.nextSibling; } else { return nextWide(node.parentNode); } } // return previous node in document order function prevNode(node) { if (!node) return null; if (node.previousSibling) { return previousDeep(node.previousSibling); } return node.parentNode; } // helper function for prevNode() function previousDeep(node) { if (!node) return null; while (node.childNodes.length) { node = node.lastChild; } return node; }

　　轻松使用 DOM

　　有时候，您可能想要遍历 DOM，在每个节点调用函数或从每个节点返回一个值。实际上，由于这些想法非常具有普遍性，所以 DOM Level 2 已经包含了一个称为 DOM Traversal and Range 的扩展（为迭代 DOM 所有节点定义了对象和 API），它用来为 DOM 中的所有节点应用函数和在 DOM 中选择一个范围。因为这些函数没有在 Internet Explorer 中定义（至少目前是这样），所以您可以使用 nextNode() 来做一些类似的事情。

　　在这里，我们的想法是创建一些简单、普通的工具，然后以不同的方式组装它们来达到预期的效果。如果您很熟悉函数式编程，这看起来会很亲切。Beyond JS 库（参阅 参考资料）将此理念发扬光大。 网页教学网

　　清单 9. 函数式 DOM 实用工具

// return an Array of all nodes, starting at startNode and // continuing through the rest of the DOM tree function listNodes(startNode) { var list = new Array(); var node = startNode; while(node) { list.push(node); node = nextNode(node); } return list; } // The same as listNodes(), but works backwards from startNode. // Note that this is not the same as running listNodes() and // reversing the list. function listNodesReversed(startNode) { var list = new Array(); var node = startNode; while(node) { list.push(node); node = prevNode(node); } return list; } // apply func to each node in nodeList, return new list of results function map(list, func) { var result_list = new Array(); for (var i = 0; i < list.length; i++) { result_list.push(func(list[i])); } return result_list; } // apply test to each node, return a new list of nodes for which // test(node) returns true function filter(list, test) { var result_list = new Array(); for (var i = 0; i < list.length; i++) { if (test(list[i])) result_list.push(list[i]); } return result_list; }

　　清单 9 包含了 4 个基本工具。listNodes() 和 listNodesReversed() 函数可以扩展到一个可选的长度，这与 Array 的 slice() 方法效果类似，我把这个作为留给您的练习。另一个需要注意的是，map() 和 filter() 函数是完全通用的，用于处理任何 列表（不只是节点列表）。现在，我向您展示它们的几种组合方式。

　　清单 10. 使用函数式实用工具

// A list of all the element names in document order function isElement(node) { return node.nodeType == Node.ELEMENT_NODE; } function nodeName(node) { return node.nodeName; } var elementNames = map(filter(listNodes(document),isElement), nodeName); // All the text from the document (ignores CDATA) function isText(node) { return node.nodeType == Node.TEXT_NODE; } function nodeValue(node) { 网页教学网 return node.nodeValue; } var allText = map(filter(listNodes(document), isText), nodeValue);

　　您可以使用这些实用工具来提取 ID、修改样式、找到某种节点并移除，等等。一旦 DOM Traversal and Range API 被广泛实现，您无需首先构建列表，就可以用它们修改 DOM 树。它们不但功能强大，并且工作方式也与我在上面所强调的方式类似。

　　DOM 的危险地带

　　注意，核心 DOM API 并不能使您将 XML 数据解析到 DOM，或者将 DOM 序列化为 XML。这些功能都定义在 DOM Level 3 的扩展部分“Load and Save”，但它们还没有被完全实现，因此现在不要考虑这些。每个平台（浏览器或其他专业 DOM 应用程序）有自己在 DOM 和 XML间转换的方法，但跨平台转换不在本文讨论范围之内。

　　DOM 并不是十分安全的工具 —— 特别是使用 DOM API 创建不能作为 XML 序列化的树时。绝对不要在同一个程序中混合使用 DOM1 非名称空间 API 和 DOM2 名称空间感知的 API（例如，createElement 和 createElementNS）。如果您使用名称空间，请尽量在根元素位置声明所有名称空间，并且不要覆盖名称空间前缀，否则情况会非常混乱。一般来说，只要按照惯例，就不会触发使您陷入麻烦的临界情况。

　　如果您一直使用 Internet Explorer 的 innerText 和 innerHTML 进行解析，那么您可以试试使用 elem() 函数。通过构建类似的一些实用工具，您会得到更多便利，并且继承了跨平台代码的优越性。将这两种方法混合使用是非常糟糕的。

　　某些 Unicode 字符并没有包含在 XML 中。DOM 的实现使您可以添加它们，但后果是无法序列化。这些字符包括大多数的控制字符和Unicode 代理对（surrogate pair）中的单个字符。只有您试图在文档中包含二进制数据时才会遇到这种情况，但这是另一种转向（gotcha）情况。

　　结束语

　　我已经介绍了 DOM 能做的很多事情，但是 DOM（和 JavaScript）可以做的事情远不止这些。仔细研究、揣摩这些例子，看看是如何使用它们来解决可能需要客户端脚本、模板或专用 API 的问题。

　　DOM 有自己的局限性和缺点，但同时也拥有众多优点：它内置于很多应用程序中；无论使用 Java 技术、Python 或 JavaScript，它都以相同方式工作；它非常便于使用 SAX；使用上述的模板，它使用起来既简洁又强大。越来越多的应用程序开始支持 DOM，这包括基于 Mozilla的应用程序、OpenOffice 和 Blast Radius 的 XMetaL。越来越多的规范需要 DOM，并对它加以扩展（例如，SVG），因此 DOM 时时刻刻就在您的身边。使用这种被广泛部署的工具，绝对是您的明智之举。

文档对象模型(DOM)的基本方法 一.直接引用结点 1.document.getElementById(id); --在文档里面通过id来找结点 2.document.getElementByTagName(tagName); --返回一个数组，包含对这些结点的引用 --如：document.getElementByTagName("span");将返回所有类型为span的结点

二.间接引用结点 3.element.childNodes --返回element的所有子结点,可以用element.childNodes[i]的方式来调用 --element.firstChild=element.childNodes[0]; --element.lastChild=element.childNodes[element.childNonts.length-1]; 4.element.parentNode --引用父结点 5.element.nextSibling; //引用下一个兄弟结点 element.previousSibling; //引用上一个兄弟结点

三.获得结点信息 6.nodeName属性获得结点名称 --对于元素结点返回的是标记名称,如：<a herf><a>返回的是"a" --对于属性结点返回的是属性名称,如：class="test" 返回的是test --对于文本结点返回的是文本的内容 7.nodeType返回结点的类型 --元素结点返回1 --属性结点返回2 --文本结点返回3 8.nodeValue返回结点的值 网页教学网

--元素结点返回null --属性结点返回undefined --文本结点返回文本内容 9.hasChildNodes()判断是否有子结点 10.tagName属性返回元素的标记名称 --这个属性只有元素结点才有，等同于元素结点的nodeName属性

四.处理属性结点 11.每个属性结点都是元素结点的一个属性，可以通过(元素结点.属性名称)访问 12.利用setAttribute()方法给元素结点添加属性 --elementNode.setAttribute(attributeName,attributeValue); --attributeName为属性的名称，attributeValue为属性的值 13.使用getAttribute()方法获得属性值 --elementNode.getAttribute(attributeName);

五.处理文本结点 14.innerHTML和innerText属性，这两个方法相信大家都很熟悉,不介绍了,值得注意的是无论是ie还是firefox都容易把空格、换行、制表符等当成文本结点。所有一般通过element.childNodes[i]引用文本结点的时候，一般要处理： <script language"javaScript" type="text/javascript"> function cleanWhitespace(element) { for(var i=0; i<element.childNotes.length; i++) { var node = element.childNodes[i];

if(node.nodeType == 3 && !//S/.test(node.nodeValue)) { node.parentNode.removeChild(node); } } } </script>

六.改变文档的层次结构 15.document.createElement()方法创建元素结点 --如：document.createElement("Span"); 16.document.createTextNode()方法创建文本结点 --如：document.createTextNode(" "); //注:他不会通过html编码，也就是说这里创建的不是空格，而是字符串 17.使用appendChild()方法添加结点 --parentElement.appendChild(childElement); 18.使用insertBefore()方法插入子节点 --parentNode.insertBefore(newNode,referenceNode); --newNode为插入的节点，referenceNode为将插入的节点插入到这之前 19.使用replaceChild方法取代子结点 --parentNode.replaceChild(newNode,oldNode); --注：oldNode必须是parentNode的子结点, 20.使用cloneNode方法复制结点 --node.cloneNode(includeChildren); --includeChildren为bool，表示是否复制其子结点 21.使用removeChild方法删除子结点 --parentNode.removeChild(childNode); 网页教学网

七.表格的操作 --注：ie中无法直接将一个完整的表格结点插入到文档中 22.添加行和单元格 var _table=document.createElement("table"); //创建表 table.insertRow(i); //在table的第i行插入行 row.insertCell(i); //在row的第i个位置插入单元格 23.引用单元格对象 --table.rows[i].cells[i]; 24.删除行和单元格 --table.deleteRow(index); --row.deleteCell(index); 25.交换两行获得两个单元格的位置 node1.swapNode(node2); --这个方法在firefox中将出错通用方法： function swapNode(node1,node2) { var _parent=node1.parentNode; var _t1=node1.nextSubling; var _t2=node2.nextSubling; if(_t1)parent.insertBefore(node2,_t1); else _parent.appendChild(node2); if(_t2)parent.insertBefore(node1,_t2); else _parent.appendChild(node1); }

javaScript DOM方法与属性摘要 1 createElement(element) 创建一个指定标签名创建一个新的元素节点，返回值为指向新建元素节点的引用指针。 eg) var para = document.createElement("p"); document.body.appendChild(para);

2 createTextNode() 创建一个包含着给定文本的新文本节点，返回一个指向新建文本节点的引用指针： reference = document.createTextNode() 参数为新建文本节点所包含的文本字符串 eg) var message = document.createTextNode("hello world"); var container = document.createElement("p"); container.appendChild(message); document.body.appendChild(container);

3 cloneNode() reference = node.cloneNode(deep) 为给定节点创建一个副本，参数为true或者false，true表示同时复制该节点的子节点，false则不复制任何子节点。 var para = document.createElement("p"); var message = document.createTextNode("hello world"); para.appendChild(message); document.body.appendChild(para); var newpara = para.cloneNode(true);

document.body.appendChild(newpara);

4 appendChild() reference = node.appendChild(newChild); 插入节点，例子参考前面。

5 insertBefore() reference = element.insertBefore(newNode,targetNode) 将一个给定节点插入到一个给定元素节点的给定子节点的前面，返回一个指向新增子节点的引用指针。 eg) var container = document.getElementById("content"); var message = document.getElementById("fineprint"); var para = document.createElement("p"); container.insertBefore(para,message);

6 removeChild() reference = element.removeChild(node) 将从一个给定元素利删除一个子节点，返回一个指向已被删除的子节点的引用指针。 当某个节点被removeChild()删除后，此节点所有子节点都被删除。

7 replaceChild() reference = element.replaceChild(newChild,oldChild) 把一个给定父元素里的一个子节点替换为另外一个节点，oldChild节点必须是element元素的一个子节点，返回值是一个指向已被替换的那个 子节点的引用指针。 网页教学网 eg) var container = document.getElementById("content"); var message = document.getElementById("fineprint"); var para = document.createElement("p"); container.replaceChild(para,message);

8 setAttribute() element.setAttribute(attributeName,attributeValue); 为给定元素节点添加一个新的属性值或是改变它的现有属性

9 getAttribute attributeValue = element.getAttribute(attributeName) 返回一个给定元素的一个给定属性节点的值。

10 getElementById() element = document.getElementById(ID) 寻找一个有着给定id属性值的元素，返回一个元素节点

11 getElementByTagName() 用于寻找有着给定标签名的所有元素： elements = document.getElementsByTagName(tagName) 返回一个节点集合。

12 hasChildNodes 用来检查一个给定元素是否有子节点 booleanValue = element.hasChildNodes 返回true或false。

13 DOM属性 节点的属性 nodeName属性将返回一个字符串，其内容是给定节点的名字。 Webjx.Com 如果节点是元素节点，返回这个元素的名称； 如果是属性节点，返回这个属性的名称； 如果是文本节点，返回一个内容为#text的字符串；

nodeType属性将返回一个整数，这个数值代表给定节点的类型 nodeValue属性将返回给定节点的当前值 如果节点是元素节点，返回null； 如果是属性节点，返回这个属性的名称； 如果是文本节点，返回文本节点的内容；

遍历节点树 childNodes 该属性返回一个数组，这个数组由给定元素节点的子节点构成 firstChild 返回第一个子节点 lastChild 返回最后一个子节点 nextSibling 返回给定节点的下一个子节点 parentNode 返回一个给定节点的父节点 previousSibling 返回给定节点的下一个子节点??

14 setTimeout javaScript函数，能够让某个函数在经过一段预定的时间之后才开始执行，函数有两个参数，第一个参数是将要执行的那个函数的名字； 第二个参数是一个数值，以毫秒为单位设定了需要经过多长时间才开始执行由第一个参数所给出的函数： setTimeout("function",interval);

 

Javascript的一些属性讲解 async 属性

作 用 async 属性表示是否允许异步的下载。 基本语法 boolValue ＝ XMLDocument.async;XMLDocument.async ＝ boolValue; 说 明 布尔值是可擦写的（read/write），如果准许异步下载，值为True；反之则为False。范 例

 

xmlDoc.async ＝ "false"; alert(xmlDoc.async);

Webjx.Com

=================================================

网页教学网

attribute 属性

作 用 传回目前节点的属性列表。 基本语法 objAttributeList = xmlNode.attributes; 说 明 传回一个物件。如果此节点不能包含属性，则传回空值。范 例

objAttList ＝ xmlDoc.documentElement.attributes; alert(objAttList);

Webjx.Com

================================================= 网页教学网

childNodes 属性

网页教学网

作 用 传回一个节点清单，包含该节点所有可用的子节点。 基本语法 objNodeList=node.childNodes; 说 明 传回一个物件。假如这节点没有子节点，传回null。范 例

objNodeList ＝ xmlDoc.childNodes; alert(objNodeList);

 

=================================================

doctype 属性

作 用 传回文件型态节点，包含目前文件的DTD。这节点是一般的文件型态宣告，例如，节点，名为EMAIL 的节点物件会被传回。 基本语法 objDocType=xmlDocument.doctype; 说 明 传回一个对象，这个属性是只读的。假如这文件不包含DTD，会传回null。范 例 网页教学网

objDocType ＝ xmlDoc.doctype; alert(objDocType.nodeName);

Webjx.Com

=================================================

网页教学网

documentElement 属性 Webjx.Com

作 用 确认XML 文件的根（Root）节点。 基本语法 objDoc=xmlDocument.documentElement; 说 明 回一个在单一根文件元素中包含数据的对象。此属性可读/写，如果文件中不包含根节点，将传回null。范 例

objDocRoot ＝ xmlDoc.documentElement; alert(objDocRoot);

=================================================

firstChild 属性

作 用 确认在目前节点中的第一个子元素。 基本语法 objFirstChild ＝ xmlDocNode.firstChild ; 说 明 此属性只读且会传回一对象，如果节点中没有包含第一个子元素，将传回null。范 例 网页教学网

objFirstChild ＝ xmlDoc.documentElement.firstChild; alert(objFirstChild); Webjx.Com

=================================================

implementation 属性 Webjx.Com

作 用 DOM 应用程序能使用其它实作中的对象。implementation 属性确认目前XML 文件的DOMimplementation 对象。 基本语法 objImplementation ＝ xmlDocument.implementation; 说 明 此属性只读且传回一个对象。范 例

Webjx.Com

objImp ＝ xmlDoc.implementation; alert(objImp); 网页教学网

=================================================

 

lastChild 属性 网页教学网

作 用 确认目前节点中最后的子元素。 基本语法 objLastChild ＝ xmlDocNode.lastChild; 说 明 此属性只读且传回一个对象。如果节点中没有包含最后子元素，将传回null。范 例

objLastChild ＝ xmlDoc.documentElement.lastChild; alert(objLastChild);

=================================================

 

nextSibling 属性

 

作 用 在目前文件节点的子节点列表中传回下一个兄弟节点。 基本语法 objNextSibling ＝ xmlDocNode.nextSibling; 说 明 此属性是只读且传回一个对象。如果节点中没有包含其它的相关节点，会传回null。范 例 网页教学网

objSibling ＝ xmlDoc.documentElement.childNodes.item(1) .nextSibling; alert(objSibling);

Webjx.Com

=================================================

nodeName 属性 Webjx.Com

作 用 传回代表目前节点名称的字符串。 基本语法 strNodeName ＝ xmlDocNode.nodeName ; 说 明 传回一个字符串。这个属性是只读的，传回元素名称、属性或实体参照。范 例

strNodeName ＝ xmlDoc.documentElement.nodeName; alert(strNodeName);

 

================================================= Webjx.Com

nodeType 属性

网页教学网

作 用 辨识节点的DOM 型态。 基本语法 numNodeType ＝ xmlDocNode.nodeType ; 说 明 此属性只读且传回一个数值。

 

有效的数值符合以下的型别： 1-ELEMENT 2-ATTRIBUTE 3-TEXT 4-CDATA 5-ENTITY REFERENCE 6-ENTITY 7-PI (processing instruction) 8-COMMENT 9-DOCUMENT 10-DOCUMENT TYPE 11-DOCUMENT FRAGMENT 12-NOTATION 　 范 例

 

numNodeType ＝ xmlDoc.documentElement.nodeType; alert(numNodeType);

Webjx.Com

=================================================

 

nodeValue 属性

作 用 传回指定节点相关的文字。这并非一个元素中数据的值，而是与一个节点相关且未解析的文字，就像一个属性或者一个处理指令。 基本语法 varNodeValue ＝ xmlDocNode.nodeValue; 说 明 传回的文字代表以节点的nodeType 属性为主的型态值。（请参考附录中的nodeType 属性。）因为节点型态可能是几种数据型态中的一种，传回值也因此有差异。传回null 的节点型态有：DOCUMENT、ELEMENT、DOCUMENT TYPE、DOCUMENT FRAGMENT、ENTITY、ENTITY REFERENCE，和NOTATION。此属性可擦写。范 例

varNodeValue ＝ xmlDoc.documentElement.nodeValue; alert(varNodeValue);

=================================================

Webjx.Com

ondataavailable 属性

作 用 指定一个事件来处理ondataavailable 事件。 基本语法 xmlDocNode.ondataavailable ＝ value; 说 明 此属性是唯写，允许文件作者一旦数据为可用，即可尽快的使用数据来运作。范 例 Webjx.Com

xmlDoc.ondataavailable ＝ alert("Data is now available."); Webjx.Com

=================================================

 

onreadystatechange 属性

作 用 指定一个事件来处理onreadystatechange 事件。这个事件能辨识readyState 属性的改变。 基本语法 xmlDocNode.onreadystatechange ＝ value; 说 明 此属性是唯写的，允许文件作者指定当readyState 属性改变时呼叫事件。范 例 网页教学网

xmlDoc.onreadystatechange ＝ alert("The readyState property has changed.");

网页教学网

=================================================

Webjx.Com

ownerDocument 属性

作 用 传回文件的根节点，包含目前节点。 基本语法 objOwnerDoc ＝ xmlDocument.ownerDocument; 说 明 此属性是只读的，传回一个包含文件根节点的对象，包含特定的节点。范 例

objOwnerDoc ＝ xmlDoc.childNodes.item(2).ownerDocument; alert(objOwnerDoc); Webjx.Com

=================================================

网页教学网

parentNode 属性

 

作 用 传回目前节点的父节点。只能应用在有父节点的节点中。 基本语法 objParentNode ＝ xmlDocumentNode.parentNode; 说 明 此属性是只读的，传回包含指定节点的父节点对象。如果此节点不存在于文件树中，将传回null。范 例

objParentNode ＝ xmlDoc.childNodes.item(1).parentNode; alert(objParentNode);

Webjx.Com

=================================================

parseError 属性 网页教学网

作 用 传回一个DOM 解析错误对象，此对象描述最后解析错误的讯息。 基本语法 objParseErr ＝ xmlDocument.parseError; 说 明 此属性是只读的。如果没有错误发生，将传回0。范 例

 

objParseErr ＝ xmlDoc.parseError; alert(objParseErr);

=================================================

Webjx.Com

previousSibling 属性 网页教学网

作 用 传回目前节点之前的兄弟节点。 基本语法 objPrevSibling ＝ xmlDocument.previousSibling; 说 明 传回一个对象，这个属性是只读的。若该节点没有包含前面的兄弟节点，会传回null。范 例

Webjx.Com

objPrevSibling ＝ xmlDoc.documentElement.childNodes.item(3).previousSibling; alert(objPrevSibling);

=================================================

readyState 属性

作 用 传回XML 文件资料的目前状况。 基本语法 intState ＝ xmlDocument.readyState; 说 明 这个属性是只读的，传回值有以下的可能： 0-UNINITIALIZED：XML 对象被产生，但没有任何文件被加载。 1-LOADING：加载程序进行中，但文件尚未开始解析。 2-LOADED：部分的文件已经加载且进行解析，但对象模型尚未生效。 3-INTERACTIVE：仅对已加载的部分文件有效，在此情况下，对象模型是有效但只读的。 4-COMPLETED：文件已完全加载，代表加载成功。 范 例

alert("The readyState property is " + xmlDoc.readyState);

 

================================================= 网页教学网

url 属性

网页教学网

作 用 传回最近一次加载XML 文件的URL。 基本语法 strDocUrl ＝ xmlDocument.url; 说 明 这个属性是只读的，传回最近一次加载成功文件的URL，若文件仅存在主存储器中（表示该文件并非由外部档案加载)，则传回null。范 例

alert(xmlDoc.url);

================================================= Webjx.Com

validateOnParse 属性

网页教学网

作 用 告诉解析器文件是否有效。 基本语法 boolValidate ＝ xmlDocument.validateOnParse; xmlDocument.validateOnParse = boolValidate; 说 明 此属性是可擦写的。如果传回值为true，表示文件被解析时被确认是有效的。如果传回false，表示文件是无效的，并被认为只是标准格式的（well-formed）文件。范 例 Webjx.Com

xmlDoc.validateOnParse ＝ true; alert(xmlDoc.validateOnParse);

=================================================

Webjx.Com

xml 属性

Webjx.Com

作 用 传回指定节点的XML 描述和所有的子节点。 基本语法 xmlValue ＝ xmlDocumentNode.xml; 说 明 此属性是只读的。范 例

网页教学网

xmlValue ＝ xmlDoc.documentElement.xml; alert(xmlValue);