【JavaScript】要素を取得する主な方法

要素を取得する主な方法

• document.getElementById()
• document.querySelector()
• document.querySelectorAll()

以下でそれぞれ説明

document.getElementById()

指定したIDを持つ要素を取得する
存在しない場合、nullが返る

HTML

<span id="spanText">Hello</span>

JavaScript

var spanText = document.getElementById('spanText');
console.log(spanText); //<span>
console.log(spanText.textContent); // "Hello"

var divText = document.getElementById('divText');
console.log(divText); // null

document.querySelector()

CSSセレクタでマッチした最初の要素を取得する

CSSセレクタとは
CSSによるデザイン指定をどのHTML要素に適用させるかを指定するもの

HTML

<p class="foo">Hello</p>

JavaScript

var foo01 = document.querySelector('.foo');
console.log(foo01); // <p>
console.log(foo01.textContent); // Hello

document.querySelectorAll()

CSSセレクタでマッチした要素を取得して、NodeListとして返す

HTML

<p class="foo">Text 1</p>
<ul>
  <li>Text 2</li>
  <li class="foo">Text 3</li>
  <li>Text 4</li>
  <li>Text 5</li>
</ul>
<ul id="textList">
  <li class="foo">Text 6</li>
  <li>Text 7</li>
</ul>

JavaScript

var foo01 = document.querySelectorAll('.foo')

console.log(foo01); //NodeList (3) [p.foo, li.foo, li.foo]

foo01.forEach(function (elem) {
  console.log(elem.textContent);
});
// "Text 1"
// "Text 3"
// "Text 6"

/* getElementByIdとの組み合わせ */
var
  textList = document.getElementById('textList'),
  foo03 = textList.querySelectorAll('.foo');

foo03.forEach(function (elem) {
  console.log(elem.textContent);
});
// "Text 6"

取得したNodeListの使い方(一例)

配列に変換する

JavaScript

var elem =[].slice.call(document.querySelectorAll('section'));

slice()
配列を新しい配列オブジェクトに作成して返すメソッド

call()
他のオブジェクトが持つメソッドを自分のメソッドのように呼び出すメソッド

参考

追記：修正しました(2021-05-19)