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
# ページの状態を元に戻す
0 件のコメント:
コメントを投稿