DOM を使用したウェブと XML の開発の例

この章では、DOM を利用したウェブと XML 開発のより長い例をいくつか紹介します。可能な限りこれらの例ではドキュメントオブジェクトを操作する上でよく用いられる API や技法や JavaScript のパターンを利用しています。

例 1: 高さと幅

以下の例は、様々な寸法の画像について、height と width プロパティを使用しています。

html


  
    width/height example
    
  
  
    

      Image 1: no height, width, or style
      
    


    

      Image 2: height="50", width="500", but no style
      
    


    

      Image 3: no height, width, but style="height: 50px; width: 500px;"

例 2: 画像の属性

html


  
    Modifying an image border

    
  

  
    

      border test

例 3: スタイルの操作

この簡単な例では、HTML の段落要素のいくつかの基本的なスタイルプロパティに、要素上のスタイルオブジェクトと、DOM から取得したり設定したりできるそのオブジェクトの CSS スタイルプロパティを使ってアクセスしています。この例では、個々のスタイルを直接操作しています。次の例 (例 4 参照) では、スタイルシートとそのルールを使って、文書全体のスタイルを変更することができます。

html


  
    Changing color and font-size example

    
  
  
    

      linker

例 4: スタイルシートの使用

document オブジェクト上の styleSheets プロパティは、その文書に読み込まれたスタイルシートの一覧を返します。このページの例に示されているように、stylesheet、style、CSSRule オブジェクトを利用して、これらのスタイルシートとその規則に個別にアクセスが可能です。そしてこの例では、すべてのスタイル規則のセレクターがコンソールへ表示されます。

js
const ss = document.styleSheets;

for (let i = 0; i < ss.length; i++) {
  for (let j = 0; j < ss[i].cssRules.length; j++) {
    dump(`${ss[i].cssRules[j].selectorText}\n`);
  }
}

以下の 3 つの規則が定義される単一のスタイルシートが附属されているドキュメント用に対して、

css
body {
  background-color: darkblue;
}
p {
  font-family: Arial;
  font-size: 10pt;
  margin-left: 0.125in;
}
#lumpy {
  display: none;
}

このスクリプトは以下の項目を表示します。

BODY
P
#LUMPY

例 5: イベント伝播 (propagation)

この例は DOM でイベントが発生したときの対処方法を、ごく単純化して紹介します。下記の HTML 文書の BODY が読み込まれる時、イベントリスナーが TABLE の第 1 行を使って登録されます。イベントリスナーは関数 stopEvent を実行することでイベントを処理します。この関数は、table の一番下のセルの値を変更します。

しかし、stopEvent はまたイベントオブジェクトのメソッド event.stopPropagation を呼び出します。このメソッドはイベントが発生してこれ以上 DOM に入り込むのを防止します。テーブル自体は、クリックされた時、メッセージを表示する必要のある onclick イベントハンドラーを備えています。しかし stopEvent メソッドは伝播を停止していますので、テーブル内のデータが更新された後では、イベントは効率的に終了し、これを確認するための警告ダイアログが表示されます。

html


  
    Event Propagation

    

    
  

  
    

      

        one
      

      

        two

例 6: getComputedStyle

この例は、window.getComputedStyle メソッドを使用して要素の style 属性あるいは JavaScript (例: elt.style.backgroundColor="rgb(173, 216, 230)") で設定されていないスタイルを取得する方法を示します。後者の種類のスタイルは、もっと直接的な elt.style プロパティを使って取得でき、そのプロパティは DOM CSS プロパティ一覧に挙げられています。

getComputedStyle() は CSSStyleDeclaration オブジェクトを返し、下記のサンプルにあるように、このオブジェクトの getPropertyValue() メソッドによって個々のスタイルプロパティを参照できます。

html


  
    getComputedStyle example

    

    
  

  
    
 


    

      

        
        height max-width
        bg-color

例 7: イベントオブジェクトのプロパティの表示

この例では、DOM メソッドを使って、 Window.load_event イベントオブジェクトのプロパティとそれらの値をすべて表として表示しています。また、オブジェクトのプロパティを反復し、それらの値を取得するために、for...in ループを使った役に立つテクニックをお見せします。

イベントオブジェクトのプロパティはブラウザーによって大きく異なります。 WHATWG DOM Standard に標準のプロパティが載っていますが、多くのブラウザーはこれらを大幅に拡張しています。

以下のコードをテキストファイルとして保存し、様々なブラウザーで読み込ませてみてください。プロパティの数や名称が異なることに驚かれることでしょう。ページにいくつか要素を追加して、異なるイベントハンドラーからこの関数を呼び出してみるのも良いでしょう。

html


  
    
    Show Event properties

    

    
  

  
    
Properties of the DOM  Event Object

例 8: DOM のテーブルインターフェイスの使用

DOM の HTMLTableElement インターフェイスで、テーブルを生成、操作するための便利なメソッドがいくつか提供されています。よく利用される 2 つのメソッドは HTMLTableElement.insertRow と HTMLTableRowElement.insertCell です。

以下の例では、既存のテーブルに行といくつかのセルを追加しています。

html

  

    Row 0 Cell 0
    Row 0 Cell 1

メモ

  • テーブルの innerHTML プロパティは、テーブル全体あるいはセルの内容を記述するために使うことはできますが、テーブルを操作するために使うべきではありません。
  • DOM Core メソッドの document.createElement と Node.appendChild を使って行とセルを生成する場合、他のブラウザーでは table 要素に直接追加できる (行は最後の 要素に追加される) のに対して、IE ではそれらを 要素に対して追加する必要があります。
  • HTMLTableElement インターフェイスには、この他にも、テーブルを生成したり操作するのに利用できる多くの便利なメソッドがあります。