JavaScript

getElementByIdでID名で要素を取得【JavaScript】

この記事では、getElementByIdを使ってID名から要素を取得します。

getElementById

使い方

getElementById('ID名')のようにすることで、該当する要素がひとつ取得できます。

<div>
  <p id="sample1">サンプル1</p>
  <p id="sample2">サンプル2</p>
</div>
var sample = document.getElementById('sample1');
console.log(sample);
// => <p id="sample1">

console.log(sample.innerHTML);
// => サンプル1

該当するIDがないとnullが返る

該当するIDが複数あるときにはundifineが返ってきます。

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

該当するIDが複数ある場合には最初の要素が返る

HTMLのID名は一意なので、同じものがない想定ですが、もしID名が複数あった場合には、最初の要素が返ってきます。

<div>
  <p id="sample2">サンプル2A</p>
  <p id="sample2">サンプル2A</p>
</div>
var sample2 = document.getElementById('sample2');
console.log(sample2.innerHTML);
// => サンプル2A

ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript
-

© 2020 ウェブつく Powered by AFFINGER5