We Keep Coding

Get value of input type text from innerHTML

I have the following code:
console.log(cleValTab.children[0].children[0].children[0].innerHTML);
which outputs
<input type="text" value="XXXX" class="table-textbox" size="50">
in cosole.
Now I need to extract the value and I tried adding .value but I got undefined.
Adding an id is not an option, since I'm looping through several text boxes.

innerHTML is a string not a DOM. You can't read attributes from it without converting it back to a DOM.
So don't use innerHTML in the first place. Get the DOM node and read its attribute value.
console.log(cleValTab.children[0].children[0].children[0].querySelector("input").getAttribute("value"))
(Use the value property instead of getAttribute if you want the current value instead of the attribute value. Since you were trying to read from innerHTML I assume you want the attribute value).

Cannot access dynamically created span using GetElementsByName? [duplicate]

So I'm learning to manipulate the DOM and I noticed one interesting thing:
Let's say I want to set the name attribute of an element by using the "." dot notation:
element.name = "someName";
console.log(document.getElementsByName("someName")[0]); // returns "undefined"??
However if I use the document.setAttribute() method, it works fine:
element.setAttribute("name", "someName");
console.log(document.getElementsByName("someName")[0]); // returns the element like it should.
Not sure why the dot notation method doesn't work in the first case.
Why does this happen?

My guess (because you didn't specify the element type) is the element normally does not have a name attribute, so setting the DOM property like that won't work.
For example, setting the name property on an input element will work. Setting it on a div will not.
It will work, however, with setAttribute().
jsFiddle.

To extend the answers provided by some of the others ...
The attribute 'name' is only considered valid DOM for a few specific objects. According to https://developer.mozilla.org/en-US/docs/DOM/element.name those objects are:
<a>, <applet>, <button>, <form>, <frame>, <iframe>, <img>, <input>,
<map>, <meta>, <object>, <param>, <select>, and <textarea>
For these objects you can set, get and change the name attribute using object.name BUT FOR ANY OTHER DOM OBJECT the attribute 'name' is a custom attribute and must be created using SetAttribute() or by adding it to the HTML declaration. Once it is created, you can acces it using setAttribute() and getAttribute() or you can refer to its value directly using object.attributes.name.value take a look at http://jsfiddle.net/radiotrib/yat72/1/ for an example. BTW - the alert box on load is intentional - check the code to see why ...

(Attempting to explain part of the above post a better, separately, since it is already went into -ve rating, and belief in that post will be less. Help improve this further if not better.)
*** The property
When you use, element.name, you are accessing an existing property named "name" or setting its value.
Example 1:
var div1 = document.getElementById("div1");
div1.textContent = "2";
*** The attribute
but, while using, element.setAttribute('name','someName'), you are actually setting the attribute named 'name'.
This attribute can be an existing property OR a custom one we want:
Example 2:
var h1 = document.getElementById("H1");
h1.setAttribute("class", "democlass");
Example 3:
var d = document.getElementById("d1");
d.setAttribute("name1", "value1");

when you use, element.name, you are accessing the property/creating a property named "name" and setting its value.

when you use, element.name, you are accessing the property/creating a property named "name" and setting its value.
but,
while using, element.setAttribute('name','someName'), you are actually setting the attribute 'name'.
IE8 and below treats the property and attribute as same, the bug has been fixed in IE9 and above.
Safari, FireFox, Chrome treat property and attribute differently.
However, you can always create a new property of your choice if you wish to do so.

<head>
<script>
function test($count) {
document.getElementById("test1").setAttribute("name","file-upload_" + $count);
}
</script>
</head>
<body>
<p>some content</p>
<input id="test1" type="file" name="file-upload" id="file-upload" />
<p>some other content</p>
<script>test(1);</script>
</body>

what is the best use of document.getElementById("id").value

what DOM elements is document.getElementById("id").value used for ?
i mean can i use it with an element like heading tags etc
or it is used with the items have a value attribute [textboxes ] etc
and what is the difference .innerHTML and .value properties

what DOM elements is document.getElementById("id").value used for ?
You can use getElementById to get a reference to any element that has an id attribute on it.
and what is the difference .innerHTML and .value properties
They're completely unrelated. innerHTML is the HTML representation of the contents of the element. value is the value of a form control element like an input.
For example, suppose we have:
<div id="foo">Hey <strong>you</strong></div>
You can do this:
console.log(document.getElementById("foo").innerHTML);
...which will likely give you something like this in the console:
Hey <STRONG>you</STRONG>
Note that this is not exactly the same as what was in your document; when you read the value of innerHTML, the browser makes a string from what's actually currently present in the DOM, using its rules for how to create that string.
You can also set it to change the contents.
In contrast, with a form control:
<input id="bar" type="text" value="Text field value">
console.log(document.getElementById("bar").value);
...which gives you
Text field value

Setting the value is normally used for input/form elements. innerHTML is normally used for div, span, td and similar elements.
Here is a link showing the use of ID.value:
http://www.javascript-coder.com/javascript-form/javascript-form-value.phtml
and
The getElementById() method accesses the first element with the specified id.
and
yes, you can use it with an element like heading tags etc

getElementById is not working as expected?

I have this simple html markup:
<form id="form" action="lalala">
<input type="text" id="action"/> //a reserved property name id
<input type="submit" id="submit"/> //same here
</form>
However -- running :
alert(document.getElementById('form').action);
alerts
and not "lalala" like it should.
It seems thatgetElementById's props is not accessed directly
Why is that ? ..... it can actually mean that I have to know all the form element's props (in order not to provide reserved prop ID to a descendant element) ?

This has nothing to do with getElementById and everything to do with the properties of an HTML Form Element object.
a reserved property name id
It isn't "reserved", it just has a value defined by default
If you have a form control in a form, and that control has an id (or name) that matches a property that form elements have, then a reference to that form control will overwrite the normal value of that property.
When a form element is indexed for indexed property retrieval, the user agent must return the value returned by the item method on the elements collection, when invoked with the given index as its argument.
— http://www.w3.org/TR/html5/forms.html#the-form-element
This sucks, but is how the DOM for forms has worked since there was such a thing.
Since that particular property maps on to an attribute value, you can use getAttribute and setAttribute to manipulate it instead. (This won't work in old IE (which has a broken implementation of those methods that operate on properties) and won't work for some other properties (like the submit method)).
it can actually mean that I have to know all the form element's props (in order not to provide reserved prop ID to a descendant element)
Yes.

try like this :
alert(document.getElementById('form').getAttribute("action"));

You can access it through attributes:
document.getElementById('form').attributes["action"].value

You can't write .action in this situation because you should access it threw it's attribute and not property, this is an attribute, therefore, you need to getAttribute instead and it will work :)
alert(document.getElementById('form').getAttribute("action"));

