DOM 수정 XML 자바스크립트-프런트엔드 Q&A-php.cn

DOM XML 수정(JavaScript)

DOM(Document Object Model)은 JavaScript의 핵심이자 XML을 조작하는 표준 방법입니다. XML(Extensible Markup Language)은 데이터를 저장하고 교환하는 데 일반적으로 사용되는 형식이며 HTML의 기초입니다. 프런트 엔드 개발 분야에서는 AJAX 개발에서 서버에 XML 요청을 보내거나 XML 형식으로 응답을 받는 등 XML을 조작하기 위해 JavaScript를 사용해야 하는 경우가 많습니다. 이 기사에서는 JavaScript의 DOM을 사용하여 XML을 수정하는 방법에 중점을 둘 것입니다.

XML 구조 소개

DOM으로 XML을 수정하는 방법을 배우기 전에 먼저 XML의 기본 구조를 이해해야 합니다. XML은 태그를 기본 문법 단위로 하는 텍스트입니다. XML의 기본 구조는 다음과 같습니다.

<?xml version="1.0" encoding="UTF-8"?>
<root>
  <element1 attribute1="value1">content1</element1>
  <element2>content2</element2>
  <element3>
    <subelement1>subcontent1</subelement1>
    <subelement2>subcontent2</subelement2>
  </element3>
</root>

로그인 후 복사

그 중 XML 문서는 <?xml ... ?></code로 시작해야 합니다. > 문으로, 최상위 요소(루트 요소)를 <code>root라고 하며, 다른 요소를 element라고 합니다. 각 요소에는 요소에 대한 설명 정보를 제공하는 데 사용되는 하나 이상의 속성(예: attribute1)이 있을 수 있습니다. 요소는 다른 요소를 포함할 수도 있으며 이러한 요소 중첩을 요소 계층 구조라고 합니다. <?xml ... ?> 声明开始，而顶层元素（根元素）称为 root，其他元素称为 element。每个元素可以有一个或多个属性（例如 attribute1），属性用于提供元素的描述信息。元素还可以包含其他元素，这种元素嵌套称为元素层级结构。

DOM 修改 XML 基本操作

JavaScript 的 DOM 可以解析 XML，并将其转化为一棵节点树，允许我们使用 JavaScript 编写代码对这棵节点树进行修改操作。

1. 解析 XML

令 xmlstr 为一个 XML 字符串，我们可以使用 JavaScript 的 DOMParser 对其进行解析：

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

로그인 후 복사

解析完成后，我们可以对解析后的 xmlDoc 进行修改。

2. 获取元素值

对于 XML 中的元素内容，我们可以通过 nodeValue 属性获取其值：

const element1Value = xmlDoc.getElementsByTagName("element1")[0].childNodes[0].nodeValue;
console.log(element1Value); // "content1"

로그인 후 복사

这里我们使用 getElementsByTagName 获取名为 element1 的元素节点，childNodes[0] 获取其文本节点，最后再使用 nodeValue 获取其值。

3. 获取和设置属性

对于 XML 中的元素属性，我们可以使用 getAttribute 和 setAttribute 方法来获取和设置属性值：

const attribute1Value = xmlDoc.getElementsByTagName("element1")[0].getAttribute("attribute1");
console.log(attribute1Value); // "value1"

xmlDoc.getElementsByTagName("element1")[0].setAttribute("attribute1", "newvalue");

로그인 후 복사

这里我们使用 getAttribute 获取名为 attribute1 的 element1 的属性值，然后使用 setAttribute 设置 attribute1 的新值为 newvalue。需要注意的是，在设置属性时，需要指定该属性所属的元素节点以及属性名。

4. 创建元素节点

我们可以使用 createElement 方法在 XML 文档中创建新的元素节点：

const newElement = xmlDoc.createElement("newelement");

로그인 후 복사

这里我们创建了一个名为 newelement 的新元素节点。

5. 添加节点

我们可以使用 appendChild 方法将一个节点添加到另一个节点的子节点列表中：

const element1 = xmlDoc.getElementsByTagName("element1")[0];
element1.appendChild(newElement);

로그인 후 복사

这里我们将新创建的 newelement 添加到 element1 的子节点列表中。

6. 删除节点

我们可以使用 removeChild 方法从其父节点的子节点列表中删除一个节点：

const element1 = xmlDoc.getElementsByTagName("element1")[0];
const subelement2 = xmlDoc.getElementsByTagName("subelement2")[0];
element1.removeChild(subelement2);

로그인 후 복사

这里我们将 subelement2 从其父节点 element1 的子节点列表中删除。

完整示例代码：

// 解析 XML
const parser = new DOMParser();
const xmlstr = `
<?xml version="1.0" encoding="UTF-8"?>
<root>
  <element1 attribute1="value1">content1</element1>
  <element2>content2</element2>
  <element3>
    <subelement1>subcontent1</subelement1>
    <subelement2>subcontent2</subelement2>
  </element3>
</root>`;
const xmlDoc = parser.parseFromString(xmlstr, "text/xml");

