JavaScript DOM - getElementById で ID によって要素を選択

ID によって要素を取得するには、Document オブジェクトの getElementById() メソッドを使用します

let element = document.getElementById(id);Code language: JavaScript (javascript)

このメソッドは、ID が指定された文字列と一致する要素を返します。

id は大文字と小文字が区別されます。一致する要素が見つからない場合、このメソッドは null を返します。

id は一意であるはずなので、getElementById() メソッドを使用して要素を選択すると高速になります。

要素に ID がない場合は、querySelector() を使用して CSS セレクタを使用して要素を見つけることができます。

次の例を参照してください

<html>
<head>
  <title>JavaScript getElementById() example</title>
</head>
<body>
  <h1 id="message">JavaScript getElementById() Demo</h1>
  <div id="btn">
    <button id="btnRed">Red</button>
    <button id="btnGreen">Green</button>
    <button id="btnBlue">Blue</button>
  </div>
  <script src="js/app.js"></script>
</body>
</html>Code language: HTML, XML (xml)

JavaScript

const changeColor = (newColor) => {
    const element = document.getElementById('message');
    element.style.color = newColor;
}

let div = document.getElementById('btn');

div.addEventListener('click', (event) => {
    let target = event.target;
    switch (target.id) {
        case 'btnRed':
            changeColor('red');
            break;
        case 'btnGreen':
            changeColor('green  ');
            break;
        case 'btnBlue':
            changeColor('blue');
            break;
    }
});Code language: JavaScript (javascript)

このチュートリアルは、お役に立ちましたか？