JavaScript DOM操作案例点击按钮设置所有的p标签的内容

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 
 7 </head>
 8 <body>
 9 <input type="button" value="点击修改内容" id="bt"/>
10 
11 <p>我是p标签</p>
12 
13 <p>我是p标签</p>
14 
15 <p>我是p标签</p>
16 
17 <p>我是p标签</p>
18 
19 <p>我是p标签</p>
20 <script>
21     //通过id获取按钮,注册点击事件,添加事件处理函数
22     document.getElementById("bt").onclick = function () {
23         //获取所有的p标签,返回值是一个数组
24         var pObj = document.getElementsByTagName("p");
25         //遍历数组
26         for (var i = 0; i < pObj.length; i++) {
27             //修改每个p标签的内容
28             pObj[i].innerText = "这是一个p";
29         }
30     };
31 </script>
32 </body>
33 </html>
复制代码

 

posted @   {颜逸}  阅读(1143)  评论(0编辑  收藏  举报
编辑推荐:
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
阅读排行:
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· 深入理解Mybatis分库分表执行原理
· 使用 Dify + LLM 构建精确任务处理应用
点击右上角即可分享
微信分享提示