[Javascript] document.htmlと書きたい

2018年8月6日

HTML Javascript テクノロジー プログラミング

document.bodyはページ読み込みイベント発火などでよく使い、document.headはヘッダタグ内に設置されたstylesheetやjavascriptなどの設定に使える。 それらの上位階層であるhtmlタグって、普通に考えたらdocument.htmlって書きたいのに、「そんなモノは無い」と怒られる。 htmlタグにアクセスしたい人の為のスニペットを用意したので、便利にお使いくだされ。

document.htmlを使う場面

WEBサイトでスクロール座標を取得したい時や座標を任意に設定したい場合(自動スクロールなど)に、通常のブラウザでは、document.bodyをスクロールさせればいいのに対して、GoogleChromeのver60以降では、制限が変わった為、htmlタグをスクロールさせなければいけなくなった。 具体的にソースで説明します。 # 通常ブラウザ document.body.scrollTop = 100; # GoogleChrome ver60以降 document.getElementsByTagName("heml")[0].scrollTop = 100; 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の冒頭に書きを書いておきましょう。 document.html = document.documentElement; これで気持ちよくhtmlにアクセスできるようになります。 ちなみに、documentで簡易アクセスできるものは以下のようにたくさんあるので覚えておくと便利ですよ。 document.doctype > < !DOCTYPE html> document.documentElement > <html>...</html> document.body > <body>...</body> document.head > <head>...</head> document.forms > [<form></form> , ...] document.images > [<img ../> , ...] document.links > [<a ...> , </a><a ...>, ...] document.scripts > [<script ..</script> , ...] document.title > Tips of Rubbish 他にもdocumentについて調査した過去記事も参考にしてみてください。 documentから得られる情報 これを知らずにjavascriptをwebページで書き込んでいると、非常に効率悪いので、ぜひ活用しましょう!!

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。