Javascript: setAttribute() v.s. element.attribute = value to set "name" attribute

So I'm learning to manipulate the DOM and I noticed one interesting thing:
Let's say I want to set the name attribute of an element by using the "." dot notation:
element.name = "someName";
console.log(document.getElementsByName("someName")[0]); // returns "undefined"??
However if I use the document.setAttribute() method, it works fine:
element.setAttribute("name", "someName");
console.log(document.getElementsByName("someName")[0]); // returns the element like it should.
Not sure why the dot notation method doesn't work in the first case.
Why does this happen?

My guess (because you didn't specify the element type) is the element normally does not have a name attribute, so setting the DOM property like that won't work.
For example, setting the name property on an input element will work. Setting it on a div will not.
It will work, however, with setAttribute().
jsFiddle.

To extend the answers provided by some of the others ...
The attribute 'name' is only considered valid DOM for a few specific objects. According to https://developer.mozilla.org/en-US/docs/DOM/element.name those objects are:
<a>, <applet>, <button>, <form>, <frame>, <iframe>, <img>, <input>,
<map>, <meta>, <object>, <param>, <select>, and <textarea>
For these objects you can set, get and change the name attribute using object.name BUT FOR ANY OTHER DOM OBJECT the attribute 'name' is a custom attribute and must be created using SetAttribute() or by adding it to the HTML declaration. Once it is created, you can acces it using setAttribute() and getAttribute() or you can refer to its value directly using object.attributes.name.value take a look at http://jsfiddle.net/radiotrib/yat72/1/ for an example. BTW - the alert box on load is intentional - check the code to see why ...

(Attempting to explain part of the above post a better, separately, since it is already went into -ve rating, and belief in that post will be less. Help improve this further if not better.)
*** The property
When you use, element.name, you are accessing an existing property named "name" or setting its value.
Example 1:
var div1 = document.getElementById("div1");
div1.textContent = "2";
*** The attribute
but, while using, element.setAttribute('name','someName'), you are actually setting the attribute named 'name'.
This attribute can be an existing property OR a custom one we want:
Example 2:
var h1 = document.getElementById("H1");
h1.setAttribute("class", "democlass");
Example 3:
var d = document.getElementById("d1");
d.setAttribute("name1", "value1");

when you use, element.name, you are accessing the property/creating a property named "name" and setting its value.

when you use, element.name, you are accessing the property/creating a property named "name" and setting its value.
but,
while using, element.setAttribute('name','someName'), you are actually setting the attribute 'name'.
IE8 and below treats the property and attribute as same, the bug has been fixed in IE9 and above.
Safari, FireFox, Chrome treat property and attribute differently.
However, you can always create a new property of your choice if you wish to do so.

<head>
<script>
function test($count) {
document.getElementById("test1").setAttribute("name","file-upload_" + $count);
}
</script>
</head>
<body>
<p>some content</p>
<input id="test1" type="file" name="file-upload" id="file-upload" />
<p>some other content</p>
<script>test(1);</script>
</body>