【JavaScript】DOM操作解説（getElementById, getElementsByTagName, getElementsByClassName, getElementsByName）
以下のリンクをクリックすると、それぞれのセクションにジャンプできます。
- document.getElementById(id)の解説
- element.getElementsByTagName(tagName)の解説
- element.getElementsByClassName(className)の解説
- element.getElementsByName(name)の解説
document.getElementById(id)の解説
document.getElementByIdは、指定したidを持つ要素を取得するためのメソッドです。このメソッドは、id属性がユニークであることを前提としています。最初に一致した要素が返され、該当する要素が存在しない場合はnullが返されます。
基本例
<!DOCTYPE html>
<html>
<body>
<h1 id="title">Hello World!</h1>
<script>
var element = document.getElementById("title");
console.log(element.textContent); // "Hello World!"
</script>
</body>
</html>
動的なスタイル変更の例
<!DOCTYPE html>
<html>
<body>
<button id="changeColor">色を変更</button>
<p id="text">このテキストの色を変えます。</p>
<script>
var button = document.getElementById("changeColor");
var text = document.getElementById("text");
button.addEventListener("click", function() {
text.style.color = "blue";
});
</script>
</body>
</html>
element.getElementsByTagName(tagName)の解説
getElementsByTagNameは、指定したタグ名を持つ全ての要素を取得します。取得結果はHTMLCollectionとして返されます。このメソッドは、documentや特定の要素から呼び出すことができます。
基本例
<!DOCTYPE html>
<html>
<body>
<ul>
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
</ul>
<script>
var items = document.getElementsByTagName("li");
console.log(items.length); // 3
</script>
</body>
</html>
ループを使った要素へのアクセス
<!DOCTYPE html>
<html>
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<script>
var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
paragraphs[i].style.fontWeight = "bold";
}
</script>
</body>
</html>
element.getElementsByClassName(className)の解説
getElementsByClassNameは、指定したクラス名を持つ全ての要素を取得します。複数のクラスを指定する場合は、クラス名をスペースで区切ります。
基本例
<!DOCTYPE html>
<html>
<body>
<div class="box">ボックス1</div>
<div class="box">ボックス2</div>
<div>ボックスではない</div>
<script>
var boxes = document.getElementsByClassName("box");
console.log(boxes.length); // 2
</script>
</body>
</html>
特定の要素を操作
<!DOCTYPE html>
<html>
<body>
<div class="highlight">強調1</div>
<div class="highlight">強調2</div>
<script>
var highlights = document.getElementsByClassName("highlight");
highlights[0].style.backgroundColor = "yellow";
</script>
</body>
</html>
element.getElementsByName(name)の解説
getElementsByNameは、指定したname属性を持つ全ての要素を取得します。主にフォームの操作に使われます。
フォーム操作の例
<!DOCTYPE html>
<html>
<body>
<form>
<input type="radio" name="choice" value="A"> A<br>
<input type="radio" name="choice" value="B"> B<br>
</form>
<script>
var choices = document.getElementsByName("choice");
console.log(choices.length); // 2
</script>
</body>
</html>
選択された値を取得
<!DOCTYPE html>
<html>
<body>
<form>
<input type="checkbox" name="fruit" value="Apple"> Apple<br>
<input type="checkbox" name="fruit" value="Banana"> Banana<br>
<input type="checkbox" name="fruit" value="Cherry"> Cherry<br>
<button id="showSelection">選択を表示</button>
</form>
<script>
var button = document.getElementById("showSelection");
button.addEventListener("click", function() {
var fruits = document.getElementsByName("fruit");
fruits.forEach(function(fruit) {
if (fruit.checked) {
console.log(fruit.value);
}
});
});
</script>
</body>
</html>