JS获取标签内容的方法

 测试代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <div id="box">

     <p>这有个     第一个p</p>

 ​

     <p>这有个第二个p</p>

     <span>这是个

 ​

         span</span>

     <br>

 ​

     <a href="#">这有个a标签</a>

 </div>

 ​

 </body>

 </html>
1.innerHTML

此方法可获取标签中的所有的内容，包括标签、空格、文本、换行等。

想要清空标签的内容，innerHTML = ""；即可

如果想要设置标签中的内容，innerHTML = "填写想要设置的标签和内容"；设置内容时，会把原有的内容全部覆盖。

JS代码和效果图如下：

 <script>

     var box = document.getElementById('box');

     // 获取标签的内容

     var box1 = box.innerHTML;

     var box2 = document.getElementById('box').innerHTML;

     console.log(box1);

 </script>

 <script>

     //替换标签内容

     var box = document.getElementById('box');

     box.innerHTML = '<h3>你们被我h3替换啦！！！</h3>';

     console.log(box);

 </script>

2.innerText

此方法获取标签(及其子标签)中的所有文本，不会获取标签（或者说可以过滤掉所有的标签）。如果有多个空格或者是换行，解析为一个空格。

如果想要清空标签的内容，innerText = ""；即可

如果想要设置标签中的内容，innerText = "填写想要设置的标签和内容"；设置内容时，会把原有的内容全部覆盖。但是标签不会被解析，会直接以文本的形式打印在页面中。

 
<script>

     //获取标签机器子标签的所有文本内容

     var box = document.getElementById('box');

     var box2 = box.innerText;

     console.log(box2);

   </script>

 <script>

     //修改标签文本内容，内容中包含的标签不会被解析，会文本输出

     var box = document.getElementById('box');

     box.innerText = '<p>这里有个p，来看一下</p>'

 </script>

3.texContent

textContent来获取标签中的内容。但是textContent在过滤掉标签时，会保留标签结构。

innerText兼容性问题处理JS代码：

 <script>

 //    处理innerText的浏览器兼容性问题

     function getInnerText(element) {

         if (typeof element.innerText === 'string') {

             return element.innerText;

         } else {

             return element.textContent;

         }

     }

 </script>

JS获取标签内容的方法的更多相关文章

  1. JS获取div高度的方法

    有时在写页面时,需要获取一个div的高度.怎么才能获取呢?哈哈,先上结论.有两种方法. offsetHeight .clientHeight getComputedStyle offsetHeight ...

  2. （转）用JS获取地址栏参数的方法（超级简单）

    转自http://www.cnblogs.com/fishtreeyu/archive/2011/02/27/1966178.html 用JS获取地址栏参数的方法(超级简单) 方法一:采用正则表达式获 ...

  3. JS获取网页宽高方法集合

    JS获取网页宽高等方法的集合:document.body.clientWidth - 网页可见区域宽document.body.clientHeight - 网页可见区域高 document.body ...

  4. js获取url参数的方法

    js获取url参数的方法有很多. 1.正则分析 function getQueryString(name) { var reg = new RegExp("(^|&)" + ...

  5. js获取url传值的方法

    这篇文章主要介绍了js获取url传值的方法,实例分析了字符串分割与正则分析两种方法,并补充了一个基于正则匹配实现的js获取url的get传值函数,需要的朋友可以参考下 js获取url参数值: inde ...

  6. appium获取Toast内容的方法

    做自动化测试的时候,可能需要根据弹出的Toast提示来做下一步判断.这里记录一下获取Toast内容的方法,同时巩固一下显示等待的方法之一WebDriverWait. from selenium.web ...

  7. js获取checkbox值的方法

    js获取checkbox值的方法.分享给大家供大家参考.具体实现方法如下:<html> <head> <meta http-equiv="Content-Typ ...

  8. JS清除选择内容的方法

    本文实例讲述了JS清除选择内容的方法.分享给大家供大家参考.具体分析如下: 今天在做一个DIV拖动的效果,发现在拖动的时候会选中页面中的文本,于是找了一下JS清除选择的内容的相关信息. 在得到的结果中 ...

  9. JS---DOM---设置和获取---标签内容和文本内容

    设置和获取---标签内容和文本内容   总结---设置: 使用innerText主要是设置文本的, 设置标签内容, 是没有标签的效果的 innerHTML是可以设置文本内容 innerHTML主要的作 ...

随机推荐

  1. [信息安全] 05 X.509 公钥证书的格式标准

    X.509是# 公钥证书的格式标准, 广泛用于TLS/SSL安全通信或者其他需要认证的环境中.X.509证书可以由# CA颁发,也可以自签名产生. 1 Overview {#1-overview} X ...

  2. 青石巷-小L的爸爸

    小L有一个和谐的家. 爸爸具体职业不明,在统战部工作,刚开始和妈妈在一起工作. 妈妈是个会跳舞的语文老师. 奶奶之前也是个老师. 爷爷是个建筑师. 爸爸是最有文采的一个.在小L看来,他的一言一行,一举 ...

  3. c++ 中数组的引用

    在C++里,数组也是可以引用的. 代码如下: char str1[] = "abcde"; ] = str1; 解读第二句代码,括号的优先级最高,'str2'首先与'&'相 ...

  4. ubuntu下怎么配置/查看串口-minicom工具

    一.安装minicom工具: 可直接使用命令sudo apt-get install minicom来完成安装 上面的截图因为检测到我已经安装过了. 二.通过minicom工具配置串口: 1.启动mi ...

  5. H5页面优化

    1. 页面优化 优化内容: 提升网页响应速度:减少请求,文件大小,页面性能 对搜索引擎,屏幕阅读器友好: 提高可读性,可维护性:规范代码 优化操作: 减少请求:小图标使用sprite拼图合并为一个图片 ...

  6. JavaScript——event事件详解

    1.事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元 ...

  7. cache和内存屏障

    1 cache简介 1.1 cache缓存映射规则 tag查看cache是否匹配,set index |tag |set index |block offset ||20-bit |7-bit |5b ...

  8. 记网站部署中一个奇葩BUG

    网页中引用的文件名不要带 adv 等 近日在写好一个网页后就把他部署到apache上测试,结果用chrome访问时有个背景图片总显示不出来,但是用firefox等却一切正常, 关键是我用windows ...

  9. mysql简单备份与恢复

    1.备份 mysqldump -u root -h 127.0.0.1 -p --set-gtid-purged=OFF  abc > /data/mysqlBak/abc_20200206.s ...

  10. 阿里云服务器Web Deploy配置和使用Visual Studio进行Web项目发布部署遇到的坑

    阿里云的服务器一直闲着,烧着银子,当初花几千大洋开通,本想弄信息化的项目为所帮扶的贫困户脱贫助手,不想势单力薄,一直没有找到好的项目.最近大家都在众志成城抗击新肺疫情,于是又想能不能尽点自己的力量,于 ...