JavaScript свойство Document.body

Определение и применение

JavaScript свойство body объекта Document представляет ссылку на узел <body> или <frameset> текущего документа, или null, если такой элемент не существует. Элемент <frameset> устарел и сохраняется в браузерах для совместимости.

Поддержка браузерами

Спецификация: multipage

Поддерживается во всех основных браузерах с 2018 года.

ВсеКомпьютерыМобильные

Совместимостьapi.Document.body
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`body`	✓1	✓12	✓60	✓9.6	✓1	✓18	✓60	✓10.1	✓1	✓1.0	✓4.4	✓1

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

JavaScript синтаксис

JavaScript

// получение содержимого элемента
const objRef = document.body;

// установка содержимого элемента
document.body = objRef;

Спецификация

Пример использования

Добавление узла в тело документа

Нажмите ▶, затем кнопку в результате: комментарий не отображается на странице, но в консоли появятся имя добавленного узла #comment и его текст.

index.html

HTML

<button data-example-event-0="">Нажми меня</button>
<!-- добавляем атрибут событий onclick -->

main.js

JavaScript

function myFunc() {
    const comment = document.createComment("Hello! I'm a hidden secret comment.") // создаем узел комментария
    document.body.appendChild(comment) // добавляем узел комментария в качестве последнего дочернего узла элемента <body>
    console.log(document.body.lastChild.nodeName, document.body.lastChild.data) // комментарий не виден на странице
}

document.querySelector('[data-example-event-0]').addEventListener('click', function (event) {
    myFunc()
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием метода addEventListener() при нажатии на кнопку (HTML элемент <button>) вызываем функцию myFunc(), которая с использованием JavaScript метода createComment() создает и возвращает новый узел комментария. Далее с помощью метода appendChild() добавляем узел комментария в качестве последнего дочернего узла элемента <body>.

Замена body сохраняет прежний узел

Измените старый и новый текст. После замены прежний body отсоединён, но его дочерний узел остаётся доступен.

index.html

HTML

<pre id="result"></pre>

main.js

JavaScript

// Отдельный документ позволяет наблюдать замену, сохранив страницу примера.
const doc = document.implementation.createHTMLDocument('Проверка')
const oldBody = doc.body
oldBody.textContent = 'Старый текст'
const nextBody = doc.createElement('body')
nextBody.textContent = 'Новый текст'
doc.body = nextBody
document.querySelector('#result').textContent = [
    'Текущее тело: ' + doc.body.textContent,
    'Прежнее тело: ' + oldBody.textContent,
    'Прежнее тело без родителя: ' + (oldBody.parentNode === null),
    'Дочерний текст сохранился: ' + (oldBody.firstChild !== null),
].join('\n')