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

OGoodness

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

阅读量9.4k

点赞数 1

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

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

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

版权

JS 专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍了在JSDOM环境下，如何通过innerText、innerHTML和textContent属性获取HTML元素的文本内容。innerText返回纯文本，innerHTML包含HTML标签和文本，而textContent则获取带有格式的文本。同时，文中还提到了innerHTML在替换内容时可能遇到的问题，即对样式的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

请添加图片描述