DOMParser Convert String to DOM Nodes DOMParser().parseFromString document.createRange().createContextualFragment



DOMParser & SVG

js parse html to dom

 

Convert String to DOM Nodes

DOMParser().parseFromString

let doc = new DOMParser().parseFromString('<div><b>Hello!</b></div>', 'text/html');
let div = doc.body.firstChild;

let divs = doc.body.querySelectorAll('div');


document.createRange().createContextualFragment


let frag = document.createRange().createContextualFragment('<div>One</div><div>Two</div>');
console.log(frag);

/*
#document-fragment
<div>One</div>
<div>Two</div>
*/

let firstChild = frag.firstChild;

let firstDiv = frag.querySelector('div');
let allDivs = frag.querySelectorAll('div');

// fragement

// Use a DocumentFragment to store and then mass inject a list of DOM nodes
var frag = document.createDocumentFragment();
for(var x = 0; x < 10; x++) {
var li = document.createElement("li");
li.innerHTML = "List item " + x;
frag.appendChild(li);
}





namespace bug

​<?xml version="1.0" encoding="UTF-8"?>​

let str = `
<?xml version="1.0" encoding="UTF-8"?>
<svg width="847px" height="400px" viewBox="0 0 847 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
<title>Slice 1</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" stroke="#979797" fill="#FBD5D5" x="103.5" y="0.5" width="632" height="147"></rect>
<text id="舞台" font-family="PingFangSC-Medium, PingFang SC" font-size="18" font-weight="400" fill="#000000">
<tspan x="402" y="81">舞台</tspan>
</text>
<rect id="Rectangle" stroke="#979797" fill="#5461F2" x="0.5" y="188.5" width="102" height="211"></rect>
<text id="A区" font-family="PingFangSC-Medium, PingFang SC" font-size="18" font-weight="400" fill="#000000">
<tspan x="36" y="301">A区</tspan>
</text>
<rect id="Rectangle" stroke="#979797" fill="#84FFEF" x="170.5" y="192.5" width="498" height="152"></rect>
<text id="B区" font-family="PingFangSC-Medium, PingFang SC" font-size="18" font-weight="400" fill="#000000">
<tspan x="405" y="275">B区</tspan>
</text>
<rect id="Rectangle" stroke="#979797" fill="#A25AF1" x="738.5" y="183.5" width="108" height="216"></rect>
<text id="C区" font-family="PingFangSC-Medium, PingFang SC" font-size="18" font-weight="400" fill="#000000">
<tspan x="787" y="294">C区</tspan>
</text>
</g>
</svg>

`;

let svgDom = new DOMParser().parseFromString(str, `image/svg+xml`);


DOMParser & SVG_js

OK

let str = `
<svg width="847px" height="400px" viewBox="0 0 847 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
<title>Slice 1</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" stroke="#979797" fill="#FBD5D5" x="103.5" y="0.5" width="632" height="147"></rect>
<text id="舞台" font-family="PingFangSC-Medium, PingFang SC" font-size="18" font-weight="400" fill="#000000">
<tspan x="402" y="81">舞台</tspan>
</text>
<rect id="Rectangle" stroke="#979797" fill="#5461F2" x="0.5" y="188.5" width="102" height="211"></rect>
<text id="A区" font-family="PingFangSC-Medium, PingFang SC" font-size="18" font-weight="400" fill="#000000">
<tspan x="36" y="301">A区</tspan>
</text>
<rect id="Rectangle" stroke="#979797" fill="#84FFEF" x="170.5" y="192.5" width="498" height="152"></rect>
<text id="B区" font-family="PingFangSC-Medium, PingFang SC" font-size="18" font-weight="400" fill="#000000">
<tspan x="405" y="275">B区</tspan>
</text>
<rect id="Rectangle" stroke="#979797" fill="#A25AF1" x="738.5" y="183.5" width="108" height="216"></rect>
<text id="C区" font-family="PingFangSC-Medium, PingFang SC" font-size="18" font-weight="400" fill="#000000">
<tspan x="787" y="294">C区</tspan>
</text>
</g>
</svg>

`;

let svgDom = new DOMParser().parseFromString(str, `image/svg+xml`);


DOMParser & SVG_String_02



xgqfrms