Для чего используется .contents() в jQuery?

Находит потомков каждого элемента исходного набора jQuery (включая текстовые узлы).

.contents() в jQuery

Категории: Traversing › Miscellaneous Traversing

Находит потомков каждого элемента исходного набора jQuery (включая текстовые узлы).

Добавлено в jQuery 1.2.contents( )
Метод .contents() возвращает новый набор jQuery, состоящий из всех дочерних узлов каждого элемента исходного набора — в отличие от .children(), который берёт только дочерние элементы, .contents() включает ещё и текстовые узлы, и узлы-комментарии.
Для элементов <iframe> с тем же источником (same-origin) .contents() возвращает document содержимого фрейма — это позволяет дальше искать и изменять его внутренний DOM обычными методами jQuery.
Начиная с jQuery 3.2, .contents() умеет заходить и внутрь элемента <template>: возвращает узлы из его содержимого (content, DocumentFragment), а не пустой набор, как раньше.

Возвращаемое значение: (объект) Набор jQuery из дочерних узлов — элементов, текстовых узлов и комментариев.

Примечание:
Большинство методов jQuery не рассчитаны на работу с текстовыми узлами и комментариями — пользуйтесь .contents() аккуратно, обычно вместе с проверкой this.nodeType.
Примечание:
Обращение к .contents() кросс-доменного <iframe> вызовет ошибку доступа браузера из-за политики Same-Origin — сработает только для фреймов с того же источника, что и страница.
В jQuery 3.x и 4.0:
Метод не менялся, доступен в jQuery 3.7.1 и 4.0, включая поддержку <template> (с версии 3.2). Прямого однострочного нативного аналога нет: для узлов элемента используют node.childNodes (включает текст и комментарии), для содержимого iframe — iframe.contentDocument, для <template> — templateEl.content.childNodes.

Обернуть текстовые узлы параграфа, отфильтровав их по типу узла.

$('p.mixed').contents().filter(function() {
  return this.nodeType === 3; // только текстовые узлы
}).wrap('<span class="text-node"></span>');

Работа с содержимым iframe того же источника.
```
$('#preview-frame').contents().find('body').css('background', '#fff');
```
Получить содержимое <template> и вставить его копию в таблицу (jQuery 3.2+).
```
$('#row-template').contents().clone().appendTo('#table-body');
```