时间戳

首页 > 解决方案 > 如何获取文档片段的内容？

javascript - 如何获取文档片段的内容？

问题描述

我制作了一个小程序来克隆模板并将克隆的模板记录在控制台上。但是使用 chrome，只有第一个 console.log 语句会显示一个可以展开的文档片段对象，所有其他日志看起来像字符串。我没有看到使用 Firefox 的这个问题。所以我想知道这是一个 chrome bug 还是我做的不对？

function clickHandler(event) {
  const insertPoint = document.querySelector('ul');

  let liTemplate = document.querySelector('#row').content.cloneNode(true);
  console.log(liTemplate);

  for (let i = 1; i < 3; i++) {
    liTemplate = document.querySelector('#row').content.cloneNode(true);
    console.log(liTemplate);
    liTemplate.querySelector('li').textContent = `row ${i}`;
    insertPoint.appendChild(liTemplate);
  }

}

document.querySelector("button").addEventListener("click", (event) => clickHandler(event));
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="module" src="demo.js"></script>
  <title>Document</title>
</head>
<body>
  <button>Click Me</button>
  <ul>
  </ul>

  <template id="row">
    <li>...</li>
  </template>  
</body>
</html>

标签： javascript

解决方案

如果您的问题特别是在 Chrome 控制台中登录后无法与记录的片段进行交互，那只是片段为空（您已appendChild在 上使用过li，因此它不再在克隆的模板元素中）。这不是错误，只是 Chrome 和 Firefox 处理记录的文档片段的方式不同。Firefox 在第一行向您显示的是对片段在记录时的样子的描述，但是如果您展开片段，您会看到在展开时它是空的（firstChildis null）。只是控制台显示片段的方式有所不同。

您可能已经知道这一点，但控制台会在记录对象时显示对象的指示，但会在您展开对象时显示对象的状态，更多信息请参见this question的答案。

推荐阅读