@ JavaScript

DOM:要素・属性ノードの取得

getElementById() メソッド

要素を JavaScript から使うためにはドキュメントツリーからノードを取得する必要があります。getElementById() は id 属性の値を元にノードを取得するメソッドです。

format

取得された要素 = document.getElementById('ID名');

dom_id.html

<div id="myId">id を持つ div 要素</div>

<script>
myDiv = document.getElementById('myId');
alert(myDiv.innerHTML);
</script>

getElementsByTagName() メソッド

要素名を使ってノードリストを取得するメソッドです。

format

取得されたノードリスト = document.getElementsByTagName('要素名');

dom_tagname_01.html

<div>1つ目の div</div>
<div>2つ目の div</div>
<div>3つ目の div</div>

<script>
divs = document.getElementsByTagName('div');
var div = divs[0];
alert(div.innerHTML);
</script>

複数の要素を取得取得するためにはループを使う必要があります。

dom_tagname_02.html

<div>1つ目の div</div>
<div>2つ目の div</div>
<div>3つ目の div</div>

<script>
divs = document.getElementsByTagName('div');
for (var i=0; i<divs.length; i++) {
  var div = divs[i];
  alert(div.innerHTML);
}
</script>

getElementsByClassName() メソッド

クラス名を使ってノードを取得するメソッドです。

format

取得されたノードリスト = document.getElementsByClassName('クラス名');

dom_classname.html

<div class="className">div 要素</div>
<p class="className">p 要素</p>
<span class="className">span 要素</span>

<script>
var elements = document.getElementsByClassName("className");
/*
alert(elements.length);
*/
/*
var element = elements.item(0);
alert(element.innerHTML);
*/
for (var i=0;i<element.length;i++) {
  element[i].style.color = "red";
}
</script>