トップページ > コンテンツ > プログラミング入門 > Ajax入門 > JavaScript入門 > DOMアクセス方法 > 要素の選択方法

要素の選択方法としては、以下のように色々なバリエーションがある。
ちなみに、タグのさらに属性を取得するには
エレメント.getAttribute("属性名")や
エレメント.dataset.dataを除いた属性名等を利用する。

1.ID名から取得する方法

document.getElementById("ID名");

2.名前から取得する方法

<div name="test"></div>
・document.test;
・document.getElementsByName("名前");

3.タグの種類から取得する方法

・var test = document.getElementsByTagName("li");
  li.item(i);//<-liのi番目の要素。
・var table = document.all.tags("table"); //document.all.tagsからアクセスする方法。
  table.rows[0].cells[0].innerText; //テーブルの要素にアクセスできる。

4.クラス名から取得する方法

var test = document.getElementsByClassName("クラス名");

5.DOM要素として取得方法

・document.form['連想名'].elements[i];//<-elements[i]は適宜変更
・document.forms('連想名');
・document.body;//<-HTMLBodyElementを取得。

6.親ノードや子ノードを辿る方法

var test = document.getElementById("sample");
var test-child = test.childNodes; //子ノードの取得
alert(test-child[0].nodeValue;) //ノードの値の表示。子ノードとかはタグで囲まれるelementだけでなくテキストデータも子ノードとみなすことに注意。
                                  閉じないinputタグのようなものには子ノードは存在しない。次の要素等を示すnextSibling等で値を取るなりしよう。

childNodes等を活用した複雑なケースはこちらを参照。

7.XPathを使う

<script内の記述>
var node = document.evaluate("//div[@id='test1']/input[@class='class1']",    //<-divのidがtest1でその下のinputタグのクラスがclass1のものを取得
			document,
			null,
			XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
			null
		     );
alert(node.snapshotItem(0).value); //<-下のようにhtmlを記述すると、test2-classt表示される。
<htmlの記述>
<div id="test1">
       <input type="text" value="test2">
        <input type="text" class="class1" value="test2-class">
</div>

XPathについてはこちらを参照のこと。

8.CSSセレクタを使う方法

document.querySelector(".test"); //クラス名がtestのものを取得する。

CSSセレクタについてはこちらを参照のこと。