主页 / 问题 / 1174804
Accepted
Gleb
Asked:2020-09-06 17:00:19 +0000 UTC2020-09-06 17:00:19 +0000 UTC

DOM如何访问没有子文本的元素的文本节点？

  • 772

我正在制作一个具有翻译功能的脚本，即。他应该用自己的文本替换文本，但保留格式。innerText 节点有一个字段，但它也接收不需要的后代的文本，如果后代中没有文本，则在替换时销毁后代。是否可以以某种方式仅访问 html 文档的某个节点的文本节点？

javascript

1 个回答

  1. Best Answer

    每个节点都有一个nodeType指示其类型的属性。特别是，对于等于 的文本节点3，您可以获取 childNodes 并通过 过滤它们nodeType == 3。并且代码中没有幻数3，可以使用内置常量Node.TEXT_NODE

    let textNodes = findTextNodes( document.querySelector("div") );

console.log( textNodes.map(node => node.textContent) );

textNodes.forEach(node => node.textContent = "moo");

/***/
function findTextNodes(elem) {
  return [...elem.childNodes].filter(node => node.nodeType == Node.TEXT_NODE);
  // childNodes - не массив, у него нет метда filter.
  // Можно любым способом превратить его в обычный массив и потом вызвать filter.
  // [...elems] → "spread operator"
}

/***/
function findTextNodes_old(elem) {
  // filter берется из обычного [] массива и вызывается в контексте elem.childNodes
  return [].filter.call(elem.childNodes, function(node) {
    return node.nodeType == Node.TEXT_NODE;
  });
}
    span { color: red; }
    <div>
  1111
  <span>2222</span>
  3333
  <span>4444</span>
  5555
</div>

    • 1

相关问题