This is my JavaScript code:
<script>
function change(name){
var element = document.all.name.value;
}
</script>
It returns an error. How to pass to the function the element's name in order to change its value?
For a quick fix:
var element = document.all[name].value;
But keep in mind this gets the value, not the element itself. To get the element, then change the value, do:
var element = document.all[name];
element.value = 'whee';
Also, you should consider using another way to access the elements instead of document.all. Look into using IDs instead of names with the document.getElementById() function. See this JavaScript best practices list.
As Peter Bailey points out in his answer, many HTML elements can have the same name. This is one reason why document.getElementById() is preferable: element IDs are unique (in valid HTML, of course).
If by "name" you mean "name attribute", you have to understand that names are not unique to an HTML document. They need context.
Although you can use document.all - that is non-standard and only works in IE. You'll be better off using a more cross-browser friendly mechanism.
Typically, name attributes will belong to elements in a form, such as <input/> and <select> elements. The names of these elements are exposed as properties of the <form>'s elements property in the DOM.
If you can get access to the form's DOM object, then you can access its elements' DOM objects too.
An example
<form id="foo">
<input type="text" name="test" />
</form>
<span onclick="change( 'foo', 'test' );">Change Value</span>
<script type="text/javascript">
function change( formId, elementName )
{
// Get the form's DOM object
var f = document.getElementById( formId );
// Get the element's DOM object
var element = f.elements[elementName];
// Modify the element's value property
element.value = 'Hello World';
// Note, the above 3 lines can be refactored to this
// document.getElementById( formId ).elements[elementName].value = 'Hello World';
}
</script>
Related
I am writing a small library where I am in need of selecting a relative element to the targeted element through querySelector method.
For example:
HTML
<div class="target"></div>
<div class="relative"></div>
<!-- querySelector will select only this .target element -->
<div class="target"></div>
<div class="relative"></div>
<div class="target"></div>
<div class="relative"></div>
JavaScript
var target = document.querySelectorAll('.target')[1];
// Something like this which doesn't work actually
var relativeElement = target.querySelector('this + .relative');
In the above example, I am trying to select the .relative class element relative only to the .target element whose value is stored in target variable. No styles should apply to the other .relative class elements.
PS: the selectors can vary. So, I can't use JavaScript's predefined methods like previousElementSibling or nextElementSibling.
I don't need solution in jQuery or other JavaScript libraries.
Well it should be ideally:
var relativeElement = target.querySelector('.relative');
But this will actually try to select something inside the target element.
therefore this would only work if your html structure is something like:
<div class="target">
<div class="relative"></div>
</div>
Your best bet would probably in this case be to use nextElementSibling which I understand is difficult for you to use.
You cannot.
If you insist on using the querySelector of the subject element, the answers is there is no way.
The spec and MDN both says clearly that Element.querySelector must return "a descendant of the element on which it is invoked", and the object element you want does not meet this limitation.
You must go up and use other elements, e.g. document.querySelector, if you want to break out.
You can always override Element.prototype.querySelector to do your biddings, including implementing your own CSS engine that select whatever element you want in whatever syntax you want.
I didn't mention this because you will be breaking the assumption of a very important function, easily breaking other libraries and even normal code, or at best slowing them down.
target.querySelector('.relative');
By using querySelector on the target instead of document, you scope the DOM traversal to the target element.
It is not entirely clear from your explanation, but by related i assume you mean descendant?
To get all target elements you can use
document.querySelectorAll('.target')
And then iterate the result
I found a way which will work for my library.
I will replace "this " in the querySelector with a unique custom attribute value. Something like this:
Element.prototype.customQuerySelector = function(selector){
// Adding a custom attribute to refer for selector
this.setAttribute('data-unique-id', '1');
// Replace "this " string with custom attribute's value
// You can also add a unique class name instead of adding custom attribute
selector = selector.replace("this ", '[data-unique-id="1"] ');
// Get the relative element
var relativeElement = document.querySelector(selector);
// After getting the relative element, the added custom attribute is useless
// So, remove it
this.removeAttribute('data-unique-id');
// return the fetched element
return relativeElement;
}
var element = document.querySelectorAll('.target')[1];
var targetElement = element.customQuerySelector('this + .relative');
// Now, do anything with the fetched relative element
targetElement.style.color = "red";
Working Fiddle
what's the different between using:
// assuming using elements/tags 'span' creates an array and want to access its first node
1) var arrayAccess = document.getElementsByTagName('elementName')[0]; // also tried property items()
vs
// assuming I assign an id value to the first span element/tag
// specifically calling a node by using it's id value
2) var idAccess = document.getElementById('idValue');
then if I want to change the text node....when using example 1) it will not work, for example:
arrayAccess.firstChild.nodeValue = 'some text';
or
arrayAccess.innerText/innerHTML/textContent = 'some text';
If I "access" the node through its id value then it seems to work fine....
Why is it that when using array it does not work? I'm new to javascript and the book I'm reading does not provide an answer.
Both are working,
In your first case you need to pass the tag name instead of the element name. Then only it will work.
There might be a case that you trying to set input/form elements using innerHTML. At that moment you need to use .value instead of innerHTML.
InnerHTML should be used for div, span, td and similar elements.
So your html markup example:
<div class="test">test</div>
<div class="test">test1</div>
<span id="test">test2</span>
<button id="abc" onclick="renderEle();">Change Text</button>
Your JS code:
function renderEle() {
var arrayAccess = document.getElementsByTagName('div')[0];
arrayAccess.innerHTML = "changed Text";
var idEle = document.getElementById('test');
idEle.innerHTML = "changed this one as well";
}
Working Fiddle
When you use document.getElementsByTagName('p'), the browser traverses the rendered DOM tree and returns a node list (array) of all elements that have the matching tag.
When you use document.getElementById('something'), the browser traverses the rendered DOM tree and returns a single node matching the ID if it exists (since html ID's are unique).
There are many differences when to use which, but one main factor will be speed (getElementById is much faster since you're only searching for 1 item).
To address your other question, you already have specified that you want the first element in the returned nodeList (index [0]) in your function call:
var arrayAccess = document.getElementsByTagName('elementName')[0];
Therefore, arrayAccess is already set to the first element in the returned query. You should be able to access the text by the following. The same code should work if you used document.getElementById to get the DOM element:
console.log(arrayAccess.textContent);
Here's a fiddle with an example:
http://jsfiddle.net/qoe30w2w/
Hope this helps!
Is it possible to add an HTML ID via the browser console using DOM Manipulation?
For example, suppose I am dealing with the following element:
<div class="elementClass">
I can fetch via DOM with something like:
document.getElementsByClassName("elementClass");
However, is it possible to add an attribute via this type of method? If I inspect the element with chrome I can do it manually, but I am wondering if it's possible to inject that ID via JavaScript.
Thanks!
You can do:
document.getElementsByClassName("elementClass")[0].setAttribute("id", "some ID");
Yes you can modify attributes of an object (HTMLElement) via javascript
getElementsByclassName returns an array, simply iterate through the list and set the attributes you wish.
var elements = document.getElementsByClassName("elementClass");
for(var I = 0; I < elements.length; I++)
element[I].id = "element" + I;
Then you could access any of those elements with that class via
var element = document.getElementById("element" + 0); //Gets First Element
Sure.
document.getElementsByClassName('elementClass')[0].id = 'someID';
or
document.getElementsByClassName('elementClass')[0].setAttribute('id', 'someID');
Just know that if you grab elements using getElementsByClassName then it will return an array of elements (assuming any elements with the matching class exist) so modifying the array won't give you the result you want.
setAttribute() method on the DOM element should work just fine.
HTML
<div class="elementClass">
This is the content of elementClass
</div>
<button onclick="buttonClicked()">Click to add attribute id red to elementClass</button>
Javascript
function buttonClicked(){
document.getElementsByClassName("elementClass")[0].setAttribute("id", "red");
}
CSS
#red {
background-color: red;
}
PLAYGROUND
Note that manipulating the class attribute causes the browser to reflow, therefore it is worth mentioning to use setAttribute() wisely to not cause performance issue.
Hi I am trying to get the HTML of INPUT tag. But unable to..
<input type="checkbox" name="_QS4_CNA" id="_Q0_C7" class="mrMultiple" value="NA">
<label for="_Q0_C7">
<span class="mrMultipleText" style="">None of these</span>
</label>
</input>
And I am trying access as
var dat=$(':checkbox#_Q0_C7').html();
alert(dat);
But i cannot access this. Please help me on this..
The ".html()" method gets the contents of an element, and not the element itself. In your case, the problem is that your HTML is invalid. An <input> tag cannot have content. As far as the browser is concerned, the tag ends where the <label> tag starts, and the browser just ignores the closing tag.
Note that when you've got an "id" attribute to use to find an element, you don't need any other qualifiers in the selector (like ":checkbox"). Just "#_Q0_C7" is all you need, because "id" values have to be unique anyway.
edit — Note that if all you want is to get some attribute (like the value or the "checked" status) from the element, you can certainly do that:
var $cb = $('#_Q0_C7');
var isChecked = !!$cb.prop('checked'); // force a real boolean value
var value = $cb.val();
You can try accessing the RAW underlying DOM element and use its innerHTML property.
var dat = $(":checkbox#_Q0_C7")[0].innerHTML;
But like mentioned by Pointy, that might still get you nothing. Not sure what (if any) input elements have actual siblings.
I gather from this post that almost always one wants to be accessing the DOM property, not the HTML attribute.
So what are the rare useful exceptions? In what situation is accessing the HTML attribute better than accessing the DOM property?
Sometimes the attribute doesn't map to changes in the property.
One example is the checked attribute/property of a checkbox.
DEMO: http://jsfiddle.net/mxzL2/
<input type="checkbox" checked="checked"> change me
document.getElementsByTagName('input')[0].onchange = function() {
alert('attribute: ' + this.getAttribute('checked') + '\n' +
'property: ' + this.checked);
};
...whereas an ID attribute/property will stay in sync:
DEMO: http://jsfiddle.net/mxzL2/1/
<input type="checkbox" checked="checked" id="the_checkbox"> change me
var i = 0;
document.getElementsByTagName('input')[0].onchange = function() {
this.id += ++i;
alert('attribute: ' + this.getAttribute('id') + '\n' +
'property: ' + this.id);
};
And custom properties generally don't map at all. In those cases, you'll need to get the attribute.
Perhaps a potentially more useful case would be a text input.
<input type="text" value="original">
...where the attribute doesn't change with changes from the DOM or the user.
As noted by #Matt McDonald, there are DOM properties that will give you the initial value that would reflect the original attribute value.
HTMLInputElement.defaultChecked
HTMLInputElement.defaultValue
A rare exception is the case of attributes of a <form> element that could clash with elements in the form. For example, consider the following HTML:
<form id="theForm" method="post" action="save.php">
<input name="action" value="edit">
</form>
The problem is that any input within a form creates a property corresponding to the input's name in the form element, overriding any existing value for that property. So in this case, the action property of the form element is a reference to the <input> element with name action. If that input did not exist, the action property would instead refer to the action attribute and contain the string "save.php". Therefore for properties of form elements corresponding to attributes, such as action and method, it's safest to use getAttribute().
var form = document.getElementById("theForm");
// Alerts HTMLInputElement in most browsers
alert( form.action );
// Alerts "save.php"
alert( form.getAttribute("action") );
// Alerts "post" because no input with name "method" exists
alert( form.method );
This is unfortunate; it would have been better if this mapping did not exist, since the elements property of the form already contains all the form elements keyed by name. I think we have Netscape to thank for this one.
Live demo: http://jsfiddle.net/z6r2x/
Other occasions to use attributes:
When accessing custom attributes, such as <div mymadeupattr="cheese"></div>
When serializing the DOM and you want values from the original HTML for input attributes such as value and checked.
I can only come up with 2 more situations where accessing/setting attribute would have benefits
over property.
Style attribute:
In a case where you are not allowed to use any framework, you can use style attribute to set multiple styles at once like so:
elem.setAttribute( "style", "width:100px;height:100px;" );
instead of doing this:
elem.style.width = "100px";
elem.style.height = "100px";
or this:
var styles = {width: "100px", height: "100px"}, style;
for( style in styles ) {
elem.style[style] = styles[style];
}
Be aware that setting style attribute overwrites the previous one. And its probably better to write
a multiple style setter function anyway.
Href attribute:
A href attribute will usually contain a value like "/products", however the property will contain the resolved url, as in:
"http://www.domain.com/products" instead of what you really want: "/products". So if you wanna do something dynamically with
links, then reading the href attribute instead of property is better because it has the value you intended it to be.
Update
I suddenly found 2 more uses and I am sure there are more like this.
If you want to see if an element has custom tab index set, the easy way is to see if the element has the attribute. Since the default
value for .tabIndex-property depends on element and cannot be easily used to see if the element has custom tabIndex.
Seeing if element has a custom .maxLength property. This cannot be seen from property either:
document.createElement("input").maxLength
//524288
It is impossible to tell if the value 524288 was there intentionally without dealing with the attribute.