Почему в DOM в JavaScript и выводе элементов htmlElement,headElement,bodyElement в консоль они отображаются так?

Question

Почему в DOM в JavaScript и выводе элементов htmlElement,headElement,bodyElement в консоль они отображаются так?

Dezeri android Знаток (293), открыт 5 дней назад

Почему при выводе в консоль элементов htmlElement, headElement и bodyElement всё отображается так странно, и результат отличается от ожидаемого?

Я использую следующий код:

const htmlElement = document.documentElement;
const headElement = document.head;
const bodyElement = document.body;

console.log(htmlElement);
console.log(headElement);
console.log(bodyElement);

При этом, вместо простого текста или понятного отображения, в консоли появляются какие-то странные данные, структура которых мне не ясна.

Answer 1

Ваш код работает правильно. То, что вы видите, — это нормальный интерактивный вывод браузера, позволяющий исследовать DOM. Если вы хотите видеть чистый HTML-код или текст, используйте outerHTML, innerHTML или innerText.
Если есть вопросы - задавайте!

Answer 2

Андрей Панарин Искусственный Интеллект (257933) 5 дней назад

У меня в Опере на страничке этого вопроса не воспроизводится:

Какой у вас браузер?

Dezeri androidЗнаток (293) 3 дня назад

чром, если что все исправил, просто перезагрузил :)

Answer 3

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

Почему не отображается “простой текст”?

DOM — это не текст, а объекты: DOM (объектная модель документа) — это объектное представление HTML-документа. Когда вы получаете htmlElement, headElement или bodyElement с помощью JavaScript, вы получаете не строковое представление HTML, а объекты, представляющие эти элементы.

Объекты имеют структуру: эти объекты содержат не только «текст» (который является содержимым элемента, если таковой имеется), но и множество свойств и методов, описывающих их состояние и поведение.

Свойства (properties): Например, id, className, style, innerHTML и т.д.
Методы (methods): например, addEventListener(), appendChild(), remove(), которые позволяют изменять DOM.
Консоль отображает структуру объекта: когда вы используете console.log() для вывода объекта, консоль браузера старается показать его структуру наиболее информативным способом. Она не просто выводит «текст», а показывает все свойства и их значения.

Что именно мы видим в консоли?

HTML-элемент (<html>): консоль покажет объект, представляющий элемент <html>. Вы увидите его свойства, атрибуты, а также дочерние (вложенные) элементы.
Элемент head (<head>): аналогично, консоль покажет объект head, содержащий множество свойств и, возможно, дочерние элементы (например, <meta>, <title>, <link>, <script>). В вашем примере показаны свойства head.
Элемент Body (<body>): вы также увидите объект body, который содержит всё содержимое вашего HTML-документа, предназначенное для отображения.
Почему столько “aria”-атрибутов?

Вы могли заметить множество свойств, начинающихся с aria-. Это атрибуты ARIA, которые используются для повышения доступности веб-сайтов для людей с ограниченными возможностями. Они предоставляют дополнительную информацию для вспомогательных технологий, таких как программы чтения с экрана. В вашем случае эти атрибуты null не заданы в HTML.

В чём заключается “странная структура”?

Структура объекта, которую вы видите в консоли, является иерархической:

► или ▾ (треугольники): Это означает, что у объекта есть дочерние элементы или вложенные свойства, которые можно развернуть, нажав на треугольник.
Свойства и их значения: вы видите пары «ключ: значение», где ключ — это имя свойства, а значение — его текущее значение.
Как получить “ожидаемый результат”?

Если вы хотите вывести содержимое элемента в виде HTML-кода, вы можете использовать свойство innerHTML:

const htmlElement = document.documentElement;
const headElement = document.head;
const bodyElement = document.body;

console.log(htmlElement.innerHTML);
console.log(headElement.innerHTML);
console.log(bodyElement.innerHTML);
Это выведет в консоль HTML-содержимое этих элементов, что может быть более «понятным» в контексте обычного текста.

В заключение

Консоль браузера предназначена для отладки и просмотра структуры объектов, а не только для вывода текста. Поэтому, когда вы выводите элементы DOM, вы получаете доступ к их объектной структуре, а не просто к их текстовому представлению. Это очень полезно для понимания того, как JavaScript взаимодействует с DOM.

Answer 4

Все корректно, без нейросетевой воды ответ такой:
DOM всегда содержит все существующие ключи, теги, объекты.
Даже если ты значительную часть из них не задействуешь в своей разметке, они просто инициализируются, как null, что позволяет исправно функционировать большинству опций браузеров.