JavaScript-DOM操作/イベント

DOM操作

DOM操作とは(DocumentObjectModel)
　ウェブサイトを動的に書き換える技術
　HTMLやXMLをアプリケーションから作成するための仕組み
DOMツリー
　HTMLドキュメントやXMLドキュメントをツリー構造として表現したもの
ノード　要素ノード、属性ノード、テキストノード
　文章を構成する要素、属性、テキストといったオブジェクト
オブジェクト　関連のあるデータと機能の集合

Windowsオブジェクト　ブラウザを操作するための機能　最上位
Documentオブジェクト　HTMLのコンテンツを保持　＝DOM
Locationオブジェクト　表示しているページのロケーション情報
Historyオブジェクト　ブラウザの履歴の操作
Navigatorオブジェクト　ブラウザ名やバージョン、固有の情報提供
Screenオブジェクト　ディスプレイに関数情報提供
Formオブジェクト　Formに関数情報、操作ができる
Anchorオブジェクト　ページ上のアンカーに関する情報を扱う
Imagesオブジェクト　画像に関する情報提供、操作機能の提供
Elementオブジェクト　HTMLドキュの要素（タグ）の事

getElementByIdメソッド
説明：指定したidを持つ要素を１つ取得する
構文：document.ElementById(id)
　id=取得したい要素のid値
idを持つ要素がなければnull（オブジェクトが存在しない）
innerText=要素のテキスト部分だけを抜き出す

getElementsByNameメソッド
説明：指定したタグ名を持つ要素を取得する
構文：document.getElementsByTagName※Elements Sが付く
　tagName=取得したい要素のタグ名
戻り値はHTMLColectionとなり、タグ名が存在しない場合は空のHTMLColection([])を返す※nullではないのに注意！

getElementsByNameメソッド
説明：指定したname属性を持つ要素を取得する
　ラジオボタン、チェックボックス他name属性が等しい要素群の取得で利用
構文：document.getElementsByName※Elements Sが付く
　name=mame属性の値
戻り値はHTMLColectionとなり、name属性が存在しない場合は空のHTMLColection([])を返す※nullではないのに注意！

getElementsByClassNameメソッド
説明：指定したclass属性を持つ要素を取得する
　ラジオボタン、チェックボックス他name属性が等しい要素群の取得で利用
構文：document.getElementsByClassName※Elements Sが付く
　className=mame属性の値
戻り値はHTMLColectionとなり、class属性が存在しない場合は空のHTMLColection([])を返す※nullではないのに注意！

ノードの追加
要素/テキストノード作成
createElement / createTextNode
ノード同士組み立ててドキュメントに追加
appendChild

createElementメソッド
説明：要素を作成する
構文：document.createElements(elementName)
　※elementName：要素名
ノードを作成するためだけ。別途ドキュメントに追加する処理必要。

createTextNodeメソッド
説明：テキストノードを作成する
構文：document.createTextNode(text)
　※text：テキスト
ノードを作成するためだけ。別途階層に追加する処理必要。

appendChildメソッド
説明：指定した要素を現在の要素の最後の子要素をして追加
構文：document.attendChild(node)
　※element：要素オブジェクト　※node：追加する子ノード
戻り値：追加した子ノード

replaceChildメソッド
説明：指定した子ノードを置き換える
構文：replaceNode=parentNode.replaceChild(newChild,oldChild)
　※parentNode：置換え対象の親ノード　※newChild：置換え後のノード
　※oldChild：置換え対象のノード　※replaveNode：置換えられたノード
newChildとoldChildを入れ替える

removeChildメソッド
説明：指定した子ノードを取り除く
構文：oldChild=element.removeChild(child)
　※child：DOMから取り除く子ノード
　※oldChild：取り除かれた子ノードの参照
取り除いたノードoldChildは再利用できる

イベント・イベントハンドラ

イベントとはブラウザ上でユーザーが行う様々な動作のこと
（マウス_クリック/ダブルクリック/ポイント移動/ボランを押す/離す）
イベントハンドラとはイベントの発生をきっかけとして、何かしらの処理を実行する。その処理のこと。
（マウスでボタンをクリック→Hello!とコンソールに出力）
プロパティを使って関連付ける方法
構文＝オブジェクト名.onイベント名=()=>{
  //イベントハンドラ　};
loadイベントとは関連付けられた要素を読み終わった時に発生するイベント
ページが完全に読み終わったことを検知して、何か処理を実行させる。
addEventListenerを使う
構文＝要素オブジェクト.addEventListener（イベントの種類.()=>{
  //イベントハンドラ　},false);
最後のfalseは他もあるが、高度な内容のため、基本はfalseでよい