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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 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 构建精确任务处理应用