JavaScript DOM - 通过 ID 选择元素 - getElementById

要通过 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)

本教程对您有帮助吗？