【Web】Web-API（No.60）innerText和textContent_web高级resulttext.textcontent-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43251850/article/details/99409701

本文深入探讨了innerText和textContent两个DOM属性的区别与应用。通过实例演示了如何使用这两个属性来设置和获取HTML元素中的文本内容，特别关注它们在不同浏览器环境下的兼容性表现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

innerText和textContent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>innerText和textContent</title>
</head>
<body>
<button id="btn">点击</button>
<div id="box" class="box">OMG!也太好看了叭！</div>
<script src="common.js"></script>
<script>
    // my$("btn").onclick = function(){
    //     //设置div中的文本内容
    //     my$("box").innerText = "买它！";
    //     my$("box").textContent = "不不不！没钱！";
    //     console.log(my$("box").innerText);
    //     console.log(my$("box").textContent);
    // }
    /*
    * 设置标签中的文本内容，使用textContent，ie8不支持
    * 设置标签中的文本内容，使用innerText，都支持
    *
    * 获取标签中的文本内容，使用textContent，ie8返回的是undefined
    * 获取标签中的文本内容，使用innerText，返回对应的文本内容
    * */

    //封装兼容代码的函数

    //设置任意的标签中的任意文本内容
    // function setInnerText(element,text){
    //     //判断是否支持这个属性
    //     if(element.textContent == undefined){
    //         //说明不支持
    //         element.innerText = text;
    //     }else{
    //         element.textContent = text;
    //     }
    // }
    // my$("btn").onclick = function(){
    //     setInnerText(my$("box"),"没钱！不买！");
    // }

    //封装 获取任意标签中的文本内容，需要返回值
    function getInnerText(element){
        if(element.textContent == undefined){
            return element,innerText;
        }else{
            return element.textContent;
        }
    }
    my$("btn").onclick = function(){

    }
</script>
</body>
</html>

//通过id名获取的元素
function my$(id){
    return document.getElementById(id);
}

//通过标签吗获取的元素
function ele$(element){
    return document.getElementsByTagName(element);
}