찾다
집백엔드 개발XML/RSS 튜토리얼미친 XML 연구 노트 (13)---------XML DOM

미친 XML 연구 노트 (13)---------XML DOM

黄舟
黄舟
Feb 21, 2017 pm 02:51 PM

XML 문서 개체 모델은 XML 문서에 액세스하고 조작하기 위한 표준 방법을 정의합니다.

DOM은 XML 문서를 리프가 노드로 정의된 트리 구조로 처리합니다.

XML DOM이란 무엇인가요?

XML DOM은

  • XML용 표준 개체 모델

  • XML용 표준 프로그래밍 인터페이스

  • 플랫폼 및 언어 중립

  • W3C 표준

XML DOM은 모든 XML 요소의 객체 및 속성과 이에 액세스하기 위한 메서드(인터페이스)를 정의합니다.

즉,

XML DOM은 XML 요소를 가져오고, 변경하고, 추가하거나 제거하기 위한 표준입니다.

XML DOM 노드


XML 문서의 각 구성 요소는 노드입니다.

노드

DOM에 따른 XML 문서의 각 구성 요소 모두 노드입니다.

DOM은 다음과 같이 규정됩니다.

  • 문서 전체가 문서 노드입니다

  • 각 XML 태그는 요소 노드입니다

  • XML 요소에 포함된 텍스트는 텍스트 노드입니다

  • 각 XML 속성은 속성 노드입니다

  • 주석은 주석 노드에 속합니다

DOM 인스턴스

다음 XML 파일(books.xml)을 참조하세요. : 

<?xml version="1.0" encoding="ISO-8859-1"?>

<bookstore>

<book category="children">
  <title lang="en">Harry Potter</title> 
  <author>J K. Rowling</author> 
  <year>2005</year> 
  <price>29.99</price> 
</book>

<book category="cooking">
  <title lang="en">Everyday Italian</title> 
  <author>Giada De Laurentiis</author> 
  <year>2005</year> 
  <price>30.00</price> 
</book>

<book category="web">
  <title lang="en">Learning XML</title> 
  <author>Erik T. Ray</author> 
  <year>2003</year> 
  <price>39.95</price> 
</book>

<book category="web">
  <title lang="en">XQuery Kick Start</title> 
  <author>James McGovern</author> 
  <author>Per Bothner</author> 
  <author>Kurt Cagle</author> 
  <author>James Linn</author> 
  <author>Vaidyanathan Nagarajan</author> 
  <year>2003</year> 
  <price>49.99</price> 
</book>

</bookstore>

위 XML에서 루트 노드는 입니다. 문서의 다른 모든 노드는 내에 포함됩니다.

루트 노드

첫 번째 노드에는 , <author>, <year> 및 <price>라는 4개의 노드가 있으며, 각 노드에는 텍스트 노드가 포함되어 있습니다. , "해리 포터", "J K. 롤링", "2005" 및 "29.99". </price></year></author>

텍스트는 항상 텍스트 노드에 저장됩니다.

DOM 처리의 공통 기능 오류는 요소 노드에 텍스트가 포함된 것으로 간주된다는 것입니다.

단, 요소 노드의 텍스트는 텍스트 노드에 저장됩니다.

이 예에서는 2005, 요소 노드 에 값이 "2005인 텍스트 노드가 있습니다. " .

"2005" 는 요소의 값이 아닙니다.

XML DOM 노드 트리


XML DOM XML DOM 문서를 노드 트리로 취급합니다.

트리의 모든 노드는 서로 관계를 가지고 있습니다.

XML DOM 노드 트리

XML DOM XML 문서를 다음과 같이 처리합니다. 트리 구조. 이러한 트리 구조를 노드 트리라고 합니다.

이 트리를 통해 모든 노드에 접근할 수 있습니다. 해당 내용을 수정하거나 삭제할 수 있으며 새 요소를 만들 수 있습니다.

