在新的 DOM 主体中创建和查询元素

【问题标题】：Creating and querying elements in a new DOM body在新的 DOM 主体中创建和查询元素
【发布时间】：2021-04-21 00:30:35
【问题描述】：

我的打字稿文件中有以下代码：

    let body = document.body;
    // let body = document.body.cloneNode(true);

    body.querySelectorAll('button').forEach(b => {

        b.removeAttribute('click.delegate');
    });

我正在尝试更新和查询 dom 页面的正文以创建一个新的 html 文档，但是当我这样做时，它会更新当前页面以及我正在动态构建的页面。 cloneNode 阻止我使用 querySelectorAll()。有任何想法吗？谢谢你的帮助。

【问题讨论】：

标签： javascript html typescript ecmascript-6 aurelia

【解决方案1】：

您可以使用document.createElement() 以编程方式创建一个新的body 元素，并将活动document.body 的innerHTML 分配给它。

let body = document.createElement('body');
body.innerHTML = document.body.innerHTML;

body.querySelectorAll('div').forEach(d => {
  d.classList.add('red');
  console.log(d)  
});

.red {
  background-color:tomato;
}

<body>
  <div>
    <button type='button'>Button</button>
  </div>
</body>

【讨论】：