『JavaScript DOMプログラミングアート』読書ノートのDOM基礎

DOM DOM:ドキュメントオブジェクトモデル;
ノード
要素ノード:DOMの原子は要素ノードです.、などの要素があります.要素には、他の要素を含めることができます.他の要素に含まれていない唯一の要素は要素です.
テキストノード:XHTMLドキュメントでは、テキストノードは常に要素ノードの内部に含まれます.
≪プロパティ・ノード|Properties Node|ldap≫:プロパティ・ノードは、要素をより具体的に説明するために使用されます.たとえば、ほとんどの要素にはtitle属性がありますが、この属性を使用して要素に含まれるものを正確に説明することができます.
       Don't forget to buy this stuff.
DOMでは、title="a gentle reminder"は属性ノードです.
CSS
要素getElementById、getElementsByTagName、getElementsByClassNameの3つの要素ノードを取得する方法.
getElementsByTagNameでは、ワイルドカードをパラメータとして使用できます.これは、ドキュメント内の各要素がこの関数が返す配列に一席を占めることを意味します.ワイルドカード("*")は、乗算操作と区別するために引用符でなければなりません.
getElementByIdとgetElementsByTagNameを組み合わせて運用することもできます.次のようになります.

 
  
       var shopping = document.getElementById("purchase"); 
  
       var items = shopping.getElementsByTagName("*"); 
  
 
 

これによりid属性値がpurchaseの要素に何個の要素が含まれているかが得られる.
getElementsByClassNameメソッドは、新しいブラウザでのみサポートされます.これを補うために、DOMスクリプトプログラマは、既存のDOMメソッドを使用して、独自のgetElementsByClassNameを実現する必要があります.多くの場合、彼らの実装プロセスは、次のgetElementsByClassNameとほぼ似ています.

 
  
       function getElementsByClassName(node, classname){ 
  
         if(node.getElementsByClassName){ 
  
           return node.getElementsByClassName(classname); 
  
         }else{ 
  
           var results = new Array(); 
  
           var elems = node.getElementsByTagName("*"); 
  
           for(var i=0;i             if(elems[i].className.indexOf(classname) != -1){ 
  
               results[results.length] = elems[i]; 
  
             } 
  
          } 
  
          return results; 
  
       } 
  
    } 
  
 
 

このgetElementsByClassName関数は2つのパラメータを受け入れ、最初のnodeはDOMツリーの検索開始点を表し、2番目のclassnameは検索するクラス名です.
属性の取得と設定
getAttributeは関数で、パラメータは1つしかありません.クエリーする属性の名前は次のとおりです.

 
  
      object.getAttribute(attribute) 
  
 
 

setAttribute()を使用すると、属性ノードの値を変更できます.setAttributeでドキュメントを変更した後も、ブラウザのview source(ソースコードの表示)オプションでドキュメントのソースコードを表示すると、変更前の属性値が表示されます.つまり、setAttributeで行った変更はドキュメント自体のソースコードに反映されません.この「表裏が異なる」現象は、DOMの動作モードに由来します.ドキュメントの静的コンテンツをロードしてから動的にリフレッシュし、動的リフレッシュはドキュメントの静的コンテンツに影響しません.これはDOMの本当の威力です.ページの内容をリフレッシュするのにブラウザでページをリフレッシュする必要はありません.