이 노드 트리는 노드의 집합과 노드 간의 연결을 보여줍니다. 트리는 루트 노드에서 시작하여 트리의 가장 낮은 수준에 있는 텍스트 노드를 향해 분기됩니다. 위의

DOM node tree

이미지는 XML 파일 books.xml을 나타냅니다.

부모, 자식, 형제 노드

노드 트리의 노드는 다음과 연결됩니다. 서로 간에는 계층적 관계가 있습니다.

父、子和同级节点用于描述这种关系。父节点拥有子节点，位于相同层级上的子节点称为同级节点（兄弟或姐妹）。

  • 在节点树中，顶端的节点成为根节点

  • 根节点之外的每个节点都有一个父节点

  • 节点可以有任何数量的子节点

  • 叶子是没有子节点的节点

  • 同级节点是拥有相同父节点的节点

下面的图片展示出节点树的一个部分，以及节点间的关系：

node tree

因为 XML 数据是按照树的形式进行构造的，所以可以在不了解树的确切结构且不了解其中包含的数据类型的情况下，对其进行遍历。

您将在本教程稍后的章节学习更多有关遍历节点树的知识。

注释：父节点：Parent Node，子节点：Children Node，同级节点：Sibling Node。

第一个子节点 - 最后一个子节点

请看下面的 XML 片段：

<bookstore>
  <book category="CHILDREN">
    <title lang="en">Harry Potter</title> 
    <author>J K. Rowling</author> 
    <year>2005</year> 
    <price>29.99</price> 
  </book>
</bookstore>

在上面的 XML 中， 元素是 <book> 元素的第一个子节点，而 <price> 元素是 <book> 元素的最后一个子节点。</book></price></book>

此外， 元素是 、<author>、<year> 以及 <price> 元素的父节点。</price></year></author>

 

 

解析 XML DOM

 

解析 XML

所有现代浏览器都内建了用于读取和操作 XML 的 XML 解析器。

解析器把 XML 读入内存，并把它转换为可被 JavaScript 访问的 XML DOM 对象。

微软的 XML 解析器与其他浏览器中的解析器是有差异的。微软的解析器支持对 XML 文件和 XML 字符串（文本）的加载，而其他浏览器使用单独的解析器。不过，所有的解析器都含有遍历 XML 树、访问、插入及删除节点的函数。

在本教程中，我们将为您讲解如何创建可在 IE 及其他浏览器中运行的脚本。

通过微软的 XML 解析器加载 XML

微软的 XML 解析器内建于 Internet Explorer 5 及更高版本中。

下面的 JavaScript 片段把 XML 文档 ("books.xml") 载入了解析器：

xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.load("books.xml");

代码解释：

  • 第一行创建空的微软 XML 文档对象

  • 第二行关闭异步加载，这样可确保在文档完整加载之前，解析器不会继续执行脚本

  • 第三行告知解析器加载名为 "books.xml" 的文档

下面的 JavaScript 片段把名为 txt 的字符串载入解析器中：

xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(txt);

注释：loadXML() 方法用于加载字符串（文本），而load() 用于加载文件。

在 Firefox 及其他浏览器中的 XML 解析器

下面的 JavaScript 片段把 XML 文档 ("books.xml") 载入了解析器：

xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.async="false";
xmlDoc.load("books.xml");

代码解释：

  • 第一行创建空的 XML 文档对象

  • 第二行关闭异步加载，这样可确保在文档完整加载之前，解析器不会继续执行脚本

  • 第三行告知解析器加载名为 "books.xml" 的文档

下面的 JavaScript 片段把名为 txt 的字符串载入解析器中：

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

代码解释：

  • 第一行创建一个空的 XML 文档对象

  • 第二行告知解析器加载名为 txt 的字符串

注释：Internet Explorer 使用loadXML() 方法来解析 XML 字符串，而其他浏览器使用 DOMParser 对象。

解析 XML 文件 - 一个跨浏览器的实例

下面的例子把 XML 文档 ("books.xml") 载入 XML 解析器：

