body 要素
4.4.1 body 要素
- カテゴリー
- セクショニング・ルート
- この要素を使うことができるコンテキスト:
html要素の中の 2 番目の要素として- コンテンツ・モデル:
- フロー・コンテンツ
- コンテンツ属性:
- グローバル属性
onafterprintonbeforeprintonbeforeunloadonbluronerroronfocusonhashchangeonloadonmessageonofflineononlineonpagehideonpageshowonpopstateonredoonresizeonscrollonstorageonundoonunload- DOM interface:
-
interface HTMLBodyElement : HTMLElement { attribute Function onafterprint; attribute Function onbeforeprint; attribute Function onbeforeunload; attribute Function onblur; attribute Function onerror; attribute Function onfocus; attribute Function onhashchange; attribute Function onload; attribute Function onmessage; attribute Function onoffline; attribute Function ononline; attribute Function onpopstate; attribute Function onpagehide; attribute Function onpageshow; attribute Function onredo; attribute Function onresize; attribute Function onscroll; attribute Function onstorage; attribute Function onundo; attribute Function onunload; };
body 要素は、ドキュメントのメインのコンテンツを表します。
準拠ドキュメントでは、body 要素はひとつだけです。document.body IDL 属性によって、スクリプトからドキュメントの body 要素に簡単にアクセスすることができます。
いくつかのDOMの操作(例えば、ドラッグ&ドロップ・モデル)は、"body 要素" を単位として定義されます。これは、用語の定義の通り、DOM の特定の要素を参照するもので、任意の body 要素ではありません。
body 要素は、多くの Window オブジェクトのイベント・ハンドラ属性に、イベント・ハンドラ・コンテンツ属性としてアクセスできるようにします。それは、また、イベント・ハンドラ IDL 属性を正確に映し出します。
Window オブジェクトの onblur, onerror, onfocus, onload, onscroll イベント・ハンドラ属性は、body 要素を通してアクセスできますが、HTML 要素によって通常にサポートされる同じ名前を持った一般的なイベント・ハンドラ属性とまったく同じです。
ゆえに、例えば、Document の body 要素の子で発生したバブリングしている error イベントは、最初は、その要素の onerror イベント・ハンドラ・コンテンツ属性を起動するでしょう。次に、ルートの html 要素の onerror イベント・ハンドラ・コンテンツ属性を起動し、それから、body 要素の onerror イベント・ハンドラ・コンテンツ属性を起動するでしょう。これは、そのイベントは、body へ、html へ、Document へ、Window へといった具合に、ターゲットから沸き上がってくるものであり、body のイベントハンドラ属性は、body ではなく、Window を監視しているからです。しかし、addEventListener() を使って body にアタッチされた正規のイベント・リスナーは、イベントが body 要素を通して沸き上がってくるときに起動するでしょう。イベントが Window オブジェクトに到達したときではありません。
このページは、ユーザーがオンラインかそうでないかを表示するためのインジケータを更新します:
<!DOCTYPE HTML>
<html>
<head>
<title>Online or offline?</title>
<script>
function update(online) {
document.getElementById('status').textContent =
online ? 'Online' : 'Offline';
}
</script>
</head>
<body ononline="update(true)"
onoffline="update(false)"
onload="update(navigator.onLine)">
<p>You are: <span id="status">(Unknown)</span></p>
</body>
</html>
※ 原文:http://www.w3.org/TR/2011/WD-html5-20110525/sections.html#the-body-element