JavaScript - DOM 要素を取得する 5 つの方法

序章

この記事では主に、JS を通じて DOM 要素を取得する 5 つの方法を紹介します。

1. ID 名に従って要素を取得します: getElementById;

2. タグ名に従って要素を取得します。 getElementsByTagName は配列を返します。

3. クラス名に従って要素を取得します。 getElementsBClassName は配列を返します。

4. name 属性に従って要素を取得します。getElementsByName は配列を返します。

5. セレクターに従って要素を取得します。

1.querySelector: 要素を取得します。使用することをお勧めします。使用法は CSS を記述するのと似ています。

2.querySelectorAll: 要素の配列を返します。

1. ID 名に従って要素を取得します: getElementById

構文: document.getElementById("id 属性の値");

戻り値: 要素オブジェクト、つまり現在の ID のオブジェクトです (要素が取得された場合は要素が返され、取得した ID がページ上にない場合は null が返されます)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="d1"></div>
	</body>
	<script type="text/javascript">
		console.log(document.getElementById("d1"));
		console.log(document.getElementById("d2"));
	</script>
</html>

操作の結果は次のようになります。

<div id="d1"></div>
null

2. タグ名に従って要素を取得します: getElementsByTagName

構文: document.getElementsByTagName ("タグ名");

戻り値:擬似配列なので、ページ上に対応するラベルがない場合は空の配列を返します。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div name="d1"></div>
		<div name="d2"></div>
	</body>
	<script type="text/javascript">
		console.log(document.getElementsByTagName("div"));
		console.log(document.getElementsByTagName("p"));
	</script>
</html>

操作の結果は次のようになります。

HTMLCollection(2) [div, div, d1:div, d2:div]
HTMLCollection []

3. クラス名に従って要素を取得します: getElementsByClassName

構文: document.getElementsByClassName ("クラススタイル名");

戻り値: 擬似配列なので、ページ上に対応するラベルがない場合は空の配列を返します。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="c1"></div>
		<div class="c1"></div>
		<div class="c2"></div>
	</body>
	<script type="text/javascript">
		console.log(document.getElementsByClassName("c1"));
		console.log(document.getElementsByClassName("c2"));
	</script>
</html>

操作の結果は次のようになります。

HTMLCollection(2) [div.c1, div.c1]
HTMLCollection [div.c2]

4. name 属性の値に従って要素を取得します。 getElementsByName
構文: document.getElementsByName("name 属性の値");

戻り値: 擬似配列なので、ページ上に対応するラベルがない場合は空の配列を返します。

IE および Openg ブラウザでは、同じ ID を持つ要素がこの方法で取得されるため、この方法は推奨されません。

5. セレクター1.1 document.querySelector();に従って要素を取得します。

構文: document.querySelector("セレクター");

指定されたセレクターグループに一致するドキュメント内の最初の要素を返します。

1.2 document.querySelectorAll();

構文: document.querySelectorAll("セレクター");

指定されたセレクターグループに一致するドキュメント内のすべての要素を返します。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="c1"></div>
		<div class="c1"></div>
	</body>
	<script type="text/javascript">
		console.log(document.querySelector(".c1"));
		console.log(document.querySelectorAll(".c1"));
	</script>
</html>

操作の結果は次のようになります。

<div class="c1"></div>
NodeList(2) [div.c1, div.c1]

JavaScript - DOM 要素を取得する 5 つの方法

3. クラス名に従って要素を取得します: getElementsByClassName

おすすめ