JavaScript-6-innerHTML、innerText、value、valueOf的区别（简单计算器小例子）

最新推荐文章于 2022-04-10 13:02:48 发布

bdevy

最新推荐文章于 2022-04-10 13:02:48 发布

阅读量353

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_38328762/article/details/100019744

JavaScript 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了JavaScript中innerHTML、innerText、value和valueOf的区别。innerHTML用于获取和设置HTML元素的内含HTML内容，innerText则只获取文本内容不包含HTML标签。value是表单元素特有的属性，比如在button、input(text)和textarea中表示其默认文本。valueOf方法用于获取JavaScript对象的原始值。文中通过实例展示了这些属性和方法的用法，包括一个简单的计算器案例。

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

操作表单元素的文本内容用value；而innerHTML与innerText操作非表单元素的内容或文本内容

innerHTML：获取双闭合标签里面的html内容，并且要识别标签。
innerText：获取双闭合标签里面的文本内容，不会识别html标签。
value是表单元素的特有属性，非表单元素没有value属性，如div，span等。
value在不同表单元素里有不同的意义，如button为按钮中的文本，input（text）为默认文本，textarea为默认文本。
valueOf是js对象的方法，如
var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
var v=fruits.valueOf();
结果是：Banana,Orange,Apple,Mango

【例子1：】

<div id="box1" value="test1">
    我是box1
    <div id="box2" value="test2">我是box2</div>
</div>
<script>
    console.log(document.getElementById('box1').innerHTML); /* 我是box1 <div id="box2" value="test2">我是box2</div> */
    console.log(document.getElementById('box1').innerText); /* 我是box1 我是box2 */
    console.log(document.getElementById('box1').value); /* undefined */
    console.log(document.getElementById('box1').valueOf());
    // <div id="box1" value="test1">
    //  "
    //     我是box1
    //          "
    //     <div id="box2" value="test2">我是box2</div>
    // </div>
</script>

【例子2：】

<form action="" id="text2">
    <input type="text" id="text1" value="test3">
</form>
<script>
    /* 表单元素 input：*/
    console.log(document.getElementById('text1').innerHTML);  /* 空 */
    console.log(document.getElementById('text1').innerText); /* 空 */
    console.log(document.getElementById('text1').value); /* test3 */
    console.log(document.getElementById('text1').valueOf()); /* <input type="text" id="text1" value="test3"> */

    /* form：*/
    console.log(document.getElementById('text2').innerHTML);  /* <input type="text" id="text1" value="test..."> */
    console.log(document.getElementById('text2').innerText); /* 空 */
    console.log(document.getElementById('text2').value); /* undefined */
    console.log(document.getElementById('text2').valueOf()); 
    /* <form action="" id="text2">
     *    <input type="text" id="text1" value="test...">
     * </form>
     * */

【例子3：计算器】

<input type="text" id="a">
<span id="sp"></span>
<input type="text" id="b">
<span>=</span>
<input type="text" id="sum"><br/>
<button id="btn1" onclick="calculate('+')">+</button>
<button id="btn2" onclick="calculate('-')">-</button>
<button id="btn3" onclick="calculate('*')">*</button>
<button id="btn4" onclick="calculate('/')">/</button><br/>

<script>

    var t1=document.getElementById("a");
    var t2=document.getElementById("b");
    function calculate(op) {
        var n1=+(t1.value);
        var n2=+(t2.value);
        var sum=0;
        switch (op) {
            case '+':
                sum=n1+n2;
                break;
            case '-':
                sum=n1-n2;
                break;
            case '*':
                sum=n1*n2;
                break;
            case '/':
                sum=n1/n2;
                if (n2==0){sum='INF';}
                break;
        }
        document.getElementById('sp').innerText=op;
        document.getElementById('sum').value=sum;
    }
</script>