JavaScript按id获取元素并设置值

阅读时长 2 分钟读完

在前端开发中,经常需要通过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

纠错
反馈