<html>
<body>
<script type="text/javascript">
try //Internet Explorer
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  }
catch(e)
  {
  try //Firefox, Mozilla, Opera, etc.
    {
    xmlDoc=document.implementation.createDocument("","",null);
    }
  catch(e) {alert(e.message)}
  }
try 
  {
  xmlDoc.async=false;
  xmlDoc.load("books.xml");
  document.write("xmlDoc is loaded, ready for use");
  }
catch(e) {alert(e.message)}
</script>
</body>
</html>

 

Error: Access Across Domains

出于安全方面的原因，现代的浏览器不允许跨域的访问。

这意味着，网页以及它试图加载的 XML 文件，都必须位于相同的服务器上。

W3School 的实例所打开的 XML 文件位于 W3School 的域上。

假如你打算在自己的网页上使用上面的例子，则必须把 XML 文件放到自己的服务器上。否则，xmlDoc.load() 将产生错误 "Access is denied"。

解析 XML 字符串 - 一个跨浏览器的实例

下面的代码加载并解析了一个 XML 字符串：

<html>
<body>
<script type="text/javascript">
text="<bookstore>"
text=text+"<book>";
text=text+"<title>Harry Potter</title>";
text=text+"<author>J K. Rowling</author>";
text=text+"<year>2005</year>";
text=text+"</book>";
text=text+"</bookstore>";

try //Internet Explorer
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async="false";
  xmlDoc.loadXML(text);
  }
catch(e)
  {
  try //Firefox, Mozilla, Opera, etc.
    {
    parser=new DOMParser();
    xmlDoc=parser.parseFromString(text,"text/xml");
    }
  catch(e) {alert(e.message)}
  }
document.write("xmlDoc is loaded, ready for use");
</script>
</body>
</html>

 

XML DOM 加载函数

 

加载函数

XML DOM 含有遍历 XML 树以及访问、插入、删除节点的方法（函数）。

然后，在访问并处理 XML 文档之前，必须把它载入 XML DOM 对象。

上一节演示了如何加载 XML 文档。为了避免因加载文档而重复编写代码，可以把代码存储在一个单独的 JavaScript 文件中：

function loadXMLDoc(dname) 
{
try //Internet Explorer
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  }
catch(e)
  {
  try //Firefox, Mozilla, Opera, etc.
    {
    xmlDoc=document.implementation.createDocument("","",null);
    }
  catch(e) {alert(e.message)}
  }
try 
  {
  xmlDoc.async=false;
  xmlDoc.load(dname);
  return(xmlDoc);
  }
catch(e) {alert(e.message)}
return(null);
}

上面的函数存储在名为 "loadxmldoc.js" 的文件中。

下面的例子在其 部分有一个指向 "loadxmldoc.js" 的链接，并使用 loadXMLDoc() 函数加载 XML 文档 ("books.xml")：

<html>
<head><script type="text/javascript" ></script>
</head>

<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("books.xml");
document.write("xmlDoc is loaded, ready for use");
</script>
</body>
</html>

 

 

 

XML DOM - 属性和方法

 

编程接口

DOM 把 XML 模拟为一系列节点接口。可通过 JavaScript 或其他编程语言来访问节点。在本教程中，我们使用 JavaScript。

对 DOM 的编程接口是通过一套标准的属性和方法来定义的。

属性经常按照“某事物是什么”的方式来使用（例如节点名是 "book"）。

方法经常按照“对某事物做什么”的方式来使用（例如删除 "book" 节点）。

XML DOM 属性

一些典型的 DOM 属性：

  • x.nodeName - x 的名称

  • x.nodeValue - x 的值

  • x.parentNode - x 的父节点

  • x.childNodes - x 的子节点

  • x.attributes - x 的属性节点


注释：在上面的列表中，x 是一个节点对象。

XML DOM 方法

  • x.getElementsByTagName(name) - 获取带有指定标签名称的所有元素

  • x.appendChild(node) - 向 x 插入子节点

  • x.removeChild(node) - 从 x 删除子节点

