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ページで書き込んでいると、非常に効率悪いので、ぜひ活用しましょう！！
0 件のコメント:
コメントを投稿