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. zabbix4.0的安装与配置

    #安装zabbix监控首先的先安装LNMP环境,在这里我采用事先准备好的脚本进行安装LNMP环境 脚本内容如下: #!/bin/bash # DATE:Wed Jan # hw226234@126.c ...

  2. BZOJ2326 [HNOI2011]数学作业(分块矩阵快速幂)

    题意: 定义函数Concatenate (1 ..N)是将所有正整数 1, 2, …, N 顺序连接起来得到的数,如concatenate(1..5)是12345,求concatenate(1...n ...

  3. Go语言实现：【剑指offer】把二叉树打印成多行

    该题目来源于牛客网<剑指offer>专题. 从上到下按层打印二叉树,同一层结点从左至右输出.每一层输出一行. 需要分层,二维数组. Go语言实现: /** * Definition for ...

  4. 构建ROP链实现远程栈溢出

    通常情况下栈溢出可能造成的后果有两种,一类是本地提权另一类则是远程执行任意命令,通常C/C++并没有提供智能化检查用户输入是否合法的功能,同时程序编写人员在编写代码时也很难始终检查栈是否会发生溢出,这 ...

  5. 《自拍教程5》Python自动化测试学习思路

    前提:熟悉测试业务及流程 任何Python自动化测试的前提,都是必须先熟悉实际测试业务. 任何脱离实际测试业务的自动化都是噱头且无实际意义! 测试的基本流程基本是: 测试需求分析,测试用例设计与评审, ...

  6. 使用Git和Svn

    一. 使用SVN 1. 下载tortoiseSVN 2. 右键SVN checkout(下载项目到本地) 3. 更新和提交 二. 使用GIT 1. 下载git 2. 下载tortoiseGit 3. ...

  7. Nginx-2.初学者使用

    原文 Nginx有一个master进程和几个worker进程.master进程用来读取和评估配置文件,以及维护worker进程.worker进程用来处理实际的请求.Nginx使用事件模型和基于操作系统 ...

  8. VFP的数据策略：高级篇

    VFP的数据策略:高级篇 引语 在“VFP中的数据策略:基础篇”一文中,我们研究了VFP应用程序中访问非VFP数据(如SQL Server)的不同机制:远程视图.SQL Passthrough.ADO ...

  9. centos容器yum安装JDK环境

    1.yum命令安装jdk 选择版本安装 -openjdk java--openjdk-devel 或者如下命令,安装jdk1.8.0的所有文件 -openjdk*yum install -y java ...

  10. jq模糊匹配（qq:2798641729）

    图灵学院--Java高级架构师-互联网企业级实战VIP课程(价值6380)(qq:1324981084) jq是一般程序员在前台开发的时候都会使用的技术,其中模糊匹配查询在动态添加标签的时候经常用到, ...