gpt4 book ai didi

javascript - DOMParser().parseFromString() 值得使用吗?

转载 作者:行者123 更新时间:2023-12-03 19:28:47 31 4
gpt4 key购买 nike

https://developer.mozilla.org/en-US/docs/Web/API/DOMParser#DOMParser_HTML_extension

看起来 DOMParser 使用 innerHTML 将字符串化元素添加到 DOM。使用它有什么好处?

我在下面比较了使用 DOMParser().parseFromString() 和使用 element.innerHTML 之间的区别。我忽略了什么吗?

使用 DOMParser

const main = document.querySelector('main');


const newNodeString = '<body><h2>I made it on the page</h2><p>What should I do now?</p><select name="whichAdventure"><option>Chill for a sec.</option><option>Explore all that this page has to offer...</option><option>Run while you still can!</option></select><p>Thanks for your advice!</p></body>';

// Works as expected
let newNode = new DOMParser().parseFromString(newNodeString, 'text/html');
let div = document.createElement('div');

console.log('%cArray.from: ', 'border-bottom: 1px solid yellow;font-weight:1000;');
Array.from(newNode.body.children).forEach((node, index, array) => {
div.appendChild(node);
console.log('length:', array.length, 'index: ', index, 'node: ', node);
})
main.appendChild(div);

使用 innerHTML
const main = document.querySelector('main');


const newNodeString = '<h2>I made it on the page</h2><p>What should I do now?</p><select name="whichAdventure"><option>Chill for a sec.</option><option>Explore all that this page has to offer...</option><option>Run while you still can!</option></select><p>Thanks for your advice!</p>';

// Works as expected
let div = document.createElement('div');
div.innerHTML = newNodeString;

main.appendChild(div);

我希望 DOMParser().parseFromString() 提供一些我不知道的附加功能。

最佳答案

好吧,一方面,DOMParser可以parse XML files .它还验证 XML 格式是否正确,如果格式不正确,则会产生有意义的错误。更重要的是,它正在为正确的工作使用正确的工具。

我过去使用它来获取上传的 XML 文件并使用预定义的 XSLT 样式表生成 HTML,而无需涉及服务器。

显然,如果您所做的只是将字符串附加到现有的 DOM,并且 innerHTML (或 outerHTML )适合您,继续使用它。

关于javascript - DOMParser().parseFromString() 值得使用吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56318353/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com