[Javascript] documentから得られる情報

2016年9月12日

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

javascriptをHTMLで実行する場合、document.***っていう記述を沢山書くと思いますが、色々なツールを作ってきた経験で、意外と知られていないプロパティもあったので、メモがてらまとめておきました。

サンプル環境

サンプル実行サイト

https://blog.myntinc.com

実行ブラウザ

GoogleChrome バージョン 53.0.2785.89 (64-bit)

OS環境

MacOS バージョン 10.11.6

documentプロパティ

ページ情報

# 文字エンコードの取得 document.inputEncoding > UTF-8 document.charset > UTF-8 document.characterSet > UTF-8 # style-sheetの取得 document.styleSheets > StyleSheetList {0: CSSStyleSheet, 1: CSSStyleSheet, 2:...} *(length:17) # スクロール全体の情報を取得(<body>タグの取得と同じ) document.scrollingElement > <body> ...</body> # ページの可視性の取得 document.visibilityState > visible # ページの読み込み状態の取得 document.readyState > complete > loading > interactive # 更新日の取得 document.lastModified > 09/10/2016 09:03:52

URL関連

# 表示しているURLの取得 document.URL > http://blog.myntinc.com/ document.documentURI > http://blog.myntinc.com/ # URLの関連情報を取得 document.location > ancestorOrigins:DOMStringList > assign:function() > hash:"" > host:"blog.myntinc.com" > hostname:"blog.myntinc.com" > href:"http://blog.myntinc.com/" > origin:"http://blog.myntinc.com" > pathname:"/" > port:"" > protocol:"http:" > reload:function reload() > replace:function() > search:"" > toString:function toString() > valueOf:function valueOf() > __proto__ document.domain > blog.myntinc.com document.refferer > 直前のURL

タグ情報

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> , ...] document.scripts > [<script >...</script> , ...] document.title > Tips of Rubbish

その他プロパティ

# デザインモードスイッチの状態取得 document.designMode > off # ページの横幅の取得 document.width > undefined # ページの縦幅の取得 document.height > undefined # FLASHなどのリッチコンテンツの取得 document.embeds > function anonymous() # cookie情報の取得 document.cookie > __utma=213147410...; __utmc=...;...

イベント関連

document.onclick = function(){...}; # ページにフォーカスインした場合のイベント # 「window.onclick」も同じ動作 document.onkeydown = function(e){console.log(e)}; # キーボードのキーが押されている状態から開放された時のイベント document.onkeyup = function(e){console.log(e)}; # ページ内でマウスボタンが押された時に発生 document.onmousedown # ページ内でマウスカーソルの座標移動時のイベント document.onmousemove # ページ内からマウスカーソルが外に出た場合のイベント document.onmouseout # ページ内でマウスボタンが押された状態から開放された時のイベント document.onmouseup # ページの状態を元に戻す