Получить профессию в Skypro
Получение всего HTML контента тега <html> через JS/jQuery
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Вкратце пройдемся по основам:
Чтобы извлечь полную разметку <html>:
JavaScript: document.documentElement.outerHTML;
jQuery: $('html')[0].outerHTML;
console.log(document.documentElement.outerHTML); // Это JavaScript в чистом виде
console.log($('html')[0].outerHTML); // А вот и jQuery в работе
Подробное руководство: методы получения и манипулирования элементов HTML
Мы рассмотрим некоторые из способов работы с HTML-элементами, когда важны не только результат, но и сам процесс.
Получение doctype
На самом деле, doctype не очень просто считывать, но в JavaScript есть специальный инструмент для этого:
const doctype = new XMLSerializer().serializeToString(document.doctype);
console.log(doctype); // выводит "<!DOCTYPE html>" или ваш текущий doctype
Получение атрибутов тега <html>
Вы можете извлечь атрибуты тега <html> следующими способами:
JavaScript:
// Element.getAttribute(): это метод, который существует с самого начала
const langAttr = document.documentElement.getAttribute('lang');
console.log(langAttr); // будет выведен 'en' или язык вашего сайтаjQuery:
// .attr() в jQuery: добрый старый подход
const langAttrJQuery = $('html').attr('lang');
console.log(langAttrJQuery); // получим тот же результат, но уже с использованием jQueryИзменение атрибутов тега <html> — сложное дело
Менять атрибуты можно, но учтите возможные последствия:
JavaScript:
// JavaScript поможет сделать все на испанском
document.documentElement.setAttribute('lang', 'es');jQuery:
// jQuery с радостью переведет `<html>` на испанский язык
$('html').attr('lang', 'es');Визуализация
Возьмем для наглядности полный тег <html>:
HTML-тег = **Целый веб-сайт** 🏞️
До: [🌳 <body> Лес </body> 🌳]
Действие: JavaScript делает снимок всего сайта 📸
После: [🖼 <html> 🌳 <body> Лес </body> 🌳 </html>]Чтобы получить полный HTML-документ, используйте document.documentElement.outerHTML:
let htmlContent = document.documentElement.outerHTML; // Загляните под кромку тега – вот и все!Дополнительно: Альтернативные методы и хитрости
У JavaScript есть инструменты для решения всех видов задач, как у многофункционального ножа. Рассмотрим некоторые из них:
Мастерские способы обращения к HTML
JavaScript предлагает целый арсенал методов, чтобы вытащить тег html:
// Получаем тег html. Как будто джин вылез из бутылки
document.getElementsByTagName("html")[0];
document.querySelector("html");
document.body.parentNode; // Или просто попросите у body родителя. Он знаетВопрос скорости: JavaScript против jQuery
Пока JavaScript быстр и подвижен как заяц, jQuery тихий и спокойный как черепаха. Но в программировании заяц обычно выигрывает:
// JavaScript быстро стартует и делает работу
let htmlElement = document.documentElement;
// jQuery передвигается медленнее, но и он в итоге достигает своей цели
let htmlElementJQuery = $('html')[0];Расширение функционала с помощью плагинов
С помощью плагинов jQuery вы можете стать истинным мастером. Знакомы с getAttributes? Он достает все атрибуты элемента:
$('#element').getAttributes(); // Спрашиваем у джина о его возможностях