Как собрать весь внутренний content: «»?

Question

[serega danet]

Цель: собрать все внутреннее содержимое текстовое
Было

<div> text  text
        <div> text </div>
</div>

Стало
div:before {content: "text "; }

<div>
    <div></div>
</div>

Для внешнего получаем его content. Как получить "text text" во внешнем div.
Content="" я сам придумал . Может, есть другое решение ?
В начале был просто текст , без Content="" .
Или еще проще , но полезнее: как собрать весь отображаемый текст из внутренних div ?
Примерный пример : OtherStyles

Comments

[Aetae]

Нифига не понятно, чего ты хочешь. Какие-то разрозненные куски разметки.

[serega danet]

Aetae, согласен , немного бессмысленный вопрос в этом виде. Я его упростил максимально. Пример лучше не смотреть -- там точно не проще .
Интересует способ во внешнем диве собрать все контенты внутренних дивов. В реальном проете , конечно, они не будут одинаковые.

[Сергей delphinpro]

serega danet, https://developer.mozilla.org/ru/docs/Web/API/Node...

document.getElementById('mydiv').textContent

[serega danet]

Сергей delphinpro, я про textContent из JS , конечно, не слышал. И про JS , с трудом. Значит , тут нужен цикл, и собирать все вручную. Кода на полстраницы ✍️.
Через JS кратко не бывает.
В вопросе все упрощено до предела, ради простой реализации. Даже с учетом того, что в реальном проекте такое вряд ли встретится.
Значит, собрать все одинаковые Content=" ", или текстовое содержимое , из одинаковых div одного класса, одной командой возможности нет.
Это тоже ответ

[Сергей delphinpro]

serega danet, а ссылку прочитать не ага?

textContent элемента содержит весь текстовый контент, включая потомков.

[serega danet]

Сергей delphinpro, читал я, там 2 варианта, Эплов свой, у Андроидов свой. Вроде так :). Про общий текст всех
внутренностей детей там нет.

[Сергей delphinpro]

serega danet, я удивляюсь. неужели правда не видно на первом же экране

Для узлов других типов textContent возвращает конкатенацию свойств textContent всех дочерних узлов, исключая комментарии и строки кода. Если узел не имеет дочерних узлов, будет возвращена пустая строка.

[Сергей delphinpro]

Там даже пример есть

// Дан следующий фрагмент:
//   <div id="block">Это — <span>просто</span> текст</div>

// Достаём текстовое содержимое:
var text = document.getElementById("block").textContent;
// В переменной |text| находится: "Это — просто текст".

[serega danet]

Сергей delphinpro, Убила "конкатенация". Они приглашают переводчиков, я наверное, отзовусь.

пример понятен. Передавать из JS в CSS раз плюнуть, легко и непринуждённо, я такое уже проходил. Надо протестировать.

[serega danet]

Сергей delphinpro, если смотреть 3-позиционный список после "Internet Explorer ", особенно его 1 и 3 пункты, то можно сразу отправлять на повышение описателей, главное повыше. Я проверю и сам напишу Инструкцию в эту Mozillu

[serega danet]

Сергей delphinpro, ожидаемо метод .textContent ничего не собирает внутри. Странная была бы у него эта способность. Он ставит текстовое содержание. Этого вполне достаточно для стандартного метода.

Я тут собрали из кусов. Но видно такого цикла недостаточно. Надо его чуть дожать .

var text_add = "внешний"; 
const extraEl = document.querySelectorAll(".extra");
for (let i = 0; i < extraEl.length; i++) {
	let text_cur = extraEl[i].textContent;
    extraEl[i].textContent =  text_add + " " + text_cur; }

<div class="extra">
	<div class="extra">
		<div></div>
	</div>
</div>

Тут есть и чтение содержимого div, и запись. Для Хабра надо оба способа знать.
Все тот же .textContent;.

Как получить во внешних квадратах типо такого:

внешний внешний
... внешний
... .....

ссылка та же в вопросе.

[serega danet]

не знаю чего так. Ссылка сдохла. Это известный гугловский и MS хостинг. С редким удобным досутпом по webdav, т.е. мимо FTP .
От прекрасно работал лет 7, наверное. Сейчас глючит ,но строго по выходным :). В понедельник опять включат, не в 1 раз.
Оплату на электроэнергию экономят. SkyNet собирается захватить планету, а на бирже заработать не может.

[Сергей delphinpro]

serega danet, что-то я вас совсем не понимаю, видимо.

[serega danet]

Сергей delphinpro, у вас работает. Все примеры в инете только с циклами ))
Да, именно это я и спрашивал.
Хороший пример. Это решение вопроса.

[serega danet]

тогда надо почистить комменты от циклов, они все равно не работают.

[Сергей delphinpro]

serega danet, я вам три дня назад точно такой же пример показывал выше (точнее скопировал из документации, ссылку на которую тоже давал), в чем ваша проблема? =)

[serega danet]

Сергей delphinpro, проблема в том, что к моем HTML не работает.

[serega danet]

Сергей delphinpro, хорошо, полезно свойство которое собирает все внутренности.
Но если более простая задача, без сборки внутренностей. Как достать только внешний текст "outer text node" ?

[Сергей delphinpro]

serega danet, https://learn.javascript.ru/dom-navigation
(Полезно будет весь учебник изучить)

[serega danet]

я пока лазил по интеу, смотрел примеры -- все решения только с одним элементом . Я решил, что вы ошиблись :) И судя по названию , .textContent -- просто добавляет содержимое в див. Это разумно, зачем лишнее. Оказывается, он еще и собирает внутренности ! Даже мне это кажется лишним.

[serega danet]

Зачем мне про детей и родителей ?
что в этом DOMе нет даже .textContent

[serega danet]

Сергей delphinpro, Сергей, у вас в примере все-таки 1 строка, для одного div id="out">/div>

Но как применить к нескольким div одного класса ?
Я насобирал примеров , 2 штуки. С for () и .forEach(el => . Ни один не работает.
Например, этот . Он сверху в вопросе.

const Els = document.querySelectorAll('.extra');
Els.forEach(el => {
	el.textContent = 'внешний' + " " + el.textContent } );

Непонятно, почему . textContent убивает внутренне содержимое и внутренние div.

[Сергей delphinpro]

serega danet, Изучите этот учебник, если хотите писать на javascript.

Зачем мне про детей и родителей ?
что в этом DOMе нет даже .textContent

Затем что весь DOM состоит из дерева нод. Ноды могут быть элементом, текстом или комментарием. Вы выше спрашивали, как взять только текст, без вложенных элементов. Вот и научитесь доставать и читать текстовые ноды.

[serega danet]

Сергей delphinpro, я не знаю, почему в меня такая сложная задача, прямо не решаемая в JS. Если div одинаковые, то все примеры сводится либо к циклу for , либо forEach. Что мне тут изобрести нового, чего нет еще в истории JS.

[serega danet]

У меня там чтение и сразу запись в всю эту лестницу из div. Даже это неправильно. По идее, там будет многократное дублирование . Но . textContent вообще ничего не пишет, только 1 результат. Не пойму, называется text, но читает еще и стили ?
Объяснения на Мозилле — это жесть переводная. "Один этого не делает, а другой этого не делает"
Двойная отрицательная логика в источниках, а потом они курсы открывают .

[serega danet]

Сергей delphinpro, у меня ни одной мысли , с чего начинать. Учиться надо на примерах. Уже проще примера трудно придумать.