首页 » XML DOM » XML DOM 基础教程
网站地图

XML DOM 删除节点

removeChild() 方法删除指定节点。

removeAttribute() 方法删除指定属性。

在线实例

下面的实例使用 XML 文件 books.xml。
函数 loadXMLDoc()，位于外部 JavaScript 中，用于加载 XML 文件。

删除元素节点
本例使用 removeChild() 来删除第一个 <book> 元素。

<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"> 
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");

document.write("Number of book nodes: ");
document.write(xmlDoc.getElementsByTagName('book').length);
document.write("<br>");

y=xmlDoc.getElementsByTagName("book")[0];
xmlDoc.documentElement.removeChild(y);

document.write("Number of book nodes after removeChild(): ");
document.write(xmlDoc.getElementsByTagName('book').length);

</script>
</body>
</html>

删除当前元素节点
本例使用 parentNode 和 removeChild() 来删除当前的 <book> 元素。

<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"> 
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");

document.write("Number of book nodes before removeChild(): ");
document.write(xmlDoc.getElementsByTagName("book").length);
document.write("<br>");

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

document.write("Number of book nodes after removeChild(): ");
document.write(xmlDoc.getElementsByTagName("book").length);

</script>
</body>
</html>

删除文本节点
本例使用 removeChild() 来删除第一个 <title> 元素的文本节点。

<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"> 
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");


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

document.write("Child nodes: ");
document.write(x.childNodes.length);
document.write("<br>");

y=x.childNodes[0];
x.removeChild(y);

document.write("Child nodes: ");
document.write(x.childNodes.length);
</script>
</body>
</html>

清空文本节点的文本

本例使用 nodeValue() 属性来清空第一个 <title> 元素的文本节点。

<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"> 
</script>
</head>
<body>

<script>
xmlDoc=loadXMLDoc("books.xml");

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

document.write("Value: " + x.nodeValue);
document.write("<br>");

x.nodeValue="";

document.write("Value: " + x.nodeValue);
</script>
</body>
</html>

根据名称删除属性
本例使用 removeAttribute() 从第一个 <book> 元素中删除 "category" 属性。

<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"> 
</script>
</head>
<body>

<script>
xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName('book');

document.write(x[0].getAttribute('category'));
document.write("<br>");

x[0].removeAttribute('category');

document.write(x[0].getAttribute('category'));

</script>
</body>
</html>

根据对象删除属性
本例使用 removeAttributeNode() 从所有 <book> 元素中删除所有属性。

<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"> 
</script>
</head>
<body>

<script>
xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName('book');

for (i=0;i<x.length;i++)
{
while (x[i].attributes.length>0)
  {
  attnode=x[i].attributes[0];
  old_att=x[i].removeAttributeNode(attnode);

  document.write("Removed: " + old_att.nodeName)
  document.write(": " + old_att.nodeValue)
  document.write("<br>")
  }
}
</script>
</body>
</html>

删除元素节点

removeChild() 方法删除指定的节点。

当一个节点被删除时，其所有子节点也会被删除。

下面的代码片段将从载入的 xml 中删除第一个 <book> 元素：

实例

<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"> 
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");

document.write("Number of book nodes: ");
document.write(xmlDoc.getElementsByTagName('book').length);
document.write("<br>");

y=xmlDoc.getElementsByTagName("book")[0];
xmlDoc.documentElement.removeChild(y);

document.write("Number of book nodes after removeChild(): ");
document.write(xmlDoc.getElementsByTagName('book').length);

</script>
</body>
</html>
 

实例解释：

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  2. 把变量 y 设置为要删除的元素节点
  3. 通过使用 removeChild() 方法从父节点删除元素节点

删除自身 - 删除当前的节点

removeChild() 方法是唯一可以删除指定节点的方法。

当您已导航到需要删除的节点时，就可以通过使用 parentNode 属性和 removeChild() 方法来删除此节点：

实例

<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"> 
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");

