Как рекурсивно удалить текстовые узлы?

Question

[Alex_87]

Как рекурсивно удалить текстовые узлы?

Пример:
После выполнения функции, дерево

<span> <div> <b>привет</b> </div> <p>loftchool</p> !!!</span>

должно быть преобразовано в <span><div><b></b></div><p></p></span>

Попытался решить следующим образом, но никак не пойму, почему свойство childNodes ведёт себя так странно, не могу понять, в чём ошибка.

Comments

[WbICHA]

var newArg = el.nextElementSibling;
deleteTextNodesRecursive(newArg);

function deleteTextNodesRecursive(arg){
  var container = document.querySelector(arg);
  ...

И каким образом это должно работать?

[Alex_87]

WbICHA, переменная newArg подставляется в функцию deleteTextNodesRecursive(arg) с новым элементом

[WbICHA]

Alex_87, а дальше?

[Alex_87]

WbICHA, а дальше, функция вновь вызывается но уже с новым элементом. Вы можете объяснить, почему в

for(el of container.childNodes){
			console.log(el);

Элемент el выдаёт кавычки. Как мне увидеть каждый узел span?

Answer 1

[0xD34F]

Во-первых - вы передаёте в функцию строку и используете её в качестве селектора, непонятно, как вы намерены делать это рекурсивно? Пусть функция сразу получает элемент.

Во-вторых - вы обходите childNodes, который представляет собой динамический NodeList и одновременно пытаетесь его модифицировать. Удаляя один элемент, вы пропускаете следующий - т.е., если несколько текстовых элементов идут подряд, то удалён будет только каждый второй; а те нетекстовые элементы, которые расположены после текстовых, тут никакой рекурсии не случится, их содержимое вообще никак не будет обработано. Надо делать копию childNodes, и перебирать её. Или вместо for-of использовать цикл со счётчиком, при удалении элемента счётчик увеличиваться не должен.

В-третьих - какой-то бред с nextElementSibling, не знаю, как это комментировать. Надо было просто вызвать функцию, передав ей текущий элемент.

В четвёртых.

const deleteTextNodes = el =>
  el.nodeType === 3
    ? el.remove()
    : [...el.childNodes].forEach(deleteTextNodes);

Comments

[Alex_87]

Переписал код с учётом вашего комментария, но не всё, поскольку я не совсем понял, почему цикл не увеличиваем. Что тогда с ним делать? ...И не работает почему-то функция removeChild

var container = document.querySelector('span');

	function deleteTextNodesRecursive(arg){
		var children = arg.childNodes;
		for(var i = 0; i < children.length; ++i){
			if(children[i].nodeType == 3){
                children.removeChild(children[i]);
			}else if(children[i].nodeType == 1){
               if(children[i].hasChildNodes()){
				var newArg = children[i];
				deleteTextNodesRecursive(newArg);
			  }
			}
		   }		
		  return children;			
		}

	console.log(deleteTextNodesRecursive(container));

[0xD34F]

Alex_87,

не совсем понял

Ну, помедитируйте над кодом, подумайте, почему результат получается такой, какой получается:

const arr = [1,2,3,4,5,6,7,8,9,10];

for (let i = 0; i < arr.length; i++) {
  if (arr[i] <= 8) {
    arr.splice(i, 1);
  }
}

console.log(arr);

не работает почему-то функция removeChild

Посмотрите внимательнее, у кого вы пытаетесь этот метод вызывать. Правильно будет arg.removeChild(children[i--]);.

[Alex_87]

0xD34F, объясните пожалуйста, почему с минусом работает, а без него нет)))? Что это за "children[i--]"?

И ещё, возвращать нужно не children, а container!

[0xD34F]

Alex_87, возвращать ничего не нужно.

Объяснять не буду, думайте сами - здесь всё просто.

Answer 2

[syntaxorange]

Начинать обход дерева `DOM` следует с корневого элемента. В нашем случае рутовым элементов является `body`.
Рекомендация - лучше стараться максимально упрощать требования, чтобы легче получалось обдумывать создаваемый алгоритм.

