DOM как получить доступ к ноде текста элемента без текста потомков?

Question

Я делаю скрипт который выполняет функциональность вроде переводчика, т.е. он должен весть текст заменить своим, но сохранить форматирование. Есть поле у узлов innerText, но он получает и текст потомков что не нужно, и уничтожает потомков при замене если в них не было текста. Можно ли как то получить доступ только к ноде текста некой ноды документа html?

Answer 1

У любого узла есть свойство 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>

БЛОГ НА HUSL

DOM как получить доступ к ноде текста элемента без текста потомков?

Ответы (1 шт):