XML DOM替换节点

replaceChild() 方法替换指定节点。

nodeValue 属性替换文本节点中的文本。

tryitimg.gif 尝试一下 - 实例


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

替换元素节点
本例使用 replaceChild() 来替换第一个 节点。

替换文本节点中的数据
本例使用 nodeValue 属性来替换文本节点中的数据。

替换元素节点

replaceChild() 方法用于替换节点。

下面的代码片段替换第一个 元素：

实例

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例解释：

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

  2. 创建一个新的元素节点

  3. 创建一个新的元素节点 </p></li> <li><p>创建一个新的文本节点，带有文本 "A Notebook"</p></li> <li><p>向新元素节点 <title> 追加这个新文本节点</p></li> <li><p>向新元素节点 <book> 追加这个新元素节点 <title></p></li> <li><p>把第一个 <book> 元素节点替换为新的 <book> 元素节点</p></li> </ol> <hr> <h2>替换文本节点中的数据</h2> <p>replaceData() 方法用于替换文本节点中的数据。</p> <p>replaceData() 方法有三个参数：</p> <ul class=" list-paddingleft-2"> <li><p>offset - 在何处开始替换字符。offset 值以 0 开始。</p></li> <li><p>length - 要替换多少字符</p></li> <li><p>string - 要插入的字符串</p></li> </ul> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"> </script> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <script> xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title")[0].childNodes[0]; document.write(x.nodeValue); x.replaceData(0,8,"Easy"); document.write("<br>"); document.write(x.nodeValue); </script> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <p>实例解释：</p> <ol class=" list-paddingleft-2"> <li><p>使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中</p></li> <li><p>获取第一个 <title> 元素节点的文本节点</p></li> <li><p>使用 replaceData 方法把文本节点的前 8 个字符替换为 "Easy"</p></li> </ol> <hr> <h2>使用 nodeValue 属性代替</h2> <p>用 nodeValue 属性来替换文本节点中数据会更加容易。</p> <p>下面的代码片段将用 "Easy Italian" 替换第一个 <title> 元素中的文本节点值：</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <script src="loadxmldoc.js"> </script> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <script> xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title")[0].childNodes[0]; document.write(x.nodeValue); x.nodeValue="Easy Italian"; document.write("<br>"); document.write(x.nodeValue); </script> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <p>实例解释：</p> <ol class=" list-paddingleft-2"> <li><p>使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中</p></li> <li><p>获取第一个 <title> 元素节点的文本节点</p></li> <li><p>使用 nodeValue 属性来更改这个文本节点的文本</p></li> </ol> <p>您可以在改变节点这一章中阅读更多有关更改节点值的内容。</p> <br> </div> </div> </div> <div class="previous-next-links"> <div class="previous-design-link"> ← <a href="//m.sbmmt.com/ko/xml/xml-nodes-remove.html" rel="prev">DOM 删除节点</a> </div> <div class="next-design-link"> <a href="//m.sbmmt.com/ko/xml/xml-nodes-create.html" rel="next">DOM 创建节点</a>→ </div> </div> </article> <div class="right-item phpcn-col-md2"> <ul> <li><h3>튜토리얼 탐색</h3> <dl class="navigation"> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/ko/course/list/1/type/3.html" target="_blank" title="큰 프런트 엔드">큰 프런트 엔드</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/ko/course/list/1/type/3.html" title="HTML">HTML</a> <a href="//m.sbmmt.com/ko/course/list/1/type/3.html" title="CSS">CSS</a> <a href="//m.sbmmt.com/ko/course/list/1/type/3.html" title="HTML5">HTML5</a> <a href="//m.sbmmt.com/ko/course/list/1/type/3.html" title="CSS3">CSS3</a> <a href="//m.sbmmt.com/ko/course/list/1/type/3.html" title="자바스크립트">자바스크립트</a> <a href="//m.sbmmt.com/ko/course/list/1/type/3.html" title="jQuery">jQuery</a> <a href="//m.sbmmt.com/ko/course/list/1/type/3.html" title="View.js">View.js</a> <a href="//m.sbmmt.com/ko/course/list/1/type/3.html" title="반응하다">반응하다</a> <a href="//m.sbmmt.com/ko/course/list/1/type/3.html" title="AngularJS">AngularJS</a> <a href="//m.sbmmt.com/ko/course/list/1/type/3.html" title="Node.js">Node.js</a> <a href="//m.sbmmt.com/ko/course/list/1/type/3.html" title="아약스">아약스</a> <a href="//m.sbmmt.com/ko/course/list/1/type/3.html" title="부트스트랩">부트스트랩</a> <a href="//m.sbmmt.com/ko/course/list/1/type/3.html" title="기반">기반</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/ko/course/list/2/type/3.html" target="_blank" title="자바스크립트">자바스크립트</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/ko/course/list/2/type/3.html" title="하이차트">하이차트</a> <a href="//m.sbmmt.com/ko/course/list/2/type/3.html" title="지도 API">지도 API</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/ko/course/list/3/type/3.html" target="_blank" title="백엔드 개발">백엔드 개발</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/ko/course/list/3/type/3.html" title="PHP">PHP</a> <a href="//m.sbmmt.com/ko/course/list/3/type/3.html" title="ThinkPHP">ThinkPHP</a> <a href="//m.sbmmt.com/ko/course/list/3/type/3.html" title="라라벨">라라벨</a> <a href="//m.sbmmt.com/ko/course/list/3/type/3.html" title="파이썬">파이썬</a> <a href="//m.sbmmt.com/ko/course/list/3/type/3.html" title="가다">가다</a> <a href="//m.sbmmt.com/ko/course/list/3/type/3.html" title="자바">자바</a> <a href="//m.sbmmt.com/ko/course/list/3/type/3.html" title="씨">씨</a> <a href="//m.sbmmt.com/ko/course/list/3/type/3.html" title="C++">C++</a> <a href="//m.sbmmt.com/ko/course/list/3/type/3.html" title="씨#">씨#</a> <a href="//m.sbmmt.com/ko/course/list/3/type/3.html" title="JSP">JSP</a> <a href="//m.sbmmt.com/ko/course/list/3/type/3.html" title="장고">장고</a> <a href="//m.sbmmt.com/ko/course/list/3/type/3.html" title="ASP.NET">ASP.NET</a> <a href="//m.sbmmt.com/ko/course/list/3/type/3.html" title="ASP">ASP</a> <a href="//m.sbmmt.com/ko/course/list/3/type/3.html" title="XML">XML</a> <a href="//m.sbmmt.com/ko/course/list/3/type/3.html" title="루비">루비</a> <a href="//m.sbmmt.com/ko/course/list/3/type/3.html" title="파이썬3">파이썬3</a> <a href="//m.sbmmt.com/ko/course/list/3/type/3.html" title="펄">펄</a> <a href="//m.sbmmt.com/ko/course/list/3/type/3.html" title="서블릿">서블릿</a> <a href="//m.sbmmt.com/ko/course/list/3/type/3.html" title="루아">루아</a> <a href="//m.sbmmt.com/ko/course/list/3/type/3.html" title="스칼라">스칼라</a> <a href="//m.sbmmt.com/ko/course/list/3/type/3.html" title="AppML">AppML</a> <a href="//m.sbmmt.com/ko/course/list/3/type/3.html" title="VB스크립트">VB스크립트</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/ko/course/list/4/type/3.html" target="_blank" title="데이터 베이스">데이터 베이스</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/ko/course/list/4/type/3.html" title="MySQL">MySQL</a> <a href="//m.sbmmt.com/ko/course/list/4/type/3.html" title="레디스">레디스</a> <a href="//m.sbmmt.com/ko/course/list/4/type/3.html" title="신탁">신탁</a> <a href="//m.sbmmt.com/ko/course/list/4/type/3.html" title="몽고DB">몽고DB</a> <a href="//m.sbmmt.com/ko/course/list/4/type/3.html" title="멤캐시드">멤캐시드</a> <a href="//m.sbmmt.com/ko/course/list/4/type/3.html" title="SQL 서버">SQL 서버</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/ko/course/list/5/type/3.html" target="_blank" title="모바일 단말기">모바일 단말기</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/ko/course/list/5/type/3.html" title="애플릿">애플릿</a> <a href="//m.sbmmt.com/ko/course/list/5/type/3.html" title="유니앱">유니앱</a> <a href="//m.sbmmt.com/ko/course/list/5/type/3.html" title="실룩 거리다">실룩 거리다</a> <a href="//m.sbmmt.com/ko/course/list/5/type/3.html" title="기계적 인조 인간">기계적 인조 인간</a> <a href="//m.sbmmt.com/ko/course/list/5/type/3.html" title="iOS">iOS</a> <a href="//m.sbmmt.com/ko/course/list/5/type/3.html" title="빠른">빠른</a> <a href="//m.sbmmt.com/ko/course/list/5/type/3.html" title="다른">다른</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/ko/course/list/9/type/3.html" target="_blank" title="운영 및 유지보수 개발">운영 및 유지보수 개발</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/ko/course/list/9/type/3.html" title="리눅스">리눅스</a> <a href="//m.sbmmt.com/ko/course/list/9/type/3.html" title="도커">도커</a> <a href="//m.sbmmt.com/ko/course/list/9/type/3.html" title="PhpStudy">PhpStudy</a> <a href="//m.sbmmt.com/ko/course/list/9/type/3.html" title="힘내">힘내</a> <a href="//m.sbmmt.com/ko/course/list/9/type/3.html" title="기타 도구">기타 도구</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/ko/course/list/7/type/3.html" target="_blank" title="UI 디자인">UI 디자인</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/ko/course/list/7/type/3.html" title="아후레">아후레</a> <a href="//m.sbmmt.com/ko/course/list/7/type/3.html" title="MVC">MVC</a> <a href="//m.sbmmt.com/ko/course/list/7/type/3.html" title="웹 양식">웹 양식</a> <a href="//m.sbmmt.com/ko/course/list/7/type/3.html" title="추신">추신</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/ko/course/list/10/type/3.html" target="_blank" title="컴퓨터 기초">컴퓨터 기초</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/ko/course/list/10/type/3.html" title="디자인 패턴">디자인 패턴</a> <a href="//m.sbmmt.com/ko/course/list/10/type/3.html" title="정규식">정규식</a> <a href="//m.sbmmt.com/ko/course/list/10/type/3.html" title="HTTP">HTTP</a> <a href="//m.sbmmt.com/ko/course/list/10/type/3.html" title="웹사이트 구축 가이드">웹사이트 구축 가이드</a> <a href="//m.sbmmt.com/ko/course/list/10/type/3.html" title="브라우저 정보">브라우저 정보</a> <a href="//m.sbmmt.com/ko/course/list/10/type/3.html" title="웹사이트 호스트">웹사이트 호스트</a> <a href="//m.sbmmt.com/ko/course/list/10/type/3.html" title="TCP/IP">TCP/IP</a> <a href="//m.sbmmt.com/ko/course/list/10/type/3.html" title="W3C">W3C</a> <a href="//m.sbmmt.com/ko/course/list/10/type/3.html" title="코드베이직">코드베이직</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/ko/course/list/6/type/3.html" target="_blank" title="XML">XML</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/ko/course/list/6/type/3.html" title="DTD">DTD</a> <a href="//m.sbmmt.com/ko/course/list/6/type/3.html" title="XML DOM">XML DOM</a> <a href="//m.sbmmt.com/ko/course/list/6/type/3.html" title="XSLT">XSLT</a> <a href="//m.sbmmt.com/ko/course/list/6/type/3.html" title="XPath">XPath</a> <a href="//m.sbmmt.com/ko/course/list/6/type/3.html" title="XQuery">XQuery</a> <a href="//m.sbmmt.com/ko/course/list/6/type/3.html" title="엑스링크">엑스링크</a> <a href="//m.sbmmt.com/ko/course/list/6/type/3.html" title="X포인터">X포인터</a> <a href="//m.sbmmt.com/ko/course/list/6/type/3.html" title="XML 스키마">XML 스키마</a> <a href="//m.sbmmt.com/ko/course/list/6/type/3.html" title="XSL-FO">XSL-FO</a> <a href="//m.sbmmt.com/ko/course/list/6/type/3.html" title="SVG">SVG</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/ko/course/list/8/type/3.html" target="_blank" title="웹 서비스">웹 서비스</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/ko/course/list/8/type/3.html" title="웹 서비스">웹 서비스</a> <a href="//m.sbmmt.com/ko/course/list/8/type/3.html" title="WSDL">WSDL</a> <a href="//m.sbmmt.com/ko/course/list/8/type/3.html" title="비누">비누</a> <a href="//m.sbmmt.com/ko/course/list/8/type/3.html" title="RSS">RSS</a> <a href="//m.sbmmt.com/ko/course/list/8/type/3.html" title="RDF">RDF</a> </div> </dd> </dl></li> </ul> </div> </div> <div id="codeMark"></div> <div id="codeMain"> <div class="left"> <div id="codeEditor"></div> <div class="editor-btn"> <div class="editor-btn-inner"> <a href="javascript:;" class="code-btn-submit r" id="J_Commit" title="제출하다">제출하다</a> </div> </div> </div> <div class="right"> <div id="codeResult"></div> </div> <div id="close"></div> </div> </body> </html>