JavaScript | Как удалить детей HTML-элемента? — efim360.ru

JavaScript | Как удалить детей HTML-элемента?

У нас есть HTML-элемент, который является заголовком H1. У этого заголовка есть одна маленькая проблема. Заголовок H1 не использует CSS-свойства по автоматическому переносу строк и вместо этого разработчики запихнули в него элементы BR.

В результате, когда мы пытаемся обратиться к свойству textContent, тогда мы получаем строку со слипшимися словами.

Заголовок H1 содержит элементы BR в HTML-разметке - Свойство textContent склеивает из-за этого слова
Заголовок H1 содержит элементы BR в HTML-разметке - Свойство textContent склеивает из-за этого слова

Чтобы решить эту проблему, можно удалить эти элементы BR и заменить их на обычные пробелы, тогда строка будет корректной.

 

Как удалить детей BR у HTML-элемента H1?

Для начала по селектору получаем нужный нам объект заголовка h1. В нашем случае селектор такой:

document.querySelector("#start > header > div > h1")

Детей можно получить по списку:

// В виде коллекции

document.querySelector("#start > header > div > h1").children

// В виде массива

[...document.querySelector("#start > header > div > h1").children]

Зная массив детей, можно прогнать его через метод remove():

[...document.querySelector("#start > header > div > h1").children].map(i=>i.remove())

После этого строка визуально становится слипшейся:

Удалили детей HTML-элемента H1 через метод remove() из DOM - JavaScript
Удалили детей HTML-элемента H1 через метод remove() из DOM - JavaScript

 

Как заменить детей HTML-элемента H1, которые являются BR, на пробелы?

Чтобы заменить элементы BR на пробелы, нужно произвести несколько манипуляций.

Самая первая манипуляция очень хитрая. Мы сделаем для всех элементов BR значение textContent равным одному пробелу. Это звучит немного бредово, потому что элемент BR не парный и представляет из себя только перенос строки, но тем не менее он может иметь любое значение в своём свойстве textContent. Стандарт DOM нас в этом не ограничивает.

[...document.querySelector("#start > header > div > h1").children].map(i=>i.textContent=' ')

После этого элементы останутся на своих местах, но для заголовка H1 свойство textContent вернёт уже новые результаты:

Добавили по одному пробелу в каждый элемент BR в свойство textContent - JavaScript
Добавили по одному пробелу в каждый элемент BR в свойство textContent - JavaScript

Этот алгоритм можно добавить в работу какой-нибудь функции или метода для обработки результатов. Например, данный способ решает проблему при работе с библиотекой JSDOM на NodeJS.