注释：在上面的列表中，x 是一个节点对象。

实例

从 books.xml 中的 元素获取文本的 JavaScript 代码：

txt=xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue

在此语句执行后，txt 保存的值是 "Everyday Italian"。

解释：

  • xmlDoc - 由解析器创建的 XML DOM

  • getElementsByTagName("title")[0] - 第一个 元素

  • childNodes[0] - 元素的第一个子节点 (文本节点)

  • nodeValue - 节点的值 (文本自身)

在上面的例子中，getElementsByTagName 是方法，而 childNodes 和 nodeValue 是属性。

解析 XML 文件 - 跨浏览器实例

下面的代码片段使用 loadXMLDoc 函数把 books.xml 载入 XML 解析器中，并显示第一个 book 的数据：

xmlDoc=loadXMLDoc("books.xml");

document.write(xmlDoc.getElementsByTagName("title")
[0].childNodes[0].nodeValue);
document.write("<br />");
document.write(xmlDoc.getElementsByTagName("author")
[0].childNodes[0].nodeValue);
document.write("<br />");
document.write(xmlDoc.getElementsByTagName("year")
[0].childNodes[0].nodeValue);

输出：

Harry Potter
J K. Rowling
2005

 

在上面的例子中，我们为每个文本节点使用 childNodes[0]，即使每个元素只有一个文本节点。这是由于 getElementsByTagName() 方法总是会返回数组。

解析 XML 字符串 - 跨浏览器实例

下面的代码加载并解析一个 XML 字符串：

下面的代码片段使用 loadXMLString 函数把 books.xml 载入 XML 解析器，并显示第一个 book 的数据：

text="<bookstore>"
text=text+"<book>";
text=text+"<title>Harry Potter</title>";
text=text+"<author>J K. Rowling</author>";
text=text+"<year>2005</year>";
text=text+"</book>";
text=text+"</bookstore>";

xmlDoc=loadXMLString(text);

document.write(xmlDoc.getElementsByTagName("title")
[0].childNodes[0].nodeValue);
document.write("<br />");
document.write(xmlDoc.getElementsByTagName("author")
[0].childNodes[0].nodeValue);
document.write("<br />");
document.write(xmlDoc.getElementsByTagName("year")
[0].childNodes[0].nodeValue);

输出：

Harry Potter
J K. Rowling
2005

 

 

 

访问节点

您可以通过三种方法来访问节点：

  1. 通过使用 getElementsByTagName() 方法

  2. 通过循环（遍历）节点树

  3. 通过利用节点的关系在节点树中导航

getElementsByTagName() 方法

getElementsByTagName() 返回拥有指定标签名的所有元素。

语法

node.getElementsByTagName("tagname");

实例

下面的例子返回 x 元素下的所有 元素：

x.getElementsByTagName("title");

请注意，上面的例子仅返回 x 节点下的 元素。要返回 XML 文档中的所有 <title> 元素，请使用： 

xmlDoc.getElementsByTagName("title");

在这里，xmlDoc 就是文档本身（文档节点）。

DOM Node List

getElementsByTagName() 方法返回节点列表 (node list)。节点列表是节点的数组。

下面的代码通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中，然后在变量 x 中存储 节点的一个列表：

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("title");

可通过下标访问 x 中的 元素。要访问第三个 <title>，您可以编写： 

y=x[2];

 

注释：下标以 0 起始。

在本教程中稍后的章节，您将学到更多有关 Node List 的知识。

DOM Node List Length

length 属性定义节点列表的长度（即节点的数目）。

您能够通过使用 length 属性来循环一个节点列表：

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("title");

for (i=0;i");
  }

例子解释：

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc

  2. 取得所有 元素节点

  3. 输出每个 元素的文本节点的值

 

Node Type

XML 文档的 documentElement 属性是根节点。

节点的 nodeName 属性是节点的名称。

节点的 nodeType 属性是节点的类型。

