JS获取标签内容的方法
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获取标签内容的方法的更多相关文章
- JS获取div高度的方法
有时在写页面时,需要获取一个div的高度.怎么才能获取呢?哈哈,先上结论.有两种方法. offsetHeight .clientHeight getComputedStyle offsetHeight ...
- （转）用JS获取地址栏参数的方法（超级简单）
转自http://www.cnblogs.com/fishtreeyu/archive/2011/02/27/1966178.html 用JS获取地址栏参数的方法(超级简单) 方法一:采用正则表达式获 ...
- JS获取网页宽高方法集合
JS获取网页宽高等方法的集合:document.body.clientWidth - 网页可见区域宽document.body.clientHeight - 网页可见区域高 document.body ...
- js获取url参数的方法
js获取url参数的方法有很多. 1.正则分析 function getQueryString(name) { var reg = new RegExp("(^|&)" + ...
- js获取url传值的方法
这篇文章主要介绍了js获取url传值的方法,实例分析了字符串分割与正则分析两种方法,并补充了一个基于正则匹配实现的js获取url的get传值函数,需要的朋友可以参考下 js获取url参数值: inde ...
- appium获取Toast内容的方法
做自动化测试的时候,可能需要根据弹出的Toast提示来做下一步判断.这里记录一下获取Toast内容的方法,同时巩固一下显示等待的方法之一WebDriverWait. from selenium.web ...
- js获取checkbox值的方法
js获取checkbox值的方法.分享给大家供大家参考.具体实现方法如下:<html> <head> <meta http-equiv="Content-Typ ...
- JS清除选择内容的方法
本文实例讲述了JS清除选择内容的方法.分享给大家供大家参考.具体分析如下: 今天在做一个DIV拖动的效果,发现在拖动的时候会选中页面中的文本,于是找了一下JS清除选择的内容的相关信息. 在得到的结果中 ...
- JS---DOM---设置和获取---标签内容和文本内容
设置和获取---标签内容和文本内容 总结---设置: 使用innerText主要是设置文本的, 设置标签内容, 是没有标签的效果的 innerHTML是可以设置文本内容 innerHTML主要的作 ...
随机推荐
- Codeforces gym101755H Safe Path(bfs)
题意: 给以一个网格图,有起点终点和一些怪兽,可以上下左右走,不能走到距离怪兽曼哈顿距离为d以内的地方,问到终点最短路径 n*m<=2e5,d<=2e5 思路: 因为n*m的范围,不能直接 ...
- github三步走（init;add . ;commit -m "提交说明"）
掌握以下几点就基本能满足你平时使用了.按这个顺序来1.git安装,已经好了,略 -到这里本地代码推送到远程已经结束了 2.git本地命令操作-shift+右键-git init:初始化git环境-新建 ...
- node - 简单的爬虫案例
cherrio模块 安装 cnpm install cherrio 使用方法 const cheerio = require('cheerio') const $ = cheerio.load('&l ...
- 后台+下载（wget）+多个下载url
有时候我们需要让linux下载多个文件,并且后台下载,不去占用当前控制台. 比如我们需要下载中文维基的三个文件: https://dumps.wikimedia.org/zhwiki/latest/z ...
- C标准库与嵌入式
stddef.h,其中包括size_t,sizeof函数返回值,不同平台的大小不一致 Size and pointer difference types[edit] The C language sp ...
- centos6.5下编译安装单实例MySQL5.5
MySQL5.5版本安装3步曲: 1) cmake 2) make 3) make install 查看系统版本号 [root@meinv01 ~]# cat /etc/redhat-release ...
- 使用docker创建MySQL容器，并在springboot中使用
最近在看网上找了个springboot的项目试试,在项目中需要的MySQL版本是5.7,但是本机的MySQL只有5.5.因此想着在我的服务器上跑一个MySQL:5.7的容器解决这一问题,但是在实际操作 ...
- Python3标准库：itertools迭代器函数
1. itertools迭代器函数 itertools包括一组用于处理序列数据集的函数.这个模块提供的函数是受函数式编程语言(如Clojure.Haskell.APL和SML)中类似特性的启发.其目的 ...
- C#实现Excel操作——添加页签Sheet
C#实现对Excel操作,根据数据的类型不同或者来源不同会放在不同的页签中,C#实现添加页签代码如下:(path为文档保存的地址,dt为要处理的源数据) public void addSheet(st ...
- #《Essential C++》读书笔记# 第二章 面向过程的编程风格
基础知识 函数必须先被声明,然后才能被调用(被使用).函数的声明让编译器得以检查后续出现的使用方式是否正确--是否有足够的参数.参数类型是否正确,等等.函数声明不必提供函数体,但必须指明返回类型.函数 ...