『JavaScript DOMプログラミング術』読書メモ - JavaScriptピクチャライブラリ_Javascriptスキル

画像の src 属性を変更する 2 つの方法:

1. setAttribute メソッドは、要素ノードの任意の属性を設定できる「レベル 1 DOM」のコンポーネントです。

2, element.src = source; これは「レベル 1 DOM」が登場する前のメソッドであり、現在も機能します。

「レベル 1 DOM」の利点は、その移植性です。これらの古い方法は Web ドキュメントにのみ適用できますが、DOM はあらゆるマークアップ言語に適用できます。

イベントハンドラー関数

リンクをクリックしたときに、別のウィンドウに移動するのではなく、この Web ページに留まりたいのです。コードは次のとおりです。

コードをコピーします コードは次のとおりです:

http://www.example.com" onclick="showPic(this); return false ;">クリック

このリンクをクリックすると、onclick イベント ハンドラーによってトリガーされた JavaScript コードが false を返すため、このリンクのデフォルトの動作はトリガーされません。

childNodes 属性

childNodes 属性を使用すると、任意の要素のすべての子要素を取得できます。 childNodes プロパティによって返される配列には、要素ノードだけでなく、すべてのタイプのノードが含まれます。実際、ドキュメント内のほとんどすべてがノードであり、スペースや改行もノードとして解釈され、childNodes プロパティによって返される配列にすべて含まれます。

しかし、各ノードにはnodeType属性があります。 nodeType 属性には合計 12 の可能な値がありますが、そのうちの 3 つだけが価値があります。要素ノードの nodeType 属性値は 1、属性ノードの nodeType 属性値は 2、テキスト ノードの nodeType 属性値は 3 です。

テキスト ノードの値を変更する場合は、DOM が提供する nodeValue 属性を使用します。

配列要素 childNodes[0] には、より直観的で読みやすい同義語があり、firstChild として記述することができ、対応する lastChild 属性も提供します。

例:

コードをコピーします コードは次のとおりです:

画像を選択してください

まず、それを保存する変数を作成します:

コードをコピーします コードは次のとおりです:

var description = document.getElementById("description");

description.nodeValue の戻り値は null です。

要素自体の nodeValue 属性は null 値です。

要素に含まれるテキストの値を取得するには、description.childNodes[0].nodeValue または description.firstChild.nodeValue を使用します。