您将在本教程的下一节中学习更多有关节点属性的知识。

 

遍历节点

下面的代码循环根节点的子节点，同时也是元素节点：

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.documentElement.childNodes;

for (i=0;i<x.length;i++)
{ 
  if (x[i].nodeType==1)
  {//Process only element nodes (type 1) 
  document.write(x[i].nodeName);
  document.write("<br />");
  } 
}

例子解释：

  1. 通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中

  2. 获得根元素的子节点

  3. 检查每个子节点的节点类型。如果节点类型是 "1"，则是元素节点

  4. 如果是元素节点，则输出节点的名称

 

利用节点的关系进行导航

下面的代码通过利用节点的关系在节点树中进行导航：

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("book")[0].childNodes;
y=xmlDoc.getElementsByTagName("book")[0].firstChild;

for (i=0;i<x.length;i++)
{
if (y.nodeType==1)
  {//Process only element nodes (type 1)
  document.write(y.nodeName + "<br />");
  }
y=y.nextSibling;
}

  1. 通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中

  2. 获得第一个 book 元素的子节点

  3. 把 "y" 变量设置为第一个 book 元素的第一个子节点

  4. 检查每个子节点的节点类型，如果节点类型是 "1"，则是元素节点

  5. 如果是元素节点，则输出该节点的名称

  6. 把 "y" 变量设置为下一个同级节点，并再次运行循环

 

节点的属性

在 XML 文档对象模型 (DOM) 中，每个节点都是一个对象。

对象拥有方法（功能）和属性（关于对象的信息），并可通过 JavaScript 进行访问和操作。

三个重要的 XML DOM 节点属性是：

  • nodeName

  • nodeValue

  • nodeType

nodeName 属性

nodeName 属性规定节点的名称。

  • nodeName 是只读的

  • 元素节点的 nodeName 与标签名相同

  • 属性节点的 nodeName 是属性的名称

  • 文本节点的 nodeName 永远是 #text

  • 文档节点的 nodeName 永远是 #document

 

nodeValue 属性

nodeValue 属性规定节点的值。

  • 元素节点的 nodeValue 是 undefined

  • 文本节点的 nodeValue 是文本自身

  • 属性节点的 nodeValue 是属性的值

例子 1：获取元素的值

下面的代码检索第一个 元素的文本节点的值：

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
txt=x.nodeValue;

结果：txt = "Everyday Italian"

代码解释：

  • 通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中

  • 获取第一个 元素节点的文本节点

  • 把 txt 变量设置为文本节点的值

 

例子 2：更改元素的值

下面的代码更改第一个 元素的文本节点的值：

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
x.nodeValue="Easy Cooking";

代码解释：

  • 通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中

  • 获取第一个 元素节点的文本节点

  • 把文本节点的值更改为 "Easy Cooking"

 

nodeType 属性

nodeType 属性规定节点的类型。

nodeType 是只读的。

最重要的节点类型是：

元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

 

 

DOM Node List

当使用诸如 childNodes 或 getElementsByTagName() 属性或方法时，会返回 NodeList 对象。

NodeList 对象表示节点的列表，以 XML 中的相同顺序。

使用从 0 开始的下标来访问节点列表中的节点。

下面的图像表示 "books.xml" 中 元素的节点列表：

DOM node list

下面的代码片段通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中，并返回 "books.xml" 中 title 元素的一个节点列表：

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("title");

以上语句执行之后，x 成为一个 NodeList 对象。

下面的代码片段从节点列表 x 中的第一个 元素中返回文本：

txt=x[0].childNodes[0].nodeValue;

在以上语句执行之后，txt = "Everyday Italian"。

 

Node List Length

NodeList 对象会保持自身的更新。如果删除或添加了元素，列表会自动更新。

节点列表的 length 属性是列表中节点的数量。

