У нас есть HTML-элемент, который является заголовком H1. У этого заголовка есть одна маленькая проблема. Заголовок H1 не использует CSS-свойства по автоматическому переносу строк и вместо этого разработчики запихнули в него элементы BR.
В результате, когда мы пытаемся обратиться к свойству 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, которые являются BR, на пробелы?
Чтобы заменить элементы BR на пробелы, нужно произвести несколько манипуляций.
Самая первая манипуляция очень хитрая. Мы сделаем для всех элементов BR значение textContent равным одному пробелу. Это звучит немного бредово, потому что элемент BR не парный и представляет из себя только перенос строки, но тем не менее он может иметь любое значение в своём свойстве textContent. Стандарт DOM нас в этом не ограничивает.
[...document.querySelector("#start > header > div > h1").children].map(i=>i.textContent=' ')
После этого элементы останутся на своих местах, но для заголовка H1 свойство textContent вернёт уже новые результаты:
Этот алгоритм можно добавить в работу какой-нибудь функции или метода для обработки результатов. Например, данный способ решает проблему при работе с библиотекой JSDOM на NodeJS.
