textContent,innerText与innerHtml的区别以及Event事件兼容性问题
1、innerText 打印标签之间的纯文本信息，会将标签过滤掉，低版本的火狐浏览器不支持，而是支持textContent
打印结果是<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
<p>这是P标签</p>
<p>这是P标签</p>
<p>这是P标签</p>
</div>
</body>
<script>
var box = document.getElementById("box");
//打印标签之间的纯文本信息，会将标签过滤掉
var str = box.innerText;
console.log(str);
</script>
</html>
这是P标签
这是P标签
这是P标签
2、innerHtml 打印标签之间的内容，包括标签和文本信息，各浏览器都支持，但是高版本的浏览器会原样打印
打印结果是<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
<p>这是P标签</p>
<p>这是P标签</p>
<p>这是P标签</p>
</div>
</body>
<script>
var box = document.getElementById("box");
//打印标签之间的内容，包括标签和文本信息
var str = box.innerHTML;
console.log(str);
</script>
</html>
<p>这是P标签</p>
<p>这是P标签</p>
<p>这是P标签</p>
如果将div中的p标签不换行，打印的结果会原样输出
打印结果是<div id="box">
<p>这是P标签</p>
<p>这是P标签</p><p>这是P标签</p>
</div>
<p>这是P标签</p>
<p>这是P标签</p><p>这是P标签</p>
但是使用innerText 会有兼容性，低版本的火狐浏览器不支持使用，而是支持使用textContent，因此我们需要封装一个兼容版本，以及调用方法
<pre class="html" name="code">// 获取标签的对象
var box = document.getElementById("box");
// 调用方法
var str = getText(box);
console.log(str);
/**
* 封装了一个获取标签之间的文本信息兼容版本函数
* @param element 标签对象
* @returns {*}
*/
function getText(element) {
if(element.innerText) {
return element.innerText; //IE8及之前的浏览器支持，现在两者都支持
}else {
return element.textContent; //低版本的火狐支持
}
}
textContent、innerText 以及Event事件兼容性问题
今天在完成前端的简单练习时发现了一些兼容性的问题,百度后得以解决.
这里主要讨论Firefox与Chrome的兼容性问题.
textContent与 innerText
在javascript中, 为了获取节点的文本, 我们可以考虑使用节点的textContent、或者innerText,两者都并不能很好对所有浏览器进行兼容.
- textContent: 不支持低版本 IE; 兼容 Chrome / Firefox / Safari / Opera / IE9.
- innerText: 不支持Firefox; 兼容其他浏览器;
var div = document.getElementById("content");
function getInnerText(element) {
return (typeof element.textContent == "string") ? element.textContent : element.innerText;
}
function setInnerText(element, text) {
if (typeof element.textContent == "string") {
element.textContent = text;
} else {
element.innerText = text;
}
}
setInnerText(div, "Hello world!");
alert(getInnerText(div)); //"Hello world!"
event的兼容性问题
开发过程中,我们会给节点添加事件监听器,例如:
为了在HandleClick()函数中获取到触发该函数的对象,我们可能会用到event.target, 这段代码可以在Chrome上正常运行,但在Firefox中出现报错,element.addEventListener("click", HandleClick);
function HandleClick() {
console.log(event.target);
}
控制台将显示不存在event对象.
说明: Firefox的event只能在事件发生的现场使用(来自百度).
解决方法:
1.我们可以通过修改html标签, 传递event参数给相应的函数:
<button onclick = "HandleClick(event)">
这样便获取了event, 接下来就可以在HandleClick()函数中愉快地使用event了;(当然,event的某些属性兼容性也需要另外考虑)
2.不传递event对象, 直接在 HandleClick()函数中获取;
代码来自另一位博主:
此时我们的html文件中不需要传递event给HandleClick函数, 如下:unction HandleClick()
{
var evt = window.event || arguments.callee.caller.arguments[0]; // 获取event对象
var src = evt.srcElement || evt.target; // 获取触发事件的源对象
var iKeyCode = evt.keyCode || evt.which; //获取按钮代码
alert(src.value); // 打印该对象的value属性
if (window.navigator.userAgent.indexOf("IE")>=1){
evt.keyCode =0;
evt.returnValue=false;
}else{
evt.preventDefault();
}
}
<button onclick = "HandleClick()"
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