// 获取元素内容并修改
const element1Value = xmlDoc.getElementsByTagName("element1")[0].childNodes[0].nodeValue;
console.log(element1Value); // "content1"
xmlDoc.getElementsByTagName("element1")[0].childNodes[0].nodeValue = "newcontent1";

// 获取元素属性并修改
const attribute1Value = xmlDoc.getElementsByTagName("element1")[0].getAttribute("attribute1");
console.log(attribute1Value); // "value1"
xmlDoc.getElementsByTagName("element1")[0].setAttribute("attribute1", "newvalue");

// 创建新节点并添加
const newElement = xmlDoc.createElement("newelement");
const element2 = xmlDoc.getElementsByTagName("element2")[0];
element1.appendChild(newElement);

// 删除节点
const element1 = xmlDoc.getElementsByTagName("element1")[0];
const subelement2 = xmlDoc.getElementsByTagName("subelement2")[0];
element1.removeChild(subelement2);

console.log(xmlDoc.documentElement.outerHTML);

로그인 후 복사

需要注意的是，修改 XML 中的节点后需要使用 outerHTML

XML DOM 수정의 기본 작업

JavaScript의 DOM은 XML을 구문 분석하고 이를 노드 트리로 변환할 수 있으므로 JavaScript를 사용하여 이 노드 트리를 수정하는 코드를 작성할 수 있습니다.

1. XML 구문 분석

xmlstr을 XML 문자열로 둡니다. JavaScript의 DOMParser를 사용하여 구문 분석할 수 있습니다. 🎜

<?xml version="1.0" encoding="UTF-8"?>
<root>
   <element1 attribute1="newvalue">newcontent1<newelement/></element1>
   <element2>content2</element2>
   <element3>
      <subelement1>subcontent1</subelement1>
   </element3>
</root>

로그인 후 복사

🎜 구문 분석이 완료된 후 구문 분석할 수 있습니다. 다음 xmlDoc. 🎜

2. 요소 값 가져오기

🎜XML의 요소 콘텐츠의 경우 nodeValue 속성을 통해 해당 값을 가져올 수 있습니다. 🎜rrreee🎜여기에서는 getElementsByTagName를 사용합니다. > element1라는 요소 노드를 가져오고, childNodes[0]를 가져와 해당 텍스트 노드를 가져오고 마지막으로 nodeValue를 사용하여 해당 값을 가져옵니다. 🎜

3. 속성 가져오기 및 설정

🎜XML의 요소 속성의 경우 getAttribute 및 setAttribute 메서드를 사용하여 속성 값을 가져오고 설정할 수 있습니다. 🎜rrreee🎜여기에서는 getAttribute를 사용하여 attribute1라는 element1의 속성 값을 가져온 다음 setAttribute를 사용하여 set attribute1의 새 값은 newvalue입니다. 속성을 설정할 때 해당 속성이 속한 요소 노드와 속성 이름을 지정해야 한다는 점에 유의해야 합니다. 🎜

4. 요소 노드 생성

🎜 createElement 메서드를 사용하여 XML 문서에 새 요소 노드를 생성할 수 있습니다. 🎜rrreee🎜여기서 라는 요소를 생성합니다. newelement 의 새 요소 노드입니다. 🎜

5. 노드 추가

🎜 appendChild 메소드를 사용하여 다른 노드의 하위 노드 목록에 노드를 추가할 수 있습니다. 🎜rrreee🎜여기서 새로 생성된 newelement가 element1의 하위 노드 목록에 추가됩니다. 🎜

6. 노드 삭제

🎜 removeChild 메소드를 사용하여 상위 노드의 하위 노드 목록에서 노드를 삭제할 수 있습니다: 🎜rrreee🎜여기서 subelement2 code>는 상위 노드 <code>element1의 하위 노드 목록에서 제거됩니다. 🎜🎜전체 샘플 코드: 🎜rrreee🎜XML에서 노드를 수정한 후 전체 XML 문자열을 출력하려면 outerHTML 속성을 사용해야 한다는 점에 유의해야 합니다. 위의 예제 코드는 수정된 XML 콘텐츠를 출력합니다. 🎜rrreee🎜Conclusion🎜🎜JavaScript의 DOM을 사용하여 XML을 수정하면 요소와 속성을 쉽게 추가, 삭제 및 수정할 수 있습니다. XML의 구조는 상대적으로 유연하고 여러 수준에 중첩될 수 있으므로 XML을 수정할 때 특정 상황에 따라 노드 작업을 수행해야 합니다. 이 기사에서 소개된 XML에 대한 DOM 수정의 기본 작업을 학습함으로써 독자는 JavaScript를 유연하게 사용하여 XML을 수정하고 개발 효율성을 향상시킬 수 있다고 믿습니다. 🎜

위 내용은 DOM 수정 XML 자바스크립트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!