下面的代码片段通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc，并返回 "books.xml" 中 元素的数量：

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName(&#39;title&#39;).length;

在上面的语句执行之后，x = 4。

节点列表的长度可用于循环列表中所有的元素。

下面的代码片段使用 length 属性来遍历 元素的列表：

xmlDoc=loadXMLDoc("books.xml");

//the x variable will hold a node list
x=xmlDoc.getElementsByTagName(&#39;title&#39;);

for (i=0;i<x.length;i++)
{
document.write(x[i].childNodes[0].nodeValue);
document.write("<br />");
}

输出：

Harry Potter
Everyday Italian
XQuery Kick Start
Learning XML

例子解释：

  • 通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc

  • 设置保存所有 title 元素的节点列表的 x 变量

  • 从所有 元素的文本节点输出值

 

DOM Attribute List (Named Node Map)

元素节点的 attributes 属性返回属性节点的列表。

这被称为 Named Node Map，除了方法和属性上的一些差别以外，它与节点列表相似。

属性列表会保持自身的更新。如果删除或添加属性，这个列表会自动更新。

下面的代码片段通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中，并从 "books.xml" 中的第一个 元素返回属性节点的一个列表：

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName(&#39;book&#39;)[0].attributes;

以上代码执行之后，x.length 等于属性的数量，可使用 x.getNamedItem() 返回属性节点。

下面的代码片段一个 book 的 "category" 属性的值，以及其属性的数量：

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("book")[0].attributes;

document.write(x.getNamedItem("category").nodeValue);
document.write("<br />" + x.length);

输出：

children
1

例子解释：

  • 通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中

  • 把 x 变量设置为第一个 元素的所有属性的一个列表

  • 从 "category" 属性输出其值

  • 输出属性列表的长度

 

XML DOM 遍历节点树

 


遍历 (Traverse) 意味着在节点树中进行循环或移动。

实例

下面的例子使用 XML 文件 books.xml。

函数 loadXMLString()，位于外部 JavaScript 中，用于加载 XML 文件。

  • 遍历一棵节点树

  • 循环 元素的所有子节点。

遍历节点树

您经常需要循环 XML 文档，比如：当你需要提取每个元素的值时。

这个过程叫作“遍历节点树”。

下面的例子循环 的所有子节点，并显示它们的名称和值：

<html>
<head>
<script type="text/javascript" ></script>
</head>
<body>
<script type="text/javascript">
text="<book>";
text=text+"<title>Harry Potter</title>";
text=text+"<author>J K. Rowling</author>";
text=text+"<year>2005</year>";
text=text+"</book>";

xmlDoc=loadXMLString(text);

// documentElement always represents the root node
x=xmlDoc.documentElement.childNodes;
for (i=0;i<x.length;i++)
{
document.write(x[i].nodeName);
document.write(": ");
document.write(x[i].childNodes[0].nodeValue);
document.write("<br />");
}
</script>
</body>
</html>

输出：

title: Harry Potter
author: J K. Rowling
year: 2005

例子解释：

  • loadXMLString() 把 XML 字符串载入 xmlDoc 中

  • 获取根元素的子节点

  • 输出每个子节点的名称，以及文本节点的节点值

 

定位 DOM 节点

通过节点间的关系访问节点树中的节点，通常称为定位节点 （"navigating nodes"）。

在 XML DOM 中，节点的关系被定义为节点的属性：

  • parentNode

  • childNodes

  • firstChild

  • lastChild

  • nextSibling

  • previousSibling

下面的图像展示了 books.xml 中节点树的一个部分，并说明了节点之间的关系：

DOM node tree

DOM - 父节点

所有的节点都仅有一个父节点。下面的代码定位到 的父节点：

xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("book")[0];
document.write(x.parentNode.nodeName);

例子解释：

  • 通过使用 loadXMLDoc() 把 "books.xml" 载入到 xmlDoc 中

  • 获取第一个 元素

  • 输出 "x" 的父节点的节点名

TIY

避免空的文本节点

Firefox，以及其他一些浏览器，把空的空白或换行当作文本节点，而 IE 不会这么做。

这会在使用下列属性使产生一个问题：firstChild、lastChild、nextSibling、previousSibling。

为了避免定位到空的文本节点（元素节点之间的空格和换行符号），我们使用一个函数来检查节点的类型：

function get_nextSibling(n)
{
y=n.nextSibling;
while (y.nodeType!=1)
  {
  y=y.nextSibling;
  }
return y;
}

有了上面的函数，我们就可以使用 get_nextSibling(node) 来代替 node.nextSibling 属性。

代码解释：


元素节点的类型是 1。如果同级节点不是元素节点，就移动到下一个节点，直到找到元素节点为止。通过这个办法，在 IE 和 Firefox 中，都可以得到相同的结果。

获取第一个元素

下面的代码显示第一个 的第一个元素节点：

<html>
<head>
<script type="text/javascript" >
</script>
<script type="text/javascript">
//check if the first node is an element node
function get_firstChild(n)
{
y=n.firstChild;
while (y.nodeType!=1)
  {
  y=y.nextSibling;
  }
return y;
}
</script>
</head>

<body>
<script type="text/javascript">
xmlDoc=loadXMLDoc("books.xml");

x=get_firstChild(xmlDoc.getElementsByTagName("book")[0]);
document.write(x.nodeName);
</script>
</body>
</html>

输出：

title

例子解释：

  • 通过使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中

  • 在第一个 上使用 get_firstChild 函数，来获取元素节点中的第一个子节点

  • 输出第一个子节点（属于元素节点）的节点名

 

 

以上就是疯狂XML学习笔记（13）---------XML DOM的内容，更多相关内容请关注PHP中文网（www.php.cn）！

 

 

 

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
관련 기사
RSS 디코딩 : 컨텐츠 피드의 XML 구조RSS 디코딩 : 컨텐츠 피드의 XML 구조Apr 17, 2025 am 12:09 AM

RSS의 XML 구조에는 다음이 포함됩니다. 1. XML 선언 및 RSS 버전, 2. 채널 (채널), 3. 항목. 이러한 부분은 RSS 파일의 기초를 형성하여 사용자가 XML 데이터를 구문 분석하여 컨텐츠 정보를 얻고 처리 할 수 ​​있도록합니다.

XML 기반 RSS 피드를 구문 분석하고 활용하는 방법XML 기반 RSS 피드를 구문 분석하고 활용하는 방법Apr 16, 2025 am 12:05 AM

rssfeedsUsexMlTOSYNDICATECONTENT; parsingTheMinVolvesRoadingXML, NavigatingItsStructure 및 extractingData.ApplicationSaggregatorsAngAggeratsAndTrackingPodCastePisOdes.

RSS 문서 : 좋아하는 콘텐츠를 제공하는 방법RSS 문서 : 좋아하는 콘텐츠를 제공하는 방법Apr 15, 2025 am 12:01 AM

RSS 문서는 XML 파일을 통해 컨텐츠 업데이트를 게시하여 작동하며 사용자는 RSS 리더를 통해 구독하고 알림을받습니다. 1. Content Publisher는 RSS 문서를 생성하고 업데이트합니다. 2. RSS 리더는 XML 파일에 정기적으로 액세스하고 구문 분석합니다. 3. 사용자는 업데이트 된 콘텐츠를 탐색하고 읽습니다. 사용의 예 : TechCrunch의 RSS 피드를 구독하고 RSS 리더에게 링크를 복사하기 만하면됩니다.

XML이있는 건물 : RSS에 대한 실습 가이드XML이있는 건물 : RSS에 대한 실습 가이드Apr 14, 2025 am 12:17 AM

XML을 사용하여 RSSFEED를 구축하는 단계는 다음과 같습니다. 1. 루트 요소를 만들고 버전을 설정하십시오. 2. 채널 요소와 기본 정보를 추가하십시오. 3. 제목, 링크 및 설명을 포함하여 항목 요소를 추가하십시오. 4. XML 구조를 문자열로 변환하고 출력하십시오. 이 단계를 사용하면 출시 날짜 및 저자 정보와 같은 추가 요소를 추가하여 유효한 RSSFeed를 처음부터 시작하고 기능을 향상시킬 수 있습니다.

RSS 문서 작성 : 단계별 자습서RSS 문서 작성 : 단계별 자습서Apr 13, 2025 am 12:10 AM

RSS 문서를 작성하는 단계는 다음과 같습니다. 1. 요소를 포함하여 루트 요소와 함께 XML 형식으로 쓰십시오. 2. 채널 정보를 설명하기위한 요소를 추가합니다. 3. 요소를 추가, 각각 컨텐츠 항목을 나타내는 요소를 추가하십시오 .,,,,,,,,,,,,,,,,, 4. 컨텐츠를 풍부하게하기 위해 선택적으로 추가 및 요소. 5. XML 형식이 올바른지 확인하고 온라인 도구를 사용하여 성능을 확인하고 최적화하며 콘텐츠를 업데이트하십시오.

RSS에서 XML의 역할 : 신디케이트 컨텐츠의 기초RSS에서 XML의 역할 : 신디케이트 컨텐츠의 기초Apr 12, 2025 am 12:17 AM

RSS에서 XML의 핵심 역할은 표준화되고 유연한 데이터 형식을 제공하는 것입니다. 1. XML의 구조 및 마크 업 언어 특성은 데이터 교환 및 스토리지에 적합합니다. 2. RSS는 XML을 사용하여 컨텐츠 공유를 용이하게하기 위해 표준화 된 형식을 만듭니다. 3. RSS에서 XML의 적용에는 제목 및 출시 날짜와 같은 피드 컨텐츠를 정의하는 요소가 포함됩니다. 4. 표준화 및 확장 성이 포함되며, 문제에는 문서 장황 및 엄격한 구문 요구 사항이 포함됩니다. 모범 사례에는 XML 유효성 검증, 간단한 유지, CDATA 사용 및 정기적으로 업데이트가 포함됩니다.

XML에서 읽기 쉬운 컨텐츠까지 : Demystifying RSS 피드XML에서 읽기 쉬운 컨텐츠까지 : Demystifying RSS 피드Apr 11, 2025 am 12:03 AM

RSSFEEDSAREXMLDOCUMentsORMUSSEDFORCONTENGAGNEGANGANDANDAND 및 DISTIBLITION.TOTRANSFORMTHEMINTOREADBECONCONTENT : 1) PARSETHEXMLUSINGLIBRARIES LIKEFEDPARSERINPYTHON.2) HORDLEDIFFERENTSSSSSSONS 및 POTELINGEPARSINGERRORS.3) 변형 된 정보 형식 FrrONTLIKETLIKET

JSON을 기반으로 RSS 대안이 있습니까?JSON을 기반으로 RSS 대안이 있습니까?Apr 10, 2025 am 09:31 AM

JSONFEED는 JSON 기반 RSS 대안으로 단순성과 사용 편의성을 갖는 장점이 있습니다. 1) JSONFEED는 JSON 형식을 사용하여 생성 및 구문 분석이 쉽습니다. 2) 동적 생성을 지원하며 현대 웹 개발에 적합합니다. 3) JSONFEED를 사용하면 컨텐츠 관리 효율성과 사용자 경험이 향상 될 수 있습니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

더보기

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 달 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
1 몇 달 전By尊渡假赌尊渡假赌尊渡假赌
어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션
2 몇 주 전ByDDD
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
1 몇 달 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 채팅 명령 및 사용 방법
1 몇 달 전By尊渡假赌尊渡假赌尊渡假赌
더보기

뜨거운 도구

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?
7540
15
Cakephp 튜토리얼
1380
52
Steam의 계정 이름 형식은 무엇입니까?
83
11
Win11 활성화 키 영구
55
19
NYT 연결 힌트와 답변
21
86
더보기