innerText、innerHtml、textContent、value分别的作用和相互之间的区别

Question

题目可能回答起来有点复杂，我在Google上没有找到合适的答案所以来此求助。

介于回答起来可能麻烦，童鞋可以将自己总结发布的网址或博客相关文章地址给我也万分感谢

Answer 1

innerHtml 属性源自 Element.innerHtml

innerText 属性源自 Node.innerText

textContent 属性源自 Node.textContent

value 属性源自 HTMLInputElement.value

比如：获取到一个div元素，

var div = document.getElementByID('div');
// div的所有属性继承关系 HTMLElement -> Element -> Node -> EventTarget -> Object -> null
// div.innerHTML 方法继承自 HTMLElement -> Element
// div.innerText 方法继承自 HTMLElement -> Element -> Node
// div.textContent 方法继承自 HTMLElement -> Element -> Node 

var input = document.getElementById('input');
// input的所有属性继承关系 HTMLInputElement -> HTMLElement -> Element -> Node -> EventTarget -> Object -> null
// input.value 属性来自 HTMLInputElement

其作用应该有了解过，不赘述。

Answer 2

瞎说, innerText 和 textContent 是作用一样的属性, 在比较早的firefox版本里只支持innerText, 不支持 textContent;

都是获取元素内的所有文本

innerHTML 是所有浏览器都支持的, 返回标签内容的HTML形式的文本

value是另一个概念, 基本上是表单元素特有的, 比如:input/textarea/select 之类. 意义是"值", 而不是"文本", 比如

<select>
   <option value="这里是value">这里是text</option>
</select>

Answer 3

innerText一般是html标签内的内容，比如<p>123</p> //123
innerHtml一般是html的标签+内容，比如<p>123</p> //<p>123</p>
value一般是用在input里的，比如<input type="text" value="123" /> //123
textContent会把所有字节点内容呈现出来，比如<ul><li>123</li><li>abc</li></ul> //123abc

Answer 4

这篇文章中做了很详细的解释，可以参考参考。https://yq.aliyun.com/article...