Why is it that input.value is used instead of input.textContent. What is the difference between both?

For example, if I want to retrieve content from an input box

<input type="number">

I have to use this code

var input = document.querySelector("input");

input.value

instead of this one

input.textContent

Just want to get a clearer understanding of each.

Why is it that input.value is used instead of input.textContent. What is the difference between both?

For example, if I want to retrieve content from an input box

<input type="number">

I have to use this code

var input = document.querySelector("input");

input.value

instead of this one

input.textContent

Just want to get a clearer understanding of each.

• javascript
• dom

• 1 input.value is for form elements to get the value of the form element. input.textContent is for other elements to get the content of the element. – Get Off My Lawn Commented Mar 5, 2019 at 22:10
• 1 Possible duplicate of Javascript 'value' property – codeherk Commented Mar 5, 2019 at 22:36
• @codeherk How is it a duplicate, the link you added asks 'If "Value" is only used for manipulating text content of input type controls', while I'm asking for a clearer understanding of the difference between value and textContent. – Joan Commented Mar 5, 2019 at 22:44
• 2 textContent essentially gets all Text children of the node. Every Element node has this property. Think of it as litterally getting the text between the the opening and closing tags (i.e. <span>this text</span>). But it only works for elements that have children. An input element node doesn't have children. – Felix Kling Commented Mar 5, 2019 at 22:47
• 3 Well, if you think about the HTML, it makes sense: <input type="text" value="something">. There's no text between the start and end tags (since there's no end tag [technically there's no start tag either]), so no textContent, but there is a value attribute. – Heretic Monkey Commented Mar 5, 2019 at 22:53

2 Answers 2

From MDN:

[...] textContent returns the concatenation of the textContent of every child node, excluding comments and processing instructions. This is an empty string if the node has no children.

Essentially, textContent gives you a textual representation of what a node contains. Think of it as being everything between the opening and closing tags, e.g.

console.log(document.querySelector('span').textContent);

<span> this text </span> but not this one

<input> elements however cannot have children (content model: nothing). The value that is associated with them can only be accessed via the value property.

Only input elements have a "value". It represent the input data supplied by the user or provided initially by the code. Whereas textContent property sets or returns the text content of the specified node, and all its descendants.

textContent returns the concatenation of the textContent of every child node, excluding comments and processing instructions and if if the node has no children then textContent will be empty string.