document.write("Number of book nodes before removeChild(): ");
document.write(xmlDoc.getElementsByTagName("book").length);
document.write("<br>");

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

document.write("Number of book nodes after removeChild(): ");
document.write(xmlDoc.getElementsByTagName("book").length);

</script>
</body>
</html>
            
 

实例解释：

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  2. 把变量 y 设置为要删除的元素节点
  3. 通过使用 parentNode 属性和 removeChild() 方法来删除此元素节点

删除文本节点

removeChild() 方法可用于删除文本节点：

实例

<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"> 
</script>
</head>
<body>
<script>
xmlDoc=loadXMLDoc("books.xml");


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

document.write("Child nodes: ");
document.write(x.childNodes.length);
document.write("<br>");

y=x.childNodes[0];
x.removeChild(y);

document.write("Child nodes: ");
document.write(x.childNodes.length);
</script>
</body>
</html>
实例解释：
  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  2. 把变量 x 设置为第一个 title 元素节点
  3. 把变量 y 设置为要删除的文本节点
  4. 通过使用 removeChild() 方法从父节点删除元素节点

不太常用 removeChild() 从节点删除文本。可以使用 nodeValue 属性代替它。请看下一段。

清空文本节点

nodeValue 属性可用于改变或清空文本节点的值：

实例

<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"> 
</script>
</head>
<body>

<script>
xmlDoc=loadXMLDoc("books.xml");

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

document.write("Value: " + x.nodeValue);
document.write("<br>");

x.nodeValue="";

document.write("Value: " + x.nodeValue);
</script>
</body>
</html>
 

实例解释：

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  2. 把变量 x 设置为第一个 title 元素的文本节点
  3. 使用 nodeValue 属性来清空文本节点的文本

遍历并更改所有 <title> 元素的文本节点：

尝试一下

<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"> 
</script>
</head>
<body>

<script>
xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("title");

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

根据名称删除属性节点

removeAttribute(name) 方法用于根据名称删除属性节点。

实例：removeAttribute('category')

下面的代码片段删除第一个 <book> 元素中的 "category" 属性：

实例

<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"> 
</script>
</head>
<body>

<script>
xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName('book');

document.write(x[0].getAttribute('category'));
document.write("<br>");

x[0].removeAttribute('category');

document.write(x[0].getAttribute('category'));

</script>
</body>
</html>
            
 

实例解释：

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  2. 使用 getElementsByTagName() 来获取 book 节点
  3. 从第一个 book 元素节点中删除 "category" 属性

遍历并删除所有 <book> 元素的 "category" 属性：

尝试一下

<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"> 
</script>
</head>
<body>

<script>
xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName('book');

//Print the value of all "category" attributes
for (i=0;i<x.length;i++)
{
document.write(x[i].getAttribute('category'));
document.write("<br>");
}

//Remove the value of all "category" attributes
for(i=0;i<x.length;i++)
{
y = x.item(i);
y.removeAttribute('category');
}

//Print the value of all "category" attributes
for (i=0;i<x.length;i++)
{
document.write(x[i].getAttribute('category'));
document.write("<br>");
}

</script>
</body>
</html>

根据对象删除属性节点

removeAttributeNode(node) 方法通过使用 node 对象作为参数，来删除属性节点。

实例: removeAttributeNode(x)

下面的代码片段删除所有 <book> 元素的所有属性：

实例

<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"> 
</script>
</head>
<body>

<script>
xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName('book');

for (i=0;i<x.length;i++)
{
while (x[i].attributes.length>0)
  {
  attnode=x[i].attributes[0];
  old_att=x[i].removeAttributeNode(attnode);

  document.write("Removed: " + old_att.nodeName)
  document.write(": " + old_att.nodeValue)
  document.write("<br>")
  }
}
</script>
</body>
</html>
 

实例解释：

  1. 使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中
  2. 使用 getElementsByTagName() 来获取所有 book 节点
  3. 检查每个 book 元素是否拥有属性
  4. 如果在某个 book 元素中存在属性，则删除该属性