JS DOM获取元素节点文本内容

OGoodness

已于 2022-04-20 08:16:02 修改

阅读量8.2k

点赞数 1

分类专栏： JS 文章标签： javascript

于 2022-04-17 20:02:42 首次发布

本文链接：https://blog.csdn.net/qq_46275230/article/details/124234978

版权

JS 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

JS DOM获取元素节点文本内容

文章目录

JS DOM获取元素节点文本内容

innerText

获取纯文本

<body>
  <div class="one"><p><span>  小情歌  </span></p></div>

  <script>
    let one = document.querySelector(".one")
    console.log(one.innerText);
    ==>"小情歌"
</script>
</body>

innerHTML

获取带有格式+标签+纯文本

<body>
  <div class="one"><p><span>  小情歌  </span></p></div>

  <script>
    let one = document.querySelector(".one")
    console.log(one.innerHTML);
    ==>"<p><span>  小情歌  </span></p>"
</script>
</body>

textContent

获取带有格式+纯文本

<body>
  <div class="one"><p><span>  小情歌  </span></p></div>

  <script>
    let one = document.querySelector(".one")
    console.log(one.textContent);
    ==>"  小情歌  "
</script>
</body>

innerHTML注意点:

当使用innerHTML替换父元素div后,子元素也p也会改变,所以后面赋值的color:red在页面上不会生效

<body>
  <div class="one">
    <p>小情歌</p>
  </div>

  <script>
    let one = document.querySelector(".one")
    let oP = document.querySelector("p")


    oP.style.color = "blue" ==>此时p标签内容变为蓝色
    one.innerHTML = one.innerHTML + ""
    oP.style.color = "red" ==>此时p标签内部 还是蓝色,不会变为红色!!!
  </script>
</body>

请添加图片描述

OGoodness

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
JS DOM获取元素节点文本内容

JS DOM获取节点文本内容innerText获取纯文本<body> <div class="one"><p><span> 小情歌 </span></p></div> <script> let one = document.querySelector(".one") console.log(one.innerText); ==>"小情歌"</scrip
复制链接

扫一扫