初心者のWEBデザイン

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

20150411143621

Javascript DOM(Document Object Model) 2

DOM DocumentオブジェクトによるHTML要素の操作

HTMLドキュメントの階層構造

  • DOMを使用すると、HTMLドキュメント内のすべての要素を「html」を頂点とする階層構造でアクセスできます
  • この階層構造を「DOMツリー」と呼びます
  • DOMツリー内の個々の要素を「ノード」と呼びます

要素へのアクセス(要素の取得)

  • Documentオブジェクトのメソッドでよく利用されるのは、「getElementById」「getElementsByClassName」です
  • どちらも戻り値としてHTML要素を返します

ID属性を指定して要素を取得

  • 読み込まれたHTML文書の中から、要素のid属性の値で要素を検索して、データを取得する
  • id属性の値はHTML内に複数は存在しません。あてはまる要素は1つなのでElement(単数形)で記述します

document.getElementById( 'id属性 値' );

 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>プログラム実行テスト</title>
</head>
<body>
<h1>プログラム実行テスト</h1>
<p id="top">第1段落</p>
<p class="contents">第2段落</p>
<p id="botton">第3段落</p>
<script>
var i = document.getElementById( 'botton' );
console.log(i.innerHTML);
</script>
</body>
</html>

《実行結果》

f:id:bellsmarket:20150301003516p:plain

class属性を指定して要素を取得

  • 読み込まれたHTML文書の中から、要素のclass属性の値で要素を検索して、データを取得する
  • class属性の値はHTML内に複数存在する可能性があります。あてはまる要素は複数なのでElements(複数形)で記述します。

document.getElementByClassName( 'class属性の値' )

 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>プログラム実行テスト</title>
</head>
<body>
<h1>プログラム実行テスト</h1>
<p id="top">第1段落</p>
<p class="contents">第2段落</p>
<p id="botton">第3段落</p>
<script>
var c = document.getElementsByClassName( 'contents' );
alert(c[0].innerHTML);
</script>
</body>
</html>

《実行結果》

f:id:bellsmarket:20150301003511p:plain

 

DOMを使うことによって、要素の取得・属性や内容を変更することができます

topへ戻る