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

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