[Javascript] document.htmlと書きたい

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

document.bodyはページ読み込みイベント発火などでよく使い、document.headはヘッダタグ内に設置されたstylesheetやjavascriptなどの設定に使える。
 

それらの上位階層であるhtmlタグって、普通に考えたらdocument.htmlって書きたいのに、「そんなモノは無い」と怒られる。
 

htmlタグにアクセスしたい人の為のスニペットを用意したので、便利にお使いくだされ。

document.htmlを使う場面

WEBサイトでスクロール座標を取得したい時や座標を任意に設定したい場合(自動スクロールなど)に、通常のブラウザでは、document.bodyをスクロールさせればいいのに対して、GoogleChromeのver60以降では、制限が変わった為、htmlタグをスクロールさせなければいけなくなった。
 

具体的にソースで説明します。
 

 

100ピクセルの位置に自動でスクロールさせたい場合のプログラムですが、一方ではdocument.bodyでアクセスできるものをhtmlタグには、”getElementsByTagName”でアクセスして、0番目の配列を取得するというなんとも気持ち悪い書式になってしまいます。
 

htmlタグの大体Object

上記プログラムで悶々としていたところ、下記のような記述でhtmlタグ要素にアクセスできる事がわかった。
 

document.documentElement : “Object HTMLHtmlElement”
document.scrollingElement : “Object HTMLHtmlElement”
document.body : “Object HTMLBodyElement”

 

上記でHTMLHtmlElementになっている箇所がhtmlタグとして扱われている内容なのですが、実はscrollingElementはスクロール専用のobjectである事に気がつきませんか?
 

そうなんです、scrollTopを設定するのを”document.scrollingElement.scrollTop = 100;”と書いてあげるだけでいいんですね。
 

document.htmlを使う

とりあえず”document.html”をグローバルで用意したい場合はjsの冒頭に書きを書いておきましょう。
 

 

これで気持ちよくhtmlにアクセスできるようになります。
 

ちなみに、documentで簡易アクセスできるものは以下のようにたくさんあるので覚えておくと便利ですよ。
 

 

他にもdocumentについて調査した過去記事も参考にしてみてください。
 

documentから得られる情報
 

これを知らずにjavascriptをwebページで書き込んでいると、非常に効率悪いので、ぜひ活用しましょう!!

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です