Мне нужно найти все теги . На html странице, сами теги все удалить, а содержимое оставить без изменения. Как я понимаю можно найти родителя каждого тега и удалить дочерний тег. Я могу получить массив всех узлов DOM и пройтись по ним в цикле, но как мне в этом случае получить родителя? Или я не в ту степь полез вообще?
1 ответ
document.querySelectorAll('a').forEach( link => {
link.outerHTML = link.innerHTML;
});
<a href="#">123</a>
<div>
<a href="#">456 <span>789</span></a>
</div>
<p>ABC</p>
<p>
<a href="#">DEF<br>XYZ</a>
</p>
Учтите только, что в данном способе смена HTML создаёт новые элементы, а не перемещает старые. Если старые элементы имеют какие-то свойства, установленные через JS, то они будут потеряны. Например div.myProperty = 123;
удалится.
Этого недостатка нет в следующем коде, перемещающим элементы наружу из ссылок:
document.querySelectorAll('a').forEach( link => {
Array.from(link.childNodes).forEach( childNode => link.before(childNode) );
link.remove();
});
<a href="#">123</a>
<div>
<a href="#">456 <span>789</span></a>
</div>
<p>ABC</p>
<p>
<a href="#">DEF<br>XYZ</a>
</p>