初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます.

Java Script DOMについて 健忘録

DOM = Document Object Model

Objectの集合(tree構造)がHTMLやXMLのDocumentであると考える。
ObjectをNodeと呼ぶ。

DOMはNodeを操作(追加・削除・置換・抽出)をする為のAPIである

要素の集合

両方とも要素の集合

  • NodeList = Static
  • HTMLCollection Object = Dynamic(DOMを操作した場合値が変わることがある)

DOMを操作する場合には、文書ツリーから要素Nodeを取得するところから全ては始まる

戻り値 HTMLElement
document.getElementById()
document.querySelector()
戻り値 HTMLCollection
document.getElementsByTagName()
document.getElementsByClassName()
戻り値 NodeList
document.getElementsByName()
document.querySelectorAll()


document.querySelectorAll()で操作する要素を取得した後
ノードウォーキングで相対的に周りの要素を操作すると効率が良い
そのためには、取得する要素をよく考えてdocument.querySelectorAll()
を使わないとオーバーヘッドが高くなる。


イベントドリブンモデル(イベント駆動型モデル)

イベントをトリガーにして処理を実行すること

イベントに対応して処理内容を定義するコードのかたまり(function)

操作の基本は下記である

  • どの要素で
  • どのイベントを
  • どのように処理するか(関連ずけるか)

1. タグ内の属性として宣言
2. Elementオブジェクトのプロパティとして宣言
3. addEventListenerメソッドを使用して宣言

1.はHTMLタグ内にスクリプトを記述するので好ましくない。
レイアウト定義のHTMLの中にJSを混在させることがよくない

document.addEventListener

jQueryでいう`$(document).ready(fucntion(){});`

document.addEventListener('DOMContentLoaded' ,function() {
  //処理したい内容
},false);

attributesプロパティ

対象とするElementノードの全てのattrリストをNamedNodeMapオブジェクトとして返す
属性値やテキストを取得・設定する

NamedNodeMapオブジェクト

個別のノード名・indexのいずれかでアクセス可
配下ノードの操作が(追加・削除・置換・抽出)

イベントオブジェクト

イベントハンドラー or イベントリスナーにおいて実行される関数のArgumentとして受け取ることのできるオブジェクトです。オブジェクトから、発生したイベントに関わる様々な情報(プロパティ)を知ることができ、またそのイベントを制御するメソッドを活用することができます。

//イベントfuncが起きたElement〇〇の属性値を取得しtestに入れる
function(e) {
}
var test = e.target.getAttribute('〇〇')

JSからのCSS操作

StyleプロパティでのCSS操作は、スタイル定義とスクリプトの混在に繋がるので使用するのは好ましくない。

classNameプロパティを使用する
or
classListプロパティを使用する(IE10以降のため注意)

  • classNameプロパティ

- mouseover・mouseout 各々のイベントにthis.classNameを追加・削除してCSSをコントロールする

  • classNameプロパティ

クリックごとにID’test’をオンオフが出来る

document.addEventListener('DOMContentLoaded' ,function() {
  var test = document.getElementByID('test');

  elem.addEventListener('click' ,function() {
    this.classList.toggle('test');
},false);