【JS】DOM ～ 基本編 / getElementById() ～

JavaScript

■ はじめに

https://dk521123.hatenablog.com/entry/2011/01/07/012520

の続き。

【１】要素の操作

ポイント 

* document.getElementById()を利用する
 => 指定したIDの要素のオブジェクト取得

１）サンプル

例１ 

<html>
<head>
<title>サンプル</title>
<script type="text/javascript">
function sample()
{
   var resultValue = document.getElementById("inputId").value;
   alert('あなたの入力した値：' + resultValue);
}
</script>
</head>
<body>
  <form name="form1" id="id_form1" action="">
    <p><label>入力欄：<input name="textBox1" id="inputId" type="text" value="" /></label></p>
    <input type="button" value="Click Me!" onclick="sample();" />
  </form>
</body>
</html>

例２ 

<html>
<head>
<title>サンプル</title>
<script type="text/javascript">
function sample()
{
   var element = document.getElementById("here")
   element. innerHTML = '<div id="here">押した?</div>'; 
}
</script>
</head>
<body>
<button onclick="sample()">ボタン押下で「ここに表示」が「押した?」に変わる</button>
<div id="here">ここに表示</div>
</body>
</html>

【２】子要素のリストを取得

１）サンプル

function findChildrenElements(targetID)
{
   var element = document.getElementById(targetID);
   var children = element.childNodes;

   alert("1番目の子要素 : " + children[0]．innerHTML + " ."); 
}

補足：innerHTMLについて 

 * 特定のHTML要素の中身を動的に書き換える

<p id="example">HERE</p>
があったとして、
document .getElementById ('example').　innerHTML = '<p>TEST IS SUCCESSFUL!</p>'; 
を実行させれば、『<p id="example">HERE</p>』は、動的に『<p>TEST IS SUCCESSFUL!</p>』に変わる。

参考文献

http://www.openspc2.org/reibun/javascript2/DOM/node/0005/index.html
http://javascriptist.net/ref/element.childNodes.html
innerHTML
http://www.nishishi.com/javascript/2007/innerhtml.html
http://park.geocities.jp/gdfsm000/ireport/ireport04.html

【３】子要素を全て削除

１）サンプル

function removeAllChildrenElements(targetID)
{
   var element = document.getElementById(targetID);

   while(element.firstChild){
      element.removeChild(element.firstChild);
   }
}

参考文献

http://yakinikunotare.boo.jp/orebase/index.php?Javascript%2F%A4%B9%A4%D9%A4%C6%A4%CE%BB%D2%CD%D7%C1%C7%A4%F2%BA%EF%BD%FC%A4%B9%A4%EB

関連記事

DOM ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2011/01/07/012520
JavaScript覚書
https://dk521123.hatenablog.com/entry/2010/01/15/191626