操作属性
我们获取到元素以后, 可以直接操作DOM的属性, 然后直接把效果展示在页面,把这种属性叫做操作属性
1.innerHTML
- 获取元素内部的 HTML 结构
- 我们也可以直接给这个属性重新赋值, 达到修改页面的效果
2.innerText
- 获取元素内部的文本 (只能获取到文本, 获取不到 html 标签)
- 我们也可以直接给这个属性重新赋值, 达到修改页面的效果
<body>
<div id="box">
<p>
<span>各位, 早上好~~~</span>
</p>
</div>
<script>
//0.先获取元素
var oDiv = document.querySelector('#box')
console.log(oDiv)
console.log(oDiv.innerHTML)
//给innerHTML重新赋值,可以修改页面效果
oDiv.innerHTML = '<p><span>各位, 早上好~~~这个文本是通过JS来设置的</span></p>'
console.log(oDiv.innerText)
//给innerText重新赋值,页面修改样式,但是会直接展示引号里面的内容
oDiv.innerText = '<p><span>各位, 早上好~~~这个文本是通过JS来设置的</span></p>'
</script>
</body>