Как получить тег <html> HTML с помощью JavaScript / jQuery?

161

Используя $('html').html()я могу получить HTML внутри <html>тега ( <head>, <body>и т. Д.). Но как я могу получить фактический HTML- <html>код тега (с атрибутами)?

В качестве альтернативы, возможно ли получить весь HTML-код страницы (включая тип документа <html>и т. Д.) С помощью jQuery (или простого старого JavaScript)?

javascript jquery Джастин Стейтон
источник

Ответы:

306

Самый простой способ получить htmlэлемент изначально:

document.documentElement

Вот ссылка: https://developer.mozilla.org/en-US/docs/Web/API/Document.documentElement .

ОБНОВЛЕНИЕ: чтобы затем захватить htmlэлемент как строку, вы должны сделать:

document.documentElement.outerHTML
Майкл
источник
1
См. Также этот вопрос для получения дополнительной информации о documentElementсовместимости браузера: stackoverflow.com/q/11391827/177710 .
Оливер
Как часто вы получаете ссылку на элемент HTML !? Я не думаю, что производительность должна быть проблемой, как правило. Во всяком случае, это на самом деле лучший ответ, но он пришел в путь после награды.
Позит лаборатории
42

Вот как получить HTML-элемент DOM исключительно с помощью JS:

var htmlElement = document.getElementsByTagName("html")[0];

или

var htmlElement = document.querySelector("html");

И если вы хотите использовать jQuery для получения атрибутов из него ...

$(htmlElement).attr(INSERT-ATTRIBUTE-NAME);
Posit Labs
источник
Ваш ответ был бы значительно лучше, если бы вы могли объяснить, почему это ответило на вопрос. Также выделите код и нажмите {}кнопку или нажмите Ctrl + K, чтобы пометить его как код.
Бен
18

В дополнение к некоторым другим ответам, вы также можете получить доступ к элементу HTML через:

var htmlEl = document.body.parentNode;

Тогда вы можете получить внутренний контент HTML:

var inner = htmlEl.innerHTML;

Делать так, кажется, немного быстрее . Однако, если вы только получаете элемент HTML, это document.body.parentNodeвыглядит немного быстрее .

После того, как у вас есть HTML элемент, вы можете испортить с атрибутами с getAttributeи setAttributeметодами.

Для DOCTYPE, вы можете использовать document.doctype, который был разработан в этом вопросе .

doubleswirve
источник
4
Просто как примечание: это не удастся, если тело еще не доступно в документе.
DataDink
3
В этом случае document.head.parentNodeвсе равно будет работать, если есть элемент head.
mahemoff
15

В jQuery:

var html_string = $('html').outerHTML()

В простом Javascript:

var html_string = document.documentElement.outerHTML
berkeleybross
источник
4

если вы хотите получить атрибут элемента HTML с помощью jQuery, вы можете использовать .attr();

так $('html').attr('someAttribute');даст вам значение someAttributeэлементаhtml

http://api.jquery.com/attr/

Дополнительно:

здесь есть плагин jQuery: http://plugins.jquery.com/project/getAttributes

что позволяет получить все атрибуты из элемента HTML

jordanstephens
источник
1
Проект getAttributes () сейчас немного стар (февраль 2009 г.).
глигоран