『JavaScript DOM プログラミング術』読書メモ DOM の基礎_JavaScript スキル

ドム

DOM: ドキュメント オブジェクト モデル

ノード

要素ノード: DOM のアトムは要素ノードです。

、

、

などの要素。要素には他の要素を含めることができます。別の要素内に含まれない唯一の要素は、 要素です。 テキスト ノード: XHTML ドキュメントでは、テキスト ノードは常に要素ノードの中に含まれます。
属性ノード: 属性ノードは、要素のより具体的な説明を与えるために使用されます。たとえば、ほとんどすべての要素には title 属性があり、この属性を使用して要素に含まれる内容を正確に記述することができます:

これを忘れずに購入してください。

DOM では、title="a優しいリマインダー" は属性ノードです。

CSS

要素を取得
要素ノードを取得するには、getElementById、getElementsByTagName、getElementsByClassName の 3 つのメソッドがあります。

GetElementsByTagName では、パラメーターとしてワイルドカードを使用できます。これは、ドキュメント内のすべての要素が、この関数によって返される配列内に配置されることを意味します。ワイルドカード文字 (「*」) は、乗算演算と区別するために引用符で囲む必要があります。
getElementById と getElementsByTagName を組み合わせることもできます。以下に示すように:
コードをコピーします コードは次のとおりです:
var shopping = document.getElementById("purchase");
var items = shopping.getElementsByTagName("*");


このようにして、購入の id 属性値を持つ要素に含まれる要素の数を取得できます。
getElementsByClassName メソッドは、新しいブラウザーでのみサポートされています。これを補うために、DOM スクリプト プログラマは既存の DOM メソッドを使用して独自の getElementsByClassName を実装する必要があります。ほとんどの場合、実装プロセスは次の getElementsByClassName とほぼ同様です:
コードをコピーします コードは次のとおりです:
関数 getElementsByClassName(ノード, クラス名){
If(node.getElementsByClassName){
return node.getElementsByClassName(クラス名);
}その他{
var results = new Array();
var elems = node.getElementsByTagName("*");
for(var i=0;i If(elems[i].className.indexOf(クラス名) != -1){
results[results.length] = elems[i];
}
}
結果を返します;
}
}


この getElementsByClassName 関数は 2 つのパラメーターを受け取ります。最初のノードは DOM ツリー内の検索要素の開始点を表し、2 番目のクラス名は検索されるクラス名です。

プロパティの取得と設定

getAttribute は、パラメーターを 1 つだけ持つ関数です。パラメーターは、クエリする属性の名前です:
コードをコピーします コードは次のとおりです:
object.getAttribute(属性)



setAttribute() を使用すると、属性ノードの値を変更できます。 setAttribute を通じてドキュメントを変更した後、ブラウザのソース表示オプションを通じてドキュメントのソース コードを表示すると、変更前の属性値が表示されます。つまり、setAttribute によって行われた変更は変更されません。ドキュメント自体のソースコードに反映されます。この「外観と内部の不一致」現象は、DOM の動作モードに起因します。つまり、ドキュメントの静的コンテンツが最初に読み込まれ、次に動的に更新されますが、動的更新はドキュメントの静的コンテンツには影響しません。これが DOM の真の能力です。ブラウザ内のページを更新せずにページのコンテンツを更新します。