How can I get a collection of elements by specifying their id attribute? I want to get the name of all the tags which have the same id in the html.
I want to use ONLY getElementById() to get an array of elements. How can I do this?
I know this is an old question and that an HTML page with multiple identical IDs is invalid. However, I ran into this issues while needing to scrape and reformat someone else's API's HTML documentation that contained duplicate IDs (invalid HTML).
So for anyone else, here is the code I used to work around the issue using querySelectorAll:
var elms = document.querySelectorAll("[id='duplicateID']");
for(var i = 0; i < elms.length; i++)
elms[i].style.display='none'; // <-- whatever you need to do here.
The HTML spec requires the id attribute to be unique in a page:
[T]he id attribute value must be unique amongst all the IDs in the element's tree
If you have several elements with the same ID, your HTML is not valid.
So, document.getElementById should only ever return one element. You can't make it return multiple elements.
There are a couple of related functions that will return a list of elements: getElementsByName or getElementsByClassName that may be more suited to your requirements.
Why you would want to do this is beyond me, since id is supposed to be unique in a document. However, browsers tend to be quite lax on this, so if you really must use getElementById for this purpose, you can do it like this:
function whywouldyoudothis() {
var n = document.getElementById("non-unique-id");
var a = [];
var i;
while(n) {
a.push(n);
n.id = "a-different-id";
n = document.getElementById("non-unique-id");
}
for(i = 0;i < a.length; ++i) {
a[i].id = "non-unique-id";
}
return a;
}
However, this is silly, and I wouldn't trust this to work on all browsers forever. Although the HTML DOM spec defines id as readwrite, a validating browser will complain if faced with more than one element with the same id.
EDIT: Given a valid document, the same effect could be achieved thus:
function getElementsById(id) {
return [document.getElementById(id)];
}
document.querySelectorAll("#yourId"); returns all elements whose id is yourId
It is illegal to have multiple elements with the same id. The id is used as an individual identifier. For groups of elements, use class, and getElementsByClassName instead.
The id is supposed to be unique, use the attribute "name" and "getelementsbyname" instead, and you'll have your array.
As others have stated, you shouldn't have the same ID more than once in your HTML, however... elements with an ID are attached to the document object and to window on Internet Explorer. Refer to:
Do DOM tree elements with ids become global variables?
If more than one element with the same ID exists in your HTML, this property is attached as an array. I'm sorry, but I don't know where to look if this is the standard behavior or at least you get the same behavior between browsers, which I doubt.
Class is more than enough for refering anything you want, because it can have a naming with one of more words:
<input class="special use">
<input class="normal use">
<input class="no use">
<input class="special treatment">
<input class="normal treatment">
<input class="no special treatment">
<input class="use treatment">
that's the way you can apply different styles with css (and Bootstrap is the best example of it) and of course you may call
document.getElementsByClassName("special");
document.getElementsByClassName("use");
document.getElementsByClassName("treatment");
document.getElementsByClassName("no");
document.getElementsByClassName("normal");
and so on for any grouping you need.
Now, in the very last case you really want to group elements by id. You may use and refer to elements using a numerically similar, but not equal id:
<input id=1>
<input id="+1">
<input id="-1">
<input id="1 ">
<input id=" 1">
<input id="0x1">
<input id="1.">
<input id="1.0">
<input id="01.0">
<input id="001">
That way you can, knowing the numeric id, access and get an element by just adding extra non-invalidating numeric characters and calling a function to get (by parsing and so on) the original index from its legal string identifying value. It is useful for when you:
Have several rows with similar elements and want to handle its events
coherently. No matter if you delete one or almost all of them.
Since numeric reference is still present, you can then reuse them and
reassign its deleted format.
Run out of class, name and tagname identifiers.
Although you can use spaces and other common signs even when it's a not a requirement strictly validated in browsers, it's not recommended to use them, specially if you are going to send that data in other formats like JSON. You may even handle such things with PHP, but this is a bad practice tending to filthy programming practices.
This is my solution:
<script type="text/javascript">
$(document).ready(function () {
document.getElementsByName("mail")[0].value = "ex_mail1";
document.getElementsByName("mail")[1].value = "ex_mail2";
});
</script>
Or you can use for-loop for that.
You shouldn't do that and even if it's possible it's not reliable and prone to cause issues.
Reason being that an ID is unique on the page. i.e. you cannot have more than 1 element on the page with the same ID.
you can use
document.document.querySelectorAll("#divId")
we can use document.forms[0].Controlid
If you're using d3 for handling multiple objects with the same class / id
You can remove a subset of class elements by using d3.selectAll(".classname");
For example the donut graph here on http://medcorp.co.nz utilizes copies of an arc object with class name "arc" and there's a single line of d3, d3.selectAll(".arc").remove(); to remove all those objects;
using document.getElementById("arc").remove(); only removes a single element and would have to be called multiple times (as is with the suggestions above he creates a loop to remove the objects n times)
Related
Why is the following javaScript code not returning any elements?
Here is the html code:
<div class="misc" data-custom-test="test1" data-custom-test="test2"></div>
Here is the javaScript code:
var elements = document.querySelectorAll('[data-custom-test="' + "test2" + '"]');
alert(elements.length);
Thanks.
When I run experiments in a jsFiddle in Chrome, document.querySelectorAll() will only find a match on a given element if the FIRST attribute with a given attribute name is the one that matches your selector. Or said, another way, if you have multiple definitions of the same attribute, document.querySelectorAll() is not finding matches in any of them other than the first one.
I have not tested other browsers to see how they behave in this regard, but this is enough to tell you that you have a problem using multiple definitions of the same attribute name like you are.
Further, the Section 8.1.2.3 about Attributes in the HTML5 spec here clearly states that you are not to have duplicate attribute in the same tag.
There must never be two or more attributes on the same start tag whose
names are an ASCII case-insensitive match for each other.
I don't know what problem you're really trying to solve here, but a common practice is to use multiple values on the same attribute definition by separating the multiple values with a separator like a semicolon and then you could use the *= operator in your selector to find attributes that contain a substring like this:
<div class="misc" data-custom-test="test1;test2"></div>
var elements = document.querySelectorAll('[data-custom-test*="' + "test2" + '"]');
console.log(elements.length);
The issue is that elements cannot have duplicate attributes (see a similar question about it). From the W3C link provided in Jukka K. Korpela's answer:
There must never be two or more attributes on the same start tag whose names are an ASCII case-insensitive match for each other.
The result may vary from browser to browser, but it seems that generally the second attribute is directly ignored. For example, the same thing happens if you have a duplicate style attributes:
<div style="color:red;" style="color:blue;">Is it red or blue?</div>
So this is an interesting one and may very well be impossible to do efficiently. But I'm interested in finding an efficient way to query all html elements in the document that have a particular value set for any attribute. So, for example, instead of this:
document.querySelectorAll('[attrName]');
I'm looking for the equivalent of the following pseudo-code:
document.querySelectorAll('[*=specificValue]');
So essentially the result would be all elements that have any attribute whose value matches "specificValue". I know there are gross ways to do this such as:
var all = document.querySelectorAll('*');
var matches = [];
var attrs;
for (var i = 0; i < all.length; i += 1) {
attrs = Array.prototype.slice.call(all[i].attributes);
for (var j = 0; j < attrs.length; j += 1) {
if (attrs[j].value === 'specificValue') {
matches.push(all[i]);
break;
}
}
}
However, I would really love to avoid analyzing every single html element like this. Any ideas?
Edit:
Thanks for all the help so far. Before too many people give alternate suggestions I should explain what this is for. Basically, it's an experiment. The idea was that I might be able to create live object-to-dom databindings like what you get in Ember.js but instead of having to compile templates, you could just use regular html attributes and have a syntax marker in the value itself that a binding should be created. For example: . I figured this might be fun if there was an efficient way to select relevant elements on the fly. Clearly I know a loop has to happen somewhere. However, if the browser is running a native iteration, I'd prefer that over my own JavaScript loop. I just wasn't sure if there was some "secret" selector syntax I wasn't aware of or if anyone could think of any other cool tricks.
I wouldn't worry too much about performance at this point, but focus on code efficiency. If you don't want to incooporate any jQuery, and just use vanilla JS, then I would just store your attributes values in a class name. For example, if you have a following HTML element:
<div class="something" yo="1"></div>
I'd put entire attributes and values in a class name like
<div class="something yo1"></div>
Then you can simply use already built-in method to select every elements with the class name specified above.
var elems = document.getElementsByClassName("yo1"); //make sure to cache these selected elems in a variable.
console.log(elems);
If you want to use jQuery, things get easier, because you can simply select element by attribute selector and it works across all browsers.
http://api.jquery.com/attribute-equals-selector/
If you don't search for it, you cannot find it. So, basically you need to iterate through all the elements.
However, you may use some simple logic to at least help you with the performance.
Define a context
For example, you may have a really long HTML but within there, you may have a DIV where only inside of that div you may have your elements with the value "specificValue". In this case, you know that what you are looking for only resides within this div and only search within it.
You still have to go through all the elements but this time not within the whole HTML but only within the DIV that you expect the values to be.
So to summarize whether you use jQuery or plain javascript, you still have to go through all the elements. The solution is to narrow down the searchable "area" by defining a context and only searching within that..
E.g.
<html>
<head>
<title>some title</title>
</head>
<body>
.
.
<div class="searchable">
-- your elements that may have the value you will search
</div>
.
.
.
<div class="searchable">
-- your elements that may have the value again.
</div>
</body>
</html>
Mind you - you will have to itereate through all the elements again to find the divs with the class name "searchable". With jQuery $('.searchable') also does this. But you can also define a context for that and say $('.searchable', 'body') to narrow down that search area too..
I'm creating a form from various complex controls that I have built as Backbone views. Understandably I want to reliably link the labels to the <input> elements, which I am doing with the normal for attribute.
However, sometimes I need to use the same control multiple times. I am using data attributes to drive the form, so I do not need the id attribute for my own use, and can use classes to identify each control.
Therefore, I am considering whether it makes sense to generate random ids, just to link the <label> and <input> together? This seems a really bad idea, but I am unsure there is a better one?
I can't just put the <input> inside the <label>, as they have to be separate from each other.
There's nothing bad in auto-generating IDs. If they have not to be human- (== developer) readable, you can go crazy there. Create a simple function, that spits out unique strings, and there you go:
function generateId() {
return 'GENERATED_ID_' + (++generateId.counter);
}
generateId.counter = 0;
id = generateId();
html = '<label for="'+id+'">Foo</label> <input id="'+id+'">';
Nothing bad happening here.
(Of course, if you could nest the input in the label, that would be a wee bit nicer.)
I would use the cid attribute of the Backbone view. This is already unique. Probably then override _.template in a base view to always include this (to save passing in each time).
I have this javascript function:
function clearDiv(div_id) {
alert(div_id);
$(div_id).empty();
}
And the following html:
<input value="Clear" type="button" onClick="clearDiv(div_to_clear)" />
<div id="div_to_clear">
<!-- more html -->
</div>
Why is it that the above will actually find the javascript div object with id div_to_clear and use the $ selector to access it?
If I had done the input as :
<input value="Clear" type="button" onClick="clearDiv('div_to_clear')" />
I would need to change my function to
function clearDiv(div_id) {
alert(div_id);
$('#' + div_id).empty();
}
Is there any documentation about this? Are there advantages to using one method or the other?
IE (and Chrome in an effort for compatability) will create properties on the window with names of elements with ids, corresponding to those elements.
In the first example are are passing window.div_to_clear which points to your element directly. In the second, you are passing a string telling jQuery which element to select.
The first one is non-standard behavior so you should not rely on it.
The first one is actually a browser bug (they called it a feature) to access the DOM node by window.div_to_clear (the global variable) - and jQuery creates its wrapper around the element. For legacy reasons, it still exists in current browsers, but is deprecated. Your really should use the selector solution.
This is because there is a widely-implemented (although not best practice) method by browsers to automatically place html elements with id's into their correlating variable name. For example:
<div id="someId"></div>
will end up psuedo creating the variable someId which holds that html element.
These questions have similar information on the behavior:
Do DOM tree elements with ids become global variables?
Where does the variable holding an element with an id get stored?
Element accessible with ID
Here is a jsperformance test showing that accessing the id in that manner is slower than using document.getElementById: http://jsperf.com/global-id-vs-document-getelementbyid
Im working on a form and getting null or not an object errors in ie.
<form action="#" method="post" name="adv_search">
<input class="inputbox" type="text" name="keyword1" value="none" id="keyword1"/>
</form>
<script>
document.adv_search.keyword1.focus();
document.adv_search.keyword1.select();
</script>
//whereas if I use
<script>
var key1 = document.getElementById('keyword1');
key1.focus();
key1.select();
</script>
//everything is fine
i would like to understand why.
i would like it to work without having the id tag for the input field
thanks in advance
shouldnt the document.formname.fieldname.focus();
and document.formname.fieldname.select();
work?
Your particular example works for me, but if I add another field with the same name:
<input type="text" name="keyword1" />
<input type="text" name="keyword1" />
Then document.adv_search.keyword1.focus() will fail with the error you specify.
The reason is that:
document.adv_search.keyword1
is a shortcut for this syntax (which goes back to DOM Level 0 and the Netscape 2 days!):
document.forms.adv_search.elements.keyword1
(Incidentally, it is better to use this full syntax, instead of relying on the behaviour of the ‘document’ and ‘form’ objects being indexed on names: if a new method is added to HTMLDocument or HTMLFormElement, that might clash with the control name you are using. This is less of an issue when you use the document.forms or form.elements collections. Also, IE mistakenly dumps all names and ids into ‘document’, so if you've got an element with id="adv_search" in addition to the form with that as a name, document.adv_search will return the wrong one.)
Anyway, the DOM Level 0 scripting methods behave slightly curiously when you access an element by name like this. If there is a single matching element, you'll get that one as a standalone object. If, on the other hand, there are more than one, you'll get a list of objects. You can't call focus() or select() on an array-like list, which is why the error appears; you'd have to do something like keyword1[0].focus() when the list was returned.
So you have to decide whether you're going to be using old-school DOM Level 0 methods to access your form controls — in which case you're going to have to cope with sniffing for single-or-multiple-controls — or move to the ID-based methods introduced by ‘DOM Level 1’:
document.getElementById('keyword1').focus();
The ID-based methods are generally a bit more typing (in the script and to add ‘id’s to all elements you wish to access this way, if they don't already have them), but they are simple and unambiguous. (Also you can then drop the name on the <form> itself.)
The ID approach really is best but if you want to go by name, use getElementsByName.
In this case, it might look like this:
<script>
// retrieves array of objects with the name 'keyword1'
// and takes the first one
var key1 = document.getElementsByName('keyword1')[0];
key1.focus();
key1.select();
</script>