読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

DOMを理解する

DOM(Document Object Model

  • HTMLをJavaScriptからアクセスしたり変更したりする仕組み
  • JavaScriptは、本来DOMは関係ない(DOMの仕様とJavaScriptの仕様を策定している団体はまったく別)
  • しかし「ブラウザで使っているJavaScript」は、ECMAScriptの言語仕様とDOMの仕様が連携されています(ブラウザでなにかしたいなら、DOMを理解する必要があります)


DOMを理解するアプローチ
  1. JavaScriptの言語仕様から入る
  2. 具体的例から入る
  3. やりたいことをみつけて実践する(jsdo.it
  4. コードをまねてみる
  5. どうしてもわからないところは人に聞く
  6. MDN(Mozilla Developer Network)を少しずつ読む
オブジェクト(Object)とメソッド(Method)
  • オブジェクト指向:対象をオブジェクト(要素ノード)、つまり「もの」のように捉えてプログラミングを行う手法
  • メソッド:オブジェクトに用意されている命令のこと
  • ドットシンタックス(ドットでつなぐ文法)で記述する
  • 引数(ひきすう)argument(オーギュメント) は、カンマ区切りで複数記述可能


ノード node

  • ノードとは、DOMでアクセス・変更できるブロック単位
  • HTMLタグ全てがノードで作られています
<p>これは段落です</p>

<p>タグ要素ノード親ノード
これは段落ですテキストノード子ノード

より良いセレクタ式の選択

次の順序で利用すること

  1. #id(id値で検索)、element(要素名で検索) :常に高速処理
  2. .class(class属性で検索) :IE8以降では概ね高速処理
  3. 1,2,3以外のセレクタ  :IE8以降では概ね高速処理
  4. jQueryの拡張セレクタ  : 独自の解析をするため常に低速処理

プログラムを学ぶうえでの心構え

  1. プログラムはすべて覚えなくていい
  2. プログラムは書かないと覚えない
JavaScriptとは何か
  1. ページ遷移せずに、画面の一部だけを切り替える
  2. HTMLの要素をアニメーションしながら動かす
  3. フォームの入力値のチェックをリアルタイムに行う
開発ツール


コンソールの機能

  • JavaScriptの実行
  • エラーの出力
  • メッセージやログの出力
いまではあまり語られることのないWeb標準のメリット

DOMを使うための流れ

  1. どの箇所に対して
  2. 何をさせる
  3. どのタイミングで
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>DOMの勉強</title>
</head>
<body>
<div id="box">This is box</div>
<script>
window.onload = function() {
  // id名が'box'の要素を取得する
  var box = document.getElementById('box');

  // 取得した要素の背景色を黄緑色にする
  box.style.backgroundColor = 'yellowgreen';
};
</script>
</body>
</html>
  1. どの箇所に対して(id名が'box'の要素に対して)
  2. 何をさせる(背景色を黄緑色にする)
  3. どのタイミングで(windowオブジェクトが読み込まれた時点で)


HTMLのstyle属性が変更されています。

getElementById - id名から要素を取得する
  • 指定した id名から要素を取得する関数
  • 「HTML文書の中から id名の要素を取得してください」という命令


《例》

<div id="box">This is box</div>
<script>
window.onload = function() {
  // id名が'box'の要素を取得する
  var box = document.getElementById('box');

  // 取得した要素はid名が boxという要素です
  console.log( box );
};
</script>



ここで取得した「box」はオブジェクトです。
ブラウザのデバッグツールがHTML要素だけを特別扱いにし、普通のオブジェクトとは違う形式で出力するようになっているからです。


《要素の取得と操作》

<div id="box">This is box</div>
<script>
window.onload = function() {
	
  // ここで取得するboxは文字列でなくオブジェクト
  var box = document.getElementById('box');

  // 要素の中身を文字列で取得
  console.log(box.innerHTML); // This is box

  // CSSを変更する
  box.style.backgroundColor = 'yellowgreen';
	
};

</script>



getElementByIdの戻り値は、オブジェクト

getElementsByTagName - 指定した要素名のすべての要素を取得する
  • 指定した要素名のすべての要素を取得する関数
  • 複数のデータをひとまとまりにするので、戻り値は配列に似たデータの集まりになります
  • 配列に似ていますが、厳密にはNodeListというオブジェクトです
  • getElementsByTagNameは複数取得するのでElements(複数形)になっている
  • getElementsByTagNameの引数に指定できるのは要素名か「*」だけです
<div>element 1</div>
<div>element 2</div>
<script>
window.onload = function() {
  // div要素をすべて取得する
  var elems = document.getElementsByTagName('div');

  // 1番目のdiv要素
  console.log(elems[0]); //=> <div>element 1</div>

  // 2番目のdiv要素
  console.log(elems[1]); //=> <div>element 2</div>
};
</script>


getElementsByClassName - class名から要素を取得する
  • class名から要素を取得する関数
<div class="box">div element 1</div>
<div class="box">div element 2</div>
<p class="box">p element 1</p>
<script>
window.onload = function() {
  // class名がboxの要素をすべて取得
  var elems = document.getElementsByClassName('box');

  // class名がboxである1番目のdiv要素
  console.log(elems[0]); //=> <div class="box">div element 1</div>

  // class名がboxである2番目のdiv要素
  console.log(elems[1]); //=> <div class="box">div element 2</div>

  // class名がboxである1番目のp要素
  console.log(elems[2]); //=> <p class="box">p element 1</p>
};
</script>


querySelector, querySelectorAll - CSSセレクターを使って要素を取得する
<div class="box">div element 1</div>
<div class="box">div element 2</div>
<p class="box">p element 1</p>
<script>
window.onload = function() {
  // class名がboxのdiv要素をすべて取得
  var elems = document.querySelectorAll('div.box');

  // class名がboxである1番目のdiv要素
  console.log(elems[0]); //=> <div class="box">div element 1</div>

  // class名がboxである2番目のdiv要素
  console.log(elems[1]); //=> <div class="box">div element 2</div>
};
</script>


クロスブラウザに対応した要素の取得

属性値の取得
  • 取得したHTMLの要素はオブジェクトです
  • このオブジェクトのプロパティからHTMLの属性値を取得できます
<img id="image" src="sample.jpg" alt="sample画像">
<script>
window.onload = function() {
  // id名がimageである要素を取得
  var image = document.getElementById('image');

  // 取得した要素のsrc属性値を取得
  var src = image.src;

  // src属性値が取得できていることを確認
  console.log(src); //=> sample.jpg
};
</script>
属性値の変更
  • 属性値は取得するだけではなく、変更することもできます
  • 属性値を変更するには、取得した要素のプロパティに代入します
<img id="image" src="sample.jpg" alt="sample画像">
<script>
window.onload = function() {
  // id名がimageである要素を取得
  var image = document.getElementById('image');

  // 取得した要素のsrc属性値をsample2.jpgに上書き
  image.src = 'sample2.jpg';
};
</script>
getAttribute と setAttribute による属性値の取得と変更
  • 属性値の取得と変更を行う関数
  • getAttribute() は、属性値の取得
  • setAttribute() は、属性値の変更
<p><img id="image" src="sample.jpg" alt="sample画像"></p>
<script>
window.onload = function() {
  // id名がimageである要素を取得
  var image = document.getElementById( 'image' );

  // 属性値の取得
  var src = image.getAttribute( 'src' );

  // 属性値の変更
  image.setAttribute( 'src', 'sample2.jpg' );
};
</script>

innerHTMLによる要素の内容の取得と変更

  • JavaScriptでは、取得した要素の内容を取得・変更することもできます
要素の内容の取得
  • 要素の内容を取得するには、innerHTMLを使います
<div id="box">This is box</div>
<script>
window.onload = function() {
  // id名がboxの要素を取得
  var box = document.getElementById( 'box' );

  // 取得した要素の内容を取得
  var html = box.innerHTML;

  // 内容を確認
  console.log( html );  //=>This is box
};
</script>
  • id名がboxの要素を取得し、box.innerHTMLでbox要素の内容(This is box)を取得して出力しています
  • 取得したデータは、文字列です
要素の内容の変更
  • 要素の内容を変更するには、innerHTMLに文字列を代入します
<div id="box">This is box</div>
<script>
window.onload = function() {
  // id名がboxの要素を取得
  var box = document.getElementById( 'box' );

  // 取得した要素の内容を変更
  box.innerHTML = '<em>new</em> HTML!';

  // 内容を確認
  console.log( box.innerHTML );  //=><em>new</em> HTML!
};
</script>

新規要素の作成と追加

  • 既存のHTMLの内容や属性の変更だけではなく、新しい要素を作って追加することもできます
createElement - 要素の作成
  • 要素を作るには、createElementという関数を使います
<script>
window.onload = function() {
  // id要素を新規追加
  var newdiv = document.createElement( 'div' );

  // 新規作成したdiv要素のid属性をnewに設定
  newdiv.id = 'new';

  // 新規作成したdiv要素の内容に 'new div' というテキストを設定
  newdiv.innerHTML = 'new div';

  // 新規作成した要素を確認
  console.log( newdiv );  //=><div id="new">new div</div>
};
</script>
appendChild - 要素の追加
  • 「追加される要素」の子要素として、「追加したい要素」が追加されます
<div id="box"></div>
<script>
window.onload = function() {
  // id名がboxの要素を取得
  var box = document.getElementById( 'box' );

  // id要素を新規追加
  var newdiv = document.createElement( 'div' );

  // 新規作成したdiv要素のid属性をnewに設定
  newdiv.id = 'new';

  // 新規作成したdiv要素の内容に 'new div' というテキストを設定
  newdiv.innerHTML = 'new div';

  // box要素の中に新規作成したdiv要素を追加
  box.appendChild( newdiv );
};
</script>



広告を非表示にする