Начните с простой разметки, а затем добавляйте дополнительные, вложенные элементы.
<span>text1</span><span>text2</span>

Следует сформулировать два вопроса.

1. Как лучше удалять текстовый узел?
2. Как избежать бесконечного вызова рекурсии?

Алгоритм:

1. Вызывая функцию, стартуем обход дерева с элемента `body`. Передаём элемент при первом вызове.
2. Получаем коллекцию дочерних сущностей переданного элемента.
3. Фильтруем сущности с типом `ELEMENT_NODE`, кроме элемента с именем `SCRIPT`.
4. Удаляем сущности с типом `TEXT_NODE` в отдельной итерации или предыдущей итерации. Используем для этого метод `remove` прямо на узле (ответ на первый вопрос).
5. Итерируем только по найденным элементам (ответ на второй вопрос). Вызываем рекурсивно функцию, передавая найденный элемент. Если во вложенном элементе будут найдены только текстовые узлы, повторного вызова функцию не случится для текущей глубины. Но программа возвратится к предыдущей итерации и продолжит рекурсивный вызов со следующими элементами.

UPD. Раз уже есть примеры реализации, добавлю код.

function deleteTextNodesRecursive(element) {
  const childNodes = element.childNodes;
  
  var elements = [...childNodes].filter((val) => {
    if (val.nodeType === 3) {
      val.remove();
    }
    
    return val.nodeType === 1 && val.nodeName.toLowerCase() !== 'script';
  });
  
  if (elements.length) {
    elements.forEach((el) => {
      return deleteTextNodesRecursive(el);
    });
  }
  
  return document.body;
}
console.log(deleteTextNodesRecursive(document.body));

Comments

[Alex_87]

Посмотрите пожалуйста этот код. По заданию, обход нужно начат со span, поэтому делаю, как указано.
Ошибка: Uncaught TypeError: children.removeChild is not a function

var container = document.querySelector('span');

  function deleteTextNodesRecursive(arg){
    var children = arg.childNodes;
    for(var i = 0; i < children.length; ++i){
      if(children[i].nodeType == 3){
                children.removeChild(children[i]);
      }else if(children[i].nodeType == 1){
               if(children[i].hasChildNodes()){
        var newArg = children[i];
        deleteTextNodesRecursive(newArg);
        }
      }
       }		
      return children;			
    }

  console.log(deleteTextNodesRecursive(container));

Разметка такая же как и в задании:

<span> <div> <b>привет</b> </div> <p>loftchool</p> !!!</span>

P.S. Предыдущее задание было без глубины и без рекурсии соответственно. Его я выполнил без проблем:

function deleteTextNodes(where) {
		var box = document.querySelector(where);
		for(el of box.childNodes){
			if(el.nodeType == 3){
				box.removeChild(el);
			}
			
		}
		return box;
}

console.log(deleteTextNodes('.container'));

<div class="container">
	<div></div>
	<p></p>
    <a></a>
    <span></span>
    <p></p>
</div>

[syntaxorange]

Передавайте в функцию из моего примера нужный элемент `span`.

[Alex_87]

syntaxorange, решение задачи следующее:

var container = document.querySelector('span');

	function deleteTextNodesRecursive(arg){
		var children = arg.childNodes;
		for(var i = 0; i < children.length; i++){
			if(children[i].nodeType == 3){
                arg.removeChild(children[i--]);
			}else if(children[i].nodeType == 1){
               if(children[i].hasChildNodes()){
				var newArg = children[i];
				deleteTextNodesRecursive(newArg);
			  }
			}
		   }
	
		return container;
			
		}
	
	console.log(deleteTextNodesRecursive(container));

Только не понятно в этой строчке "arg.removeChild(children[i--]);" это children[i--]. Зачем нужен минус "--"?
Мне просто здесь подсказали подправить код, я подправил и заработало! Но не понятен этот момент!