Question

我目前有以下代码：

  function wrapTextNodeInWordTags(textNode) {
  if (
    textNode.nodeName !== "#text" ||
    textNode.parentNode.nodeName === "SCRIPT" ||
    textNode.parentNode.nodeName === "STYLE" ||
    textNode.parentNode.nodeName === "IFRAME"
  ) {
    return;
  }
  let origText = textNode.textContent; --> the issue
  let newHtml = wrapWords(origText);

  if (newHtml !== origText) {
    let newSpan = document.createElement("span");
    newSpan.innerHTML = newHtml;
    textNode.parentNode.replaceChild(newSpan, textNode);
  }
}

function wrapDOM() {
  let all = document.querySelectorAll("*");
  let textNodes = [];
  for (let p of all) {
    let nodeIter = document.createNodeIterator(p, NodeFilter.SHOW_TEXT);
    let currentNode;

    while ((currentNode = nodeIter.nextNode())) {
      textNodes.push(currentNode);
    }
  }

  textNodes.forEach(function(el) {
    if (el.parentNode !== null) wrapTextNodeInWordTags(el);
  });

  iterWordTags();
}

它包装页面上的所有单词并以正确的方式执行...但textNode.textContent将从页面中提取所有文本，包括隐藏在模态或其他单页奇迹中的文本。如果我将其替换为innerText，这完全符合我的要求（请参阅：MDN与innerText不同）但是，该节点将返回一大堆undefined，有时是{{} 1}} 对于这些节点，我有点困惑。这不起作用的原因是什么？做-工作得很好，这也是一个节点，不是吗？我错过了什么吗？

编辑1：我制作了一个jsfiddle来说明在一个带有innerText和textContent的简单网站上会发生什么

https://jsfiddle.net/7jweed7y/6/

body.innerText

function wrapTextNodeInWordTags(textNode) {

  document.getElementById('innerText-result').innerText += textNode.innerText;
  document.getElementById('textContent-result').innerText += textNode.textContent;
}

//Pick up all the tags on a page, seek their deepest node and perform the wrapping so that the text has elements to navigate to.
function wrapDOM() {
  let all = document.querySelectorAll("*");
  let textNodes = [];
  for (let p of all) {
    let nodeIter = document.createNodeIterator(p, NodeFilter.SHOW_TEXT);
    let currentNode;

    while ((currentNode = nodeIter.nextNode())) {
      textNodes.push(currentNode);
    }
  }

  textNodes.forEach(function(el) {
    if (el.parentNode !== null) wrapTextNodeInWordTags(el);
  });
}

document.getElementById('wrapDOM').addEventListener( 'click', function () {
wrapDOM();
});

textContent在节点上工作，但innerText不工作？

0 个答案: