本文介绍了如何使用JavaScript操作DOM元素，包括使用innerText属性替换文本内容（不解析标签），以及通过innerHTML属性添加HTML结构。还展示了如何通过JS设置和修改HTML标签的常见属性如SRC和title。
操作元素内容
-
目标：能够修改元素文本更换内容
-
DOM对象都是根据标签生成的，所以操作标签，本质上就是操作DOM对象
-
就是操作对象使用的点语法
-
如果想要修改标签元素里面的内容，则可以使用以下几种方式：
-
学习路径 ：
- 对象.innerText属性
- 对象.innerHTML属性
-
元素innerText属性
- 将文本添加/更新到任意标签位置
- 显示纯文本，不解析标签
-
例：
-
<body> <div class="box">我是文字内容</div> <div class="box1">我要更换</div> <script> const obj={ name:'pink老师' } console .log(obj.name) // 获取元素 const box =document.querySelector('.box') // 修改文字内容 对象.innerText属性 console.log(box.innerText) //获取文字内容 box.innerText='我是一个盒子'//修改文字内容 // 但是 box.innerText='<h1>我是一个盒子</h1>'//这样标签只会被识别为字符串，不解析标签 const box1=document.querySelector('.box1') console.log(box1.innerHTML) box1.innerHTML='<strong>我变了啊</strong>' </script> </body> ``` {data-source-line="665"}
-
修改元素常用属性
-
操作元素常用属性
- 还可以通过JS设置/修改标签元素属性，比如通过SRC图片
- 常见的属性比如：herf,title,src等
- 语法：
js 对象.属性=值 - 例：
-
<body> <img src="./图片/歼-16没有短板.png" alt="" title="歼-16没有短板"> <script> // 获取元素 const pic=document.querySelector('img') // 操作元素 pic.src='./图片/老乡出动.png' pic.title='老乡出动' </script> </body> ``` {data-source-line="686"}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
