コードを書かずに、順を追って説明します。
2 つのテーブルがあるtableA
としtableB
ます。両方に* がtbody
付きtr
ます。
セルtableA
のみがあります。td` セル。td
tablB will have four
*tr
は「テーブル行」です。これtd
はtable data
、テーブルがほとんどの部分でデータを保持するように設計されているためです。
ドキュメント オブジェクト モデル (DOM)メソッドを使用して、ドキュメント オブジェクト内の要素の DOM ノードを見つけて選択する必要があります。これを行う最も簡単な方法は、id
検索しようとしている要素に属性を設定することです。id
属性はページに固有のものである必要があることに注意してください (重複しないでください! )。これは、 、 などを意味<img id="imageLanding" src="...">
し、要素の最終的な結果になります。<img id="image1" src="...">
<img id="image2" src="...">
img
補足: HTML5 ではid
s を にすることができますがid="1"
、これは悪い習慣であると考えており、その形式を使用しないことをお勧めします。原則的なことです。
この時点で、次のようなテーブル マークアップが作成されているはずです。
table
tbody
tr
td
img id="imageLanding"
table
tbody
tr
td
img id="image1"
td
img id="image"
td
img id="image3"
... etc ...
DOM 要素にはプロパティ (「属性」の意味は少し異なります) とメソッドがあります。たとえば、要素には属性があり、この場合は DOM 要素に対応するプロパティimg
があります。属性は、ページがロードされたときにパーサーに与えたものであり、プロパティは、属性が DOM ノードとして要素内でどのようになるかです。場合によっては、アクセスされたプロパティが思ったように更新されないことがあります。これが区別がある理由です。src="..."
element.src
img
次に、イベントの説明を使用して何が起こるかを考えてみましょう。誰かに2 つのテーブルが表示され、一方のテーブルの画像をクリックするオプションが提供されます。その後、関数はクリックされた画像をもう一方のテーブルの 1 つの画像と交換します。太字のテキストは、セットアップまたは実行のいずれかで、アクションが発生したすべての場所を示します。(クリックされた画像をその画像から削除しtd
、他の画像が削除された後に別のテーブルに移動することも別の方法です。ここではそれを示していません)。
ですから、行動する前に「何か」が起こるのを待たなければなりません。この「何か」がイベントです。すべての DOM 要素は何らかのイベントをサポートします (ただし、すべての同じイベントが要素のすべてのタイプで発生するわけではありません)。これにより、何かが発生したときに何かを実行できます: ONclick
、ONmouseover
、ONmouseout
など。イベントが発生している「オン」です。検討:
学校から帰ってきてサンドイッチを食べました。
on
属性またはダイレクト DOM プロパティを使用して要素を使用してイベント ハンドラーをセットアップする場合は、それらの各イベント名に追加する必要があることに注意してください。つまり、onclick
、onmouseover
、およびonsubmit
は、フォーム要素が送信される前に操作するためのものです。
DOM メソッド ( よりも推奨onclick="stuff()"
) を使用することは、実際には次のことを意味します。
element.onclick = function(){};`
そこに表示される関数のその形式は変数関数と呼ばれ、そのように使用すると、その左側の変数またはプロパティに値が返されます。()
これにより、変数名と追加された関数を呼び出すことができます。つまり、myVar.myFunc()
ここに示されているように、element.onclick()
.
イベントを要素に「アタッチ」する別の (ある程度「より良い」) 方法があることに注意してください。function name(){}
フォーマットを使用して宣言し、 などの参照を使用することもできますelement.onclick = name;
。これを行う場合、no ()
are usedに注意してください。それ以外の場合は、関数をすぐに呼び出して、返された結果を変数に渡します。ほとんどの場合、この方法は望ましくありません。
これで、2 つのテーブルのマークアップと「イベント」のレイアウトの概要がわかりました。2 つを合わせると、識別子を持つ 5 つの要素があります。これらの要素を見つけるための DOM メソッドは次のとおりです。
var img1 = document.getElementById('image1');
それに別の ID をフィードすると、要素の DOM ノードへの参照が取得されます。その時点で、それを操作し、プロパティ値のようなものを取得し、その要素で発生したときにそのイベントを「処理」するように指示された特別なイベントを割り当てることができます。例えば:
img2.onclick = function(){
alert('You clicked image ' + this.id);
};
または、関数宣言の参照をイベント ハンドラー プロパティに渡します。
function alertID(){
alert('You clicked image ' + this.id);
};
img2.onclick = alertID;
DOM 要素のプロパティを使用してイベント ハンドラーを設定するthis
と、その関数の内部で使用して自己参照できます。つまり、関数を呼び出した要素に関する情報を取得できます。その時点でその関数内では、その要素の「コンテキスト」内にいます。
タグ属性を使用してイベント ハンドラーをアタッチすると、退屈で面白くない次のような粗雑な作業になります。
<img id="image1" onclick="whyme(this)"/>
function whyme(el){
alert('You clicked image ' + el.id);
};
または、おそらく致命的ではありませんが、確かに見るのが苦痛ですが、要素を「識別する」値を渡します。
<img id="image1" onclick="whyme('image1')"/>
function whyme(id){
alert('You clicked image ' + document.getElementById('id').id;
};
確かに回り道。
したがって、この時点で、これらのピースを組み合わせる必要があります。タグにテーブルのマークアップがbody
あり、関数に含まれる「アクションでイベントに従う」必要があることを理解し、画像を交換するために何かをする必要があることを知っています。
ページの読み込みと解析に関するメモ。ページの読み込み時に要素を呼び出すスクリプトを実行しようとすると、その要素は、ページの読み込み時に解析順序 (上から下) でスクリプトの前にある必要があります。または、ページが最初に解析されるまで待つ必要があります。 、その後DOMが構築され、必要な要素に自由に(多かれ少なかれ)アクセスできます。jQuery などの言語はカスタムready
イベントを使用しますが、そのイベントは実際にはメソッドとして DOM に存在しません。
onready
したがって、プレーンな DOM でそのビジネスを使用することはできません。使用できるものは次のとおりです。
window.onload = function(){};
ページが解析された後に起動します。onready
の前または後onload
に発生する可能性があります。これは、DOM の準備ができているかどうかを別の何かを個別に監視することで検出しているためです。通常の DOM メソッドについては、この時点では気にする必要はありません。
影響を受ける 2 つのimg
タグが解析され、DOM 要素に変換されます。これらを (属性と DOM ドキュメント メソッドを使用して) 選択しid
、変数またはオブジェクト/要素のプロパティに保存してから... ドラム ロール... その要素のプロパティとメソッドにもアクセスできます。意図した結果を実現します。
onload
これで、ページが読み込まれ、マークアップが解析され、イベントがトリガーされたときに実行するスクリプトができました。さて、あなたはコードを書きます。特別に「処理」するように指示した要素の1つをマウスでクリックしたときにやりたいことは次のとおりです。
[Function swapImages() is called and executed when mouse is clicked]
Get the imageLanding element reference
With the imageLanding element's reference
Set a variable to be equal to the img tag's src attribute, img.src
Using the clicked element's reference (hopefully this)...
Set the imageLanding's img.sr equal to the clicked element's src attribute
Set the clicked element's this.src = the saved value you put in the variable
return to the awaiting events state
[Function ends]
多かれ少なかれ、それだけです。大変そうに聞こえるかもしれませんが、回数を重ねるほど簡単になります。あなたがやろうとしていることには、そこに到達するためのいくつかの方法があります(CodeAddictが示したようにDOMで要素の親マークアップ値を交換するなど)が、これはこれに対する最も簡単な方法であり、ほぼ同じ効果があります(目的に対して) 、 同じ)。
もう少し学習すると、コード内から、要素に対して実行されるイベントやその他の関連アクションを動的にシーク、検出、操作することができます。
でも、今はそんなレベルで心配いりません。これを試して。そして、MDN のチュートリアルを使用します。