IE，Edge和Chrome对隐藏元素的innerText和TextContent获取实验

最新推荐文章于 2022-01-12 10:02:47 发布

四瓣纸鹤

最新推荐文章于 2022-01-12 10:02:47 发布

阅读量1.8k

点赞数

分类专栏：代码分析文章标签： innerText TextContent

本文链接：https://blog.csdn.net/u014360189/article/details/79172317

版权

代码分析专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <table id="tblControl"  cellpadding="0" cellspacing="0">
    <tr>
        <td id = "tdtd" style="white-space:nowrap; display:none">
            <span id="lblDenKbn">F1</span>
        </td>
    </table>
    <script>
        console.log("'" + document.getElementById("tdtd").textContent + "'")
    </script>
</body>
</html>

<!--
1.textContent： IE,Edge,Chrome都会返回代码去掉html标签原始样子，类似pre输出。
现象：''内为控制台输出样式：
'
            F1
        '
下面为原始代码：
<td id = "tdtd" style="white-space:nowrap; display:none">
            <span id="ctl00_Biz10Body_gvReference_ctl03_lblDenKbn">F1</span>
        </td>
下面为删除html标签之后的结果显示，''里面的
'
            F1
        '


2.innerText:
      IE:无论元素是否隐藏都显示元素内容+一个空格
      Edge,Chrome：
                  当元素显示时，结果和IE相同【显示元素内容+一个空格】
                  当元素影藏时，结果与textContent的结果相同，为代码删除html标签之后的结果显示
-->