<p>やタグで囲まれたテキスト等)をノードとみなします。JavaScriptはノードを取得して、中身を参照したり、書き換えたりします。取得するノードを識別する方法は2つあります。idのようなキーで識別する。(document.getElementByIdなど)あるノードからの相対的な位置関係で識別する。value="やれやれだぜ"></form>指定したノードが存在しない場合undefinedを出力しています。存在する場合、ノードに応じたオブジェクトを返します。formやinputの場合HTMLCollection、<select>の場合HTMLSelectElement、optionの場合NodeList。オブジェクトが持つメンバを使って操作できます。ノードを追加するには以下の様にします。詳細はDOMの仕様書等をご参照のこと。<親ノード>.removeChild(<削除対象ノード>)。要素中の属性にアクセスしたい場合、上記の様にして要素を取得してから、<要素>.<属性>のようにしてアクセスできる属性が多いですが、classはclassNameでアクセスするなど、変則的なものもあります。<値>)のようにして操作することもできます。attributesにより、要素に関連したすべての属性のリスト(NamedNodeMap)を得られます。IEはNamedNodeMapのサポートが不完全なようなので注意が必要です。<値>);、属性を削除する場合は<要素>.removeAttribute(<属性>)。スタイルシートの操作<要素>.style.<スタイルプロパティ>でアクセスする。スタイルプロパティについてはこちら。DOMの構築やらJavaScriptが処理をするまでの流れやら参考資料を紹介します。Pixel仮想DOMJavaScriptの仕様とは直接的に関係ないと思いますが、ついでに仮想DOMについて。仮想DOMを正確に理解するには調べていただくとして、ざっくり以下の様に認識しています。なにがうれしいのか?高速な処理が可能。従来はリクエスト毎にDOMを0から作っていた。仮想DOMがある世界では、古い仮想DOMと新しい仮想DOMの差分をDOMに反映するだけで済む。(数年前から優位性が薄れている説も見かける。)どうやって使うのか?仮想DOMをサポートしたフレームワークを利用する。ReactとかVueとか。イベント画面のロードやクリックなど、ブラウザ上(というのが厳密に正しいかはおいといて)で起きることをイベントと呼びます。イベントが起きたことをトリガーとしてJavaScriptで処理を行います。指定できるイベントはこちら。イベントハンドラ以下の様な流れで実装、実行します。イベントハンドラと関連付ける処理をJavaScriptで定義する。イベントハンドラとその処理を関連付ける。イベントが起きた時、イベントハンドラが検知し、関連づけられた処理を実行する。イベントハンドラの仕掛け方は2つあります。(似たような仕組みとしてイベントリスナがありますが後述します。)HTMLタグにonイベント名属性(イベントハンドラ)とJavaScriptのコードを関連付ける。false;">HTML中にJavaScriptのコード(スクリプト)を混在させることをよしとしない考え方もあります。HTMLタグにスクリプトを埋め込む場合は、デフォルトのスクリプト言語を宣言しておくのが望ましいとされていましたが、HTML5ではデフォルト扱いとなり省略されることになりました。content="text/javascript">(ページロード時等に)JavaScriptで登録する。以下の様に予め挙動が決まっているものがあります。リンクがクリックされたらページを移動する。サブミットボタンがクリックされたらフォームを送信する。ページ上で右クリックされたらコンテキストメニューを表示する。このような挙動を抑止したい時があります。false;">イベントリスナの場合は後述します。イベントリスナイベントハンドラとイベントリスナの違いがまだ腹落ちしきっていません3が、一つ分かっていることは、イベントハンドラに関連付けられる処理は1つですが、インベントリスナの場合、複数関連付けられます。登録IEの場合attachEvent、それ以外の場合addEventListenerでイベントと処理を関連付けます。ここにもクロスブラウザの問題が横たわっています。attachEventについてはこちら。addEventListenerについてはこちら。Error('利用できるイベントリスナがありません。id="btn">EventオブジェクトリスナはEventオブジェクトを受け取ります。このあたりもブラウザとバージョンによって仕様が異なるので注意が必要です。});e.targetとwindow.event.srcElement、e.buttonとwindow.event.buttonの違いなど要チェックです。削除IEの場合detacheEvent、それ以外の場合removeEventListenerでイベントと処理を関連付けを解除します。detacheEventについてはこちら。removeEventListenerについてはこちら。バブリングバブリングを正確に理解するには調べていただくとして、ざっくり「文書(Webページ)の下位の要素で発生したイベントは、上位の要素でも発生する。