JavaScript DOM操作元素

目录

　　JavaScript 操作元素

　　改变元素内容

　　改变元素属性

　　获取标签内容

JavaScript操作元素

　　JavaScript的DOM操作可以改变网页内容、结构、样式，我们可以利用DOM操作

　　元素来改变元素里面的内容、属性等

改变元素内容

  element.innerText

　　特点：不识别html标签，是非标准的、去除空格和换行

  element.innerHTML

　　特点：识别html标签、W3C标准、保留空格和换行

  修改标签中的内容  案例：

<div id="one">hello world</div>
<p>time</p>

<script>
    var div = document.querySelector("#one")
    var p = document.querySelector("p")
    one.onclick = function () {
        // p.innerHTML = "2020 5 27"
        p.innerText = "2020 5 27"
    }
</script>

改变元素属性

案例：改变元素img中src的属性。

<!DOCTYPE html>
<html>
<body>

<img id="image" src="a.gif">

<script>
document.getElementById("image").src="b.jpg";
</script>

</body>
</html>

获取标签中的内容 

案例：获取p标签中的内容。

<p>
    time
    <span>sleep</span>
</p>

<script>
    var p = document.querySelector("p")
    console.log(p.innerText)
    console.log(p.innerHTML)
</script>

结果：

            time
            <span>sleep</span>

　　

 

posted @ 2022-01-25 10:12  zhuang6  阅读(27)  评论(0)    收藏  举报