📌  相关文章
📜  按 id 选择元素 - Javascript (1)

📅  最后修改于: 2023-12-03 14:54:39.296000             🧑  作者: Mango

按 id 选择元素 - Javascript

在 Javascript 中，选择元素是一个基本操作，它可以让我们通过代码来定位并控制页面中的元素。而其中，按 id 选择元素是最常用的方法之一，因为每个元素都应该拥有唯一的 id 属性。

使用 getElementById 方法

要按 id 选择元素，我们可以使用 JavaScript 中的 getElementById() 方法。

const element = document.getElementById('element-id');

上面的代码片段通过 getElementById() 方法获取了一个具有 element-id 属性的元素，并将其赋值给变量 element。

  • getElementById()方法的参数是一个字符串，表示需要获取的元素的 id 属性值。
  • 如果找到了对应 id 的元素，则会返回该元素；如果找不到对应 id 的元素，则返回 null。
演示代码

下面是一个简单的使用 getElementById() 方法的 HTML 页面，可以更好地理解该方法的用法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按 id 选择元素 - Javascript</title>
</head>
<body>
    <div id="demo">Hello World!</div>

    <script>
        const element = document.getElementById('demo');
        element.style.color = 'red';
    </script>
</body>
</html>

上面的代码片段中，我们定义了一个带有 id 属性的 div 元素，并将其赋值给了 element 变量。接着，我们使用 style.color 属性修改该元素的字体颜色。

总结

按 id 选择元素是一个基本的 JavaScript 操作，使用 getElementById() 方法即可轻松实现。这种方法简单易用，而且可读性高，因此非常适用于处理简单的 DOM 操作。