当前位置: 首页 > 教程 > DOM >

XML DOM创建节点

精华
小牛编辑
96浏览
2023-03-14

在本章中,我们将讨论如何使用文档对象的几种方法来创建新节点。 这些方法提供了创建新元素节点,文本节点,注释节点,CDATA节节点和属性节点的范围。 如果新创建的节点已存在于元素对象中,则将其替换为新节点。 下面将通过示例演示这些操作。

1. 创建新的Element节点

createElement()方法创建一个新的元素节点。 如果元素对象中存在新创建的元素节点,则将其替换为新元素节点。

语法
使用createElement()方法的语法如下 -

var_name = xmldoc.createElement("tagname");

其中,

  • var_name - 是用户定义的变量名,它包含新元素的名称。
  • tagname - 是要创建的新元素节点的名称。

示例
以下示例(create_newelement.html)将XML文档(node.xml)解析为XML DOM对象,并在XML文档中创建新的元素节点 - PhoneNo

文件:create_newelement.html -

<!DOCTYPE html>
<html>
   <head>
      <script>
         function loadXMLDoc(filename) {
            if (window.XMLHttpRequest) {
               xhttp = new XMLHttpRequest();
            } else { // code for IE5 and IE6
               xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhttp.open("GET",filename,false);
            xhttp.send();
            return xhttp.responseXML;
         }
      </script>
   </head>
   <body>
      <script>
         xmlDoc = loadXMLDoc("/node.xml");

         new_element = xmlDoc.createElement("PhoneNo");

         x = xmlDoc.getElementsByTagName("FirstName")[0];
         x.appendChild(new_element);

         document.write(x.getElementsByTagName("PhoneNo")[0].nodeName);
      </script>
   </body>
</html>

在上面代码中,

  • new_element = xmlDoc.createElement("PhoneNo"); 用于创建新的元素节点:<PhoneNo>
  • x.appendChild(new_element); x保存附加新元素节点的指定子节点<FirstName>的名称。

执行
将此文件保存为:create_newelement.html,并放置到服务器路径上(此文件和node.xml应位于服务器中的同一路径上)。 在输出结果中应该能到新建的属性值为:PhoneNo

2. 创建新的Text节点

createTextNode()方法创建一个新的文本节点。

语法

使用createTextNode()的语法如下 -

var_name = xmldoc.createTextNode("tagname");

在上面示例代码中,

  • var_name - 它是用户定义的变量名,它包含新文本节点的名称。
  • tagname - 括号内是要创建的新文本节点的名称。

示例

以下示例(create_textnode.html)将XML文档(node.xml)解析为XML DOM对象,并在XML文档中创建新文本节点Im

<!DOCTYPE html>
<html>
   <head>
      <script>
         function loadXMLDoc(filename) {
            if (window.XMLHttpRequest) {
               xhttp = new XMLHttpRequest();
            } else{ // code for IE5 and IE6 
               xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhttp.open("GET",filename,false);
            xhttp.send();
            return xhttp.responseXML;
         }
      </script>
   </head>
   <body>
      <script>
         xmlDoc = loadXMLDoc("/node.xml");

         create_e = xmlDoc.createElement("PhoneNo");
         create_t = xmlDoc.createTextNode("Im new text node");
         create_e.appendChild(create_t);

         x = xmlDoc.getElementsByTagName("Employee")[0];
         x.appendChild(create_e);


         document.write(" PhoneNO: ");
         document.write(x.getElementsByTagName("PhoneNo")[0].childNodes[0].nodeValue);
      </script>
    </body>
</html>

上述代码简单描述如下 -

  • create_e = xmlDoc.createElement("PhoneNo"); 创建一个新的元素:<PhoneNo>
  • create_t = xmlDoc.createTextNode("Im new text node"); 创建一个新的文本节点:"Im new text node"
  • x.appendChild(create_e); 表示新的文本节点 - "Im new text node" 添加到元素 - <PhoneNo>
  • document.write(x.getElementsByTagName("PhoneNo")[0].childNodes[0].nodeValue); 将新文本节点值写入元素:<PhoneNo>

执行

将此文件保存为:create_textnode.html,并放置到WEB服务器上(此文件和node.xml应位于服务器中的同一路径上)。 在输出中得到属性值,即PhoneNO: Im new text node

3. 创建新的注释节点

createComment()方法创建一个新的注释节点。 注释节点包含在程序中,以便于理解代码功能。

语法
使用createComment()的语法如下 -

var_name = xmldoc.createComment("tagname");

其中,

  • var_name - 是用户定义的变量名,它包含新注释节点的名称。
  • tagname - 是要创建的新注释节点的名称。

示例

以下示例(create_commentnode.html)将XML文档(node.xml)解析为XML DOM对象,并在XML文档中创建新的注释节点 - "Company is the parent node"

<!DOCTYPE html>
<html>
   <head>
      <script>
         function loadXMLDoc(filename) {
            if (window.XMLHttpRequest) {
               xhttp = new XMLHttpRequest();
            }
            else{ // code for IE5 and IE6 
               xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhttp.open("GET",filename,false);
            xhttp.send();
            return xhttp.responseXML;
         }
      </script>
   </head>
   <body>
      <script>
         xmlDoc = loadXMLDoc("node.xml");
         create_comment = xmlDoc.createComment("Company is the parent node");
         x = xmlDoc.getElementsByTagName("Company")[0];
         x.appendChild(create_comment);

         document.write(x.lastChild.nodeValue);
      </script>
   </body>
</html>

在上面的例子中 -

  • create_comment = xmlDoc.createComment("Company is the parent node");创建指定的注释行。
  • x.appendChild(create_comment);在此行中,x包含附加注释行的元素<Company>的名称。

执行

将此文件保存为:create_commentnode.html ,并放置到服务器上(此文件和node.xml应位于服务器中的同一路径上)。 在输出中获取属性值 - " Company is the parent node"

4. 创建新的CDATA节节点

createCDATASection()方法创建一个新的CDATA节节点。 如果新创建的CDATA节节点存在于元素对象中,则它将被新节点替换。

语法
使用createCDATASection()的语法如下 -

var_name = xmldoc.createCDATASection("tagname");

在上面代码中,

  • var_name − 是用户定义的变量名,它包含新CDATA部分节点的名称。
  • tagname − 是要创建的新CDATA部分节点的名称。

示例
以下示例(create_datanode.html)将XML文档(node.xml)解析为XML DOM对象,并在XML文档中创建新的CDATA节节点 - "Create CDATA Example"

<!DOCTYPE html>
<html>
   <head>
      <script>
         function loadXMLDoc(filename) {
            if (window.XMLHttpRequest) {
               xhttp = new XMLHttpRequest();
            }
            else{ // code for IE5 and IE6 {
               xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhttp.open("GET",filename,false);
            xhttp.send();
            return xhttp.responseXML;
         }
      </script>
   </head>
   <body>
      <script>
         xmlDoc = loadXMLDoc("/node.xml");

         create_CDATA = xmlDoc.createCDATASection("Create CDATA Example");

         x = xmlDoc.getElementsByTagName("Employee")[0];
         x.appendChild(create_CDATA);
         document.write(x.lastChild.nodeValue);
      </script>
   </body>
</html>

在上面示例代码中,

  • create_CDATA = xmlDoc.createCDATASection("Create CDATA Example") 创建一个新的CDATA部分节点 - "Create CDATA Example"
  • x.appendChild(create_CDATA) 在这里, x 保存索引0的指定元素<Employee>,其中附加了CDATA节点值。

执行
将此文件保存为:create_cdatanode.html,并放置到服务器上(此文件和node.xml应位于服务器中的同一路径上)。 在输出中将获取属性值为:Create CDATA Example。如下图所示 -

5. 创建新的属性节点

要创建新的属性节点,请使用setAttributeNode()方法。 如果元素对象中存在新创建的属性节点,则将其替换为新节点。

语法
使用createElement()方法的语法如下 -

var_name = xmldoc.createAttribute("tagname");

其中,

  • var_name - 是用户定义的变量名,它包含新属性节点的名称。
  • tagname - 是要创建的新属性节点的名称。

示例
以下示例(create_attribute_node.html)将XML文档(node.xml)解析为XML DOM对象,并在XML文档中创建新的属性节点部分。

<!DOCTYPE html>
<html>
   <head>
      <script>
         function loadXMLDoc(filename) {
            if (window.XMLHttpRequest) {
               xhttp = new XMLHttpRequest();
            } else{ // code for IE5 and IE6 
               xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhttp.open("GET",filename,false);
            xhttp.send();
            return xhttp.responseXML;
         }
      </script>
   </head>
   <body>
      <script>
         xmlDoc = loadXMLDoc("/node.xml");

         create_a = xmlDoc.createAttribute("section");
         create_a.nodeValue = "A";

         x = xmlDoc.getElementsByTagName("Employee");
         x[0].setAttributeNode(create_a);
         document.write("New Attribute: ");
         document.write(x[0].getAttribute("section"));

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

在上面代码中,

  • create_a=xmlDoc.createAttribute("Category") 创建名称为<section>的属性。
  • create_a.nodeValue="Management" 创建<section>属性的值为"A"
  • x[0].setAttributeNode(create_a) 这个属性值设置为<Employee>的第0个索引位置。

执行上面示例代码,得到以下结果 -