您现在的位置: 365建站网 > 365学习 > textContent,innerText与innerHtml的区别以及Event事件兼容性问题

textContent,innerText与innerHtml的区别以及Event事件兼容性问题

文章来源:365jz.com     点击数:272    更新时间:2018-05-28 17:03   参与评论
innerText  与 innerHTML 都是打印标签之间的文本信息

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的兼容性问题

开发过程中,我们会给节点添加事件监听器,例如:

element.addEventListener("click", HandleClick);

function HandleClick() {
    console.log(event.target);
}

为了在HandleClick()函数中获取到触发该函数的对象,我们可能会用到event.target, 这段代码可以在Chrome上正常运行,但在Firefox中出现报错,
控制台将显示不存在event对象.

说明: Firefox的event只能在事件发生的现场使用(来自百度).

解决方法:

1.我们可以通过修改html标签, 传递event参数给相应的函数:

<button onclick = "HandleClick(event)">

这样便获取了event, 接下来就可以在HandleClick()函数中愉快地使用event了;(当然,event的某些属性兼容性也需要另外考虑)

2.不传递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();
           }
}

此时我们的html文件中不需要传递event给HandleClick函数, 如下:
<button onclick = "HandleClick()"

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (272人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------