Tutorials 参考 练习 Menu
Paid Courses

XML 教程

XML主页 XML简介 XML使用方法 XML Tree XML语法 XML元素 XML属性 XML命名空间 XML显示 XML HttpRequest XML解析器 XML DOM XML XPath XML XSLT XML XQuery XML XLink XML验证器 XML DTD XML模式 XML服务器 XML 示例 XML 测试 XML 证书




DOM简介归纳 DOM节点 DOM访问 DOM节点信息 DOM节点列表 DOM遍历 DOM导航 DOM获取价值 DOM变更节点 DOM删除节点 DOM替换节点 DOM创建节点 DOM添加节点 DOM克隆节点 DOM 示例

XPath 教程

XPath简介 XPath节点 XPath语法 XPath轴 XPath运算子 XPath 示例


XSLT简介 XSL语言 XSLT转换 XSLT <template> XSLT <value-of> XSLT <for-each> XSLT <sort> XSLT <if> XSLT <choose> XSLT申请 客户端上的XSLT 服务器上的XSLT XSLT编辑XML XSLT 示例

XQuery 教程

XQuery简介 XQuery示例 XQuery FLWOR XQuery HTML XQuery条款 XQuery语法 XQuery添加 XQuery选择 XQuery函数


DTD简介 DTD构建基块 DTD元素 DTD属性 DTD元素 vs Attr DTD实体 DTD 示例

XSD Schema

XSD简介 XSD如何 XSD <schema> XSD元素 XSD属性 XSD限制

XSD Complex

XSD元素 XSD Empty XSD元素 Only 仅限XSD文字 XSD混合 XSD指标 XSD <any> XSD <anyAttribute> XSD替代 XSD示例

XSD Data

XSD字串 XSD日期 XSD数值 XSD杂项 XSD 参考

Web Services



DOM节点类型 DOM节点 DOM节点List DOM NamedNodeMap DOM文档 DOM元素 DOM属性 DOM文字 DOM CDATA DOM评论 DOM XMLHttpRequest DOM解析器 XSLT元素 XSLT / XPath函数

XML DOM Traverse Node Tree

Traversing means looping through or traveling across the node tree.

Traversing the Node Tree

Often you want to loop an XML document, for example: when you want to extract the value of each element.

This is called "Traversing the node tree"

The example below loops through all child nodes of <book>, and displays their names and values:


<!DOCTYPE html>

<p id="demo"></p>

var x, i ,xmlDoc;
var txt = "";
var text = "<book>" +
"<title>Everyday Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +

parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");

// documentElement always represents the root node
x = xmlDoc.documentElement.childNodes;
for (i = 0; i < x.length ;i++) {
    txt += x[i].nodeName + ": " + x[i].childNodes[0].nodeValue + "<br>";
document.getElementById("demo").innerHTML = txt;



title: Everyday Italian
author: Giada De Laurentiis
year: 2005
来试试吧 »

Example explained:

  1. Load the XML string into xmlDoc
  2. Get the child nodes of the root element
  3. For each child node, output the node name and the node value of the text node

Browser Differences in DOM Parsing

All modern browsers support the W3C DOM specification.

However, there are some differences between browsers. One important difference is:

  • The way they handle white-spaces and new lines

DOM - White Spaces and New Lines

XML often contains new line, or white space characters, between nodes. This is often the case when the document is edited by a simple editor like Notepad.

The following example (edited by Notepad) contains CR/LF (new line) between each line and two spaces in front of each child node:

  <title>Everyday Italian</title>
  <author>Giada De Laurentiis</author>

Internet Explorer 9 and earlier do NOT treat empty white-spaces, or new lines as text nodes, while other browsers do.

The following example will output the number of child nodes the root element (of books.xml) has. IE9 and earlier will output 4 child nodes, while IE10 and later versions, and other browsers will output 9 child nodes:


function myFunction(xml) {
var xmlDoc = xml.responseXML;
    x = xmlDoc.documentElement.childNodes;
    document.getElementById("demo").innerHTML =
    "Number of child nodes: " + x.length;
来试试吧 »

PCDATA - Parsed Character Data

XML parsers normally parse all the text in an XML document.

When an XML element is parsed, the text between the XML tags is also parsed:

<message>This text is also parsed</message>

The parser does this because XML elements can contain other elements, as in this example, where the <name> element contains two other elements (first and last):


and the parser will break it up into sub-elements like this:


Parsed Character Data (PCDATA) is a term used about text data that will be parsed by the XML parser.

CDATA - (Unparsed) Character Data

The term CDATA is used about text data that should not be parsed by the XML parser.

Characters like "<" and "&" are illegal in XML elements.

"<" will generate an error because the parser interprets it as the start of a new element.

"&" will generate an error because the parser interprets it as the start of an character entity.

Some text, like JavaScript code, contains a lot of "<" or "&" characters. To avoid errors script code can be defined as CDATA.

Everything inside a CDATA section is ignored by the parser.

A CDATA section starts with "<![CDATA[" and ends with "]]>":

function matchwo(a,b) {
    if (a < b && a < 0) {
        return 1;
    } else {
        return 0;

In the example above, everything inside the CDATA section is ignored by the parser.

笔记 on CDATA sections:

A CDATA section cannot contain the string "]]>". Nested CDATA sections are not allowed.

The "]]>" that marks the end of the CDATA section cannot contain spaces or line breaks.

W3Schools is optimized for learning and training. 示例 might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
W3Schools is Powered by W3.CSS.