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

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

1. innerHTML：获取双闭合标签里面的html内容，并且要识别标签。
2. innerText：获取双闭合标签里面的文本内容，不会识别html标签。
3. value是表单元素的特有属性，非表单元素没有value属性，如div，span等。
4. value在不同表单元素里有不同的意义，如button为按钮中的文本，input（text）为默认文本，textarea为默认文本。
5. 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>