JavaScript에서 DOM 노드 또는 문서를 XML로 변환

StackOverflow https://stackoverflow.com/questions/829574

  •  06-07-2019
  •  | 
  •  

문제

JavaScript에서 단일 DOM 요소 또는 문서 (예 : Window.document)가 전달되어 있다고 말하면 어떻게 유효한 XML로 바꾸겠습니까?

보다 구체적으로 내 예를 들어, 디스플레이는 SVG 인 웹 페이지가 있으며이 SVG에는 상호 작용을 허용하는 JavaScript가 많이 있습니다. 그래프를 확대하고 일부 변환을 할 수있는 그래프 디스플레이입니다. 이제이 사용자는 "이미지 저장"버튼을 원합니다. 이 작업을 수행하는 방식은 SVG 요소의 문서 노드를 가져 와서 XML로 변환 한 다음 서버로 보내서 SVG 문서 또는 PNG 이미지와 함께 페이지를 반환하는 것입니다.

이것은 모두 Firefox에서 실행 중입니다 (현재 사용자에게는 요구 사항이지만 Safari 및 Chrome에서도 잘 작동합니다). 웹 페이지의 Firefox에서는 SVG 문서를 객체 요소로 포함 시켰습니다. javaScript에서는 XML 페이지의 루트를 나타내는 해당 개체 ContentDocument에 액세스 할 수 있습니다. 여기에는 XML 버전, 문서 태그 및 모든 속성이있는 루트 SVG 태그가 포함되어 있습니다.

어쩌면 누군가가 이미 이것을 해결 했으므로 코드를 복사 할 수 있습니다. 아마도 누군가가이를 달성하기 위해 Firebug에서 어디를 볼지 알고있을 것입니다. 아니면 이미 이것에 대한 DOM 방법이있을 수 있습니다.

도움이 되었습니까?

해결책

비표준 API 객체가 있습니다. xmlserializer (IE 브라우저를 제외하고는 모두 표준이 아닙니다).

SerializetoString 메소드는 Domnode 객체가 전달 될 것으로 예상합니다.

var sXML = new XMLSerializer().serializeToString(document.body);

Internet Explorer에서 .outerhtml을 얻고 HTML에 직렬화 된 모든 문제를 수정하지 않는 한 HTML에 적합한 XML을 검색 할 수있는 방법이 없습니다 (예 : 닫힌 태그가 아닌 속성의 인용문이 없음).

다른 팁

나는 내일 XMLSerializer를 조사해야 할 것이다. 누구나 관심이있는 경우 (알 수없는 노드에 대한 프로토 타입 및 Firebug가 필요한 경우) 다음은 다음과 같습니다.

function extractXML(node) {
    switch (node.nodeType) {
        case 1: return extractNodeXML(node);
        case 2: return extractAttributeXML(node);
        // 3 = Text node
        case 3: return node.nodeValue;
        // 8 = Comment node - ignore
        case 8: return "";
        case 9: return extractDocumentNodeXML(node);
        case 10: return extractDocumentTypeXML(node);
        default: console.log(node); return "Unkwon type: "+node.nodeType;
    }
}
function extractNodeXML(node) {
    var xml = "<"+node.nodeName;
    $A(node.attributes).each(function (node) {xml += " "+extractXML(node)});
    xml +=">"
    $A(node.childNodes).each(function (node) {xml += extractXML(node)});
    xml += "</"+node.nodeName+">"
    return xml;
}
function extractAttributeXML(node) {
    return node.nodeName+"=\""+node.nodeValue+"\""
}
function extractDocumentNodeXML(node) {
    var xml = "<?xml version=\""+node.xmlVersion+"\" encoding=\""+node.xmlEncoding+"\"?>"
    $A(node.childNodes).each(function (node) {xml += extractXML(node)});
    return xml;
}
function extractDocumentTypeXML(node) {
    return "<!DOCTYPE "+node.name+" PUBLIC \""+node.publicId+"\" \""+node.systemId+"\">"
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top