JavaScript手动解析Document、字符串标签与document之间相互转换、DOMParser、parseFromString、textContent

---

代码

const str = `<div class="d_f fd_c ai_c">
<div class="w_268 d_f jc_sb ai_c">
    <div id="idRed" class="w_68 h_68 radius_50_ bc_rgba_68_68_86_05">这是什么嘛</div>
    <div id="idYellow" class="w_68 h_68 radius_50_ bc_rgba_68_68_86_05">根本就不好玩</div>
    <div id="idGreen" class="w_68 h_68 radius_50_ bc_rgba_68_68_86_05">我要回家</div>
</div>

<div id="idTime" class="mt_10 fs_30 fw_700">0</div>

<div class="mt_10 w_168 d_f jc_sb">
    <button class="c_p" οnclick="handleStart()">开始</button>
    <button class="c_p" οnclick="handleCease()">停止</button>
</div>
</div>`;

// 获取标签字符串内容
function removeTag(fragment) {
    let content = new DOMParser();

    content = content.parseFromString(fragment, 'text/html');
    content = content.body.textContent || '';

    return content;
}

// 标签字符串转为document
function createDoc(str) {
    let doc = new DOMParser();

    doc = doc.parseFromString(str, 'text/html');

    return doc;
}

console.log(removeTag(str));
// 这是什么嘛
//     根本就不好玩
//     我要回家
// 0
//     开始
//     停止
console.log(createDoc(str));
// #document

---

textContent

MDN

Node接口的textContent属性表示一个节点及其后代的文本内容。
备注：textContent和HTMLElement.innerText容易混淆，但这两个属性在重要方面有不同之处。
let text = someNode.textContent;
someOtherNode.textContent = string;

---

w3shool

textContent属性设置或返回指定节点的文本内容，以及它的所有后代。
如果您设置了textContent属性，会删除所有子节点，并被替换为包含给定字符串的一个单独的文本节点。
提示：有时，此属性可用于取代nodeValue属性，但是请记住此属性同时会返回所有子节点的文本。

---

parseFromString

待定…

---

DOMParser

MDN

DOMParser可以将存储在字符串中的XML或HTML源代码解析为一个DOM Document。
备注：XMLHttpRequest支持从URL可寻址资源解析XML和HTML，在其response属性中返回Document。
你可以使用XMLSerializer接口执行相反的操作-将DOM树转换为XML或HTML源。
对于HTML文档，你还可以通过设置Element.innerHTML和outerHTML属性的值，将部分DOM替换为从HTML构建的新DOM树。还可以读取这些属性以获取对应于相应DOM子树的HTML片段。
let domparser = new DOMParser();