操作属性

我们获取到元素以后, 可以直接操作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>

获取元素后,有哪些DOM属性是可以直接操作且能把效果展示在页面上?

操作属性

1.innerHTML

2.innerText