JavaScript / jQueryで<html>タグHTMLを取得する方法は?


161

使用して$('html').html()、私は内のHTMLを取得することができます<html>(タグ<head><body>など、)。しかし、どうすれば<html>タグの実際のHTML (属性付き)を取得できますか?

または、<html>jQuery(または古いJavaScript)を使用して、ページのHTML全体(doctype など)を取得することはできますか?

回答:


305

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要素への参照を取得していますか?一般的に、パフォーマンスは気にする必要はないと思います。とにかく、これは実際にはより良い答えですが、それは賞の後にWAYで来ました。
ポジティブラボ、2015

42

これは、JSで純粋にHTML DOM要素を取得する方法です。

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

または

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

そして、jQueryを使用してそこから属性を取得したい場合...

$(htmlElement).attr(INSERT-ATTRIBUTE-NAME);

これが質問に答えた理由を説明できれば、答えはかなり良くなります。また、コードをハイライト表示して{}ボタンをクリックするか、Ctrl + Kキーを押してコードとしてマークアップしてください。
Ben

18

他のいくつかの回答に加えて、次の方法でHTML要素にアクセスすることもできます。

var htmlEl = document.body.parentNode;

次に、内部のHTMLコンテンツを取得できます。

var inner = htmlEl.innerHTML;

この方法を使用すると、わずかに高速になるようです。あなただけのHTML要素を取得している場合は、しかし、document.body.parentNodeであるように思わかなり速いです

HTML要素を取得したら、getAttributeおよびsetAttributeメソッドを使用して、属性を変更できます。

DOCTYPEには、この質問でdocument.doctype詳しく説明したを使用できます。


4
ちょうどメモとして:ボディがドキュメントでまだ利用できない場合、これは失敗します。
DataDink 2014年

3
その場合、document.head.parentNodehead要素があれば引き続き機能します。
mahemoff、2014年

15

jQueryの場合:

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

プレーンJavascriptの場合:

var html_string = document.documentElement.outerHTML

4

jQueryを使用してHTML要素の属性を取得する場合は、 .attr();

そう$('html').attr('someAttribute');あなたの価値与えるsomeAttribute要素のをhtml

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

さらに:

ここにjQueryプラグインがあります:http : //plugins.jquery.com/project/getAttributes

HTML要素からすべての属性を取得できます


1
getAttributes()プロジェクトは少し古くなっています(2009年2月)。
gligoran 2010年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.