在前端开发中，经常需要通过JavaScript来获取HTML页面中的元素，并进行修改或者操作。其中最常见的方式是使用元素的id来获取元素。
获取元素
可以使用 document.getElementById() 方法来按照元素的id获取元素。该方法接收一个参数，即要获取的元素的id，返回一个表示该元素的对象。示例代码如下：
----- ------- - --------------------------------------
上面的代码会获取id为 my-element 的元素，并将其保存在 element 变量中。如果该元素不存在，getElementById() 方法会返回 null。
除了 getElementById() 方法，还有其他类似的方法可以获取元素，比如 getElementsByClassName()、getElementsByTagName() 等等。这些方法的使用方法类似，只是传入的参数不同而已。
设置元素值
通过获取元素后，我们可以对其进行一系列的操作，比如修改元素的属性或者内容。最常见的操作之一就是设置元素的文本内容或者HTML内容。
设置文本内容
使用 textContent 属性可以设置元素的文本内容。示例代码如下：
----- ------- - -------------------------------------- ------------------- - ------- --------
上面的代码会将id为 my-element 的元素的文本内容设置为 Hello, world!。
设置HTML内容
如果要设置元素的HTML内容，可以使用 innerHTML 属性。需要注意的是，使用 innerHTML 属性时要注意XSS攻击的风险。示例代码如下：
----- ------- - -------------------------------------- ----------------- - ---------- ------------
上面的代码会将id为 my-element 的元素的HTML内容设置为一个段落元素，其内容为 Hello, world!。
指导意义
以上就是JavaScript按id获取元素并设置值的详细介绍。在开发中，我们经常需要使用这些操作来实现一些功能，比如动态修改页面的内容、响应用户的操作等等。同时，也需要注意安全性问题，避免XSS攻击等风险。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/24271