XML DOM replaceChild() 方法



  • 定义和使用

    replaceChild() 方法用新节点替换子节点。
    新节点可以是文档中的现有节点,也可以创建一个新节点。
    提示:替换的子节点可以稍后插入同一文档中的任何元素中;使用 insertBefore()appendChild() 方法稍后将其插入同一文档中,或者使用 acceptNode() 或 importNode() 方法将替换后的节点插入另一个文档中。
  • 浏览器支持

    Internet Explorer Chrome FireFox Safari Opera
    9.0(包含)以上支持 4.0(包含)以上支持 2.0(包含)以上支持 3.0(包含)以上支持 9.0(包含)以上支持
    所有主流的浏览器均支持 replaceChild() 方法。
  • 语法

    nodeObject.replaceChild(newchild,oldchild)
    

    参数

    参数 类型 描述
    newchild Object 必填,要放入子列表的新节点
    oldchild Object 必填,子列表中将要替换的节点
  • 返回值

    Node object 替换的节点(oldchild)
    DOM 版本 核心级别1节点对象。 在DOM级别3中修改
  • 示例

    以下代码片段将 "books.xml" 加载到 xmlDoc 中,并删除第一个<book>节点中的第一个子节点:
    <!DOCTYPE html>
    <html>
      <body>
      
      <p id="demo"></p>
    
      <script>
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                myFunction(xhttp);
            }
        };
        xhttp.open("GET", "books.xml", true);
        xhttp.send();
        
        function myFunction(xml) {
            var x, y, z, i, newNode, newTitle, newText, xmlDoc, txt;
            xmlDoc = xml.responseXML;
            txt = "";
            x = xmlDoc.documentElement;
            
            // 创建一个book元素,title元素和一个text节点
            newNode = xmlDoc.createElement("book");
            newTitle = xmlDoc.createElement("title");
            newText = xmlDoc.createTextNode("A Notebook");
        
            // 将文本节点添加到标题节点
            newTitle.appendChild(newText);
        
            // 将书名节点添加到书名节点
            newNode.appendChild(newTitle);
        
            y = xmlDoc.getElementsByTagName("book")[0];
        
            // 将第一本书节点替换为新本书节点
            x.replaceChild(newNode, y);
        
            z = xmlDoc.getElementsByTagName("title");
            //输出所有标题  
            for (i = 0; i < z.length; i++) { 
                txt += z[i].childNodes[0].nodeValue + "<br>";
            }
            document.getElementById("demo").innerHTML = txt; 
        }
      </script>
      
      </body>
    </html>
    
    尝试一下