サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
Switch 2
domes.lingua.heliohost.org
注：2011 年に HTML5 のバージョンが廃止されましたが（HTML is the new HTML5）、本稿では過去の HTML と区別するため Web HTML と呼びます。同様に、DOM 水準と区別するため、DOM4 を Web DOM と呼ぶことにします。
ある種類のオブジェクトが、どんなメンバ（メソッドやプロパティ）を持つかを定義する仕組みをインタフェースと呼びます。インタフェースは Web IDL で次のように定義されます。 このインタフェース A を持つオブジェクトは、次のようなメンバを持ちます。文字列値であるプロパティ x。文字列値であるプロパティ y。文字列値を返すメソッド f（引数なし）。文字列値を返すメソッド g（引数なし）。すなわち、attribute から始まる部分はプロパティの定義、それがなければメソッドの定義です。次に、プロパティなら値の種類、メソッドなら戻り値の種類を書き、その後にそれぞれの名前を書きます。最後に、メソッドの定義の場合は括弧の中に引数定義を書きます（引数定義については後述します）。各部分はセミコロン ";" で終わります。その間に空白文字や改行文字がいくつあっても構いません。このオブジェクトを ECMA
テンプレートとして HTML 断片または DOM 部分木を用いるには、大きく 2 種類の方法が考えられます。1 つは文字列としてテンプレート出力する方法。これは DOM API に不慣れな人にも分かりやすい反面、セキュリティ問題を引き起こしやすいデメリットがあります。例えば、次のように ul 要素を出力するコードがあるとします。 var attr = 'sample.html'; var text = 'サンプル'; document.getElementById ('result').innerHTML = '<ul>' + '<li><a href="' + attr + '">' + text + '<\/a><\/li>' + '<\/ul>'; 一見してお分かりのように、もし変数 attr に "、<、>、& が含まれていたら、あるいは変数 text に <、&、]]> が含まれ
注：2011 年に HTML5 のバージョンが廃止されましたが（HTML is the new HTML5）、本稿では過去の HTML と区別するため Web HTML と呼びます。同様に、DOM 水準と区別するため、DOM4 を Web DOM と呼ぶことにします。 文書 document は自分を表示してくれる 1 個以上のビューを持つことができます*1。その中でも基本的なビューには document.defaultView からアクセスできます。例えば、DOM の文書木には CSS ルールが適用されて 1 個のビューを作り上げます。したがって、文書内の要素 elt に適用されている CSS 解決値を知りたいときは、document.defaultView.getComputedStyle(elt, null) のようにビューに問い合わせれば分かるわけです*2。逆に、ビューから文書木へ
注：本稿は DOM4 の 2012 年 2 月 18 日付の編集者草案に基づくものです。今後、大きな変更が頻繁に加わる可能性があります。必ず最新の規定を確認して下さい。 DOM ベースで定義されている HTML5 は、別名 DOM5 HTML とも呼ばれていました。しかし、HTML5 のバージョン番号が廃止され「生きた標準」（Living Standard）になったのに伴い、DOM5 HTML という別名も捨てられました*1。一方で、DOM をウェブアプリケーションに有機的に組み込めるよう、Web DOM Core、Web DOM Range などの形で再定義する必要が生まれました。これらは後に DOM Core と名を変え、さらに DOM4 と改名しました。 もともと、DOM 規定は水準（level）として勧告されています。組み込み用途などリソースが少ない分野であっても、開発者が必要に応
DOM Core は 12 種類のノードを定義していますが、それらは大まかに 2 個のグループに分けられます。子ノードを持つものElement、Document、DocumentFragment など。これらの nodeValue は null です（Attr を除く）。子ノードを持たないもの（葉ノード）Text、Comment、CDATASection、ProcessingInstruction。これらの nodeValue はテキストデータで、data プロパティでも参照できます。DOM Range ではノードをコンテナと呼びます。子ノードを持つコンテナの場合、それぞれの子の間をオフセットとして数えます。最初の子の前をオフセット 0 とし、全部で子ノード数 + 1 個のオフセットが存在します。子ノードを持たないコンテナの場合、文字と文字の間をオフセットとして数えます。テキストデータが「
文書 document とリンクしているスタイルシートには document.styleSheets からアクセスできます*1。 <?xml version="1.0"?> <!-- document.styleSheets[0] --> <?xml-stylesheet type="application/xsl" href="sample1.xsl"?> <!-- document.styleSheets[1] --> <?xml-stylesheet type="text/css" href="sample2.css"?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>スタイリッシュ</title> <!-- document.styleSheets[2] --> <link rel="stylesheet" ty
DOM 仕様書を読む前のガイドとして、DOM のおおまかな内容と ECMAScript（JavaScript）によるごく簡単な例文を提供します。DOM Level 1 から Level 3 まで。DOM Core 入門 (1)DOM Core 入門 (2)DOM Events 入門DOM Traversal 入門DOM Range 入門DOM Load and Save 入門DOM Validation 入門DOM HTML 関連。DOM HTML 入門 (1)DOM HTML 入門 (2)DOM Views、DOM Style Sheets、DOM CSS 関連。CSSOM 入門 (1)CSSOM 入門 (2)CSSOM View 入門未勧告のもの。DOM XPath 入門DOM Abstract Schemas 入門DOM Views and Formatting 入門その他、ウェブプ
<body onclick="alert ('BODY');"> <div onclick="alert ('DIV');"> <p onclick="alert ('P');">バブルスライムはにげだした！</p> </div> </body> 「バブルスライムはにげだした！」をクリックすると、それは p 要素をクリックしたことになりますから「p」がアラートされます。さらに、このクリックは div 要素内で生じたものでもあるので「div」がアラートされます。さらにさらに、そのクリックは body 要素内で生じたものでもありますから「body」がアラートされます。結局、1 回のクリックで 3 個もの onclick 属性が呼び出されることになります。では、onclick 属性を呼び出す順番はどうなっているでしょうか。これは明確に決まっています。階層的に最も深い p 要素の onclick
このページを最初にブックマークしてみませんか？
『DOM ECMAScripting』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
