How can I find an id based on its class just using javascript. I know this is easy with jQuery what is the solution.. using getElementsByTagName ?
document.getElementsByClassName('myClassName')[0].id
or
document.querySelector('.myClassName').id
First step would be find the element(s) with the given class name. There are currently some functions supported by modern browsers like getElementsByClassName and querySelector functions. but they are not cross browser solutions.
That is, getElementsByClassName is not supported by IE 6-8 and querySelector is not supported by IE6-7 & FF3
source: http://www.quirksmode.org/dom/w3c_core.html
Therefore if you are not supporting these browsers then you can use them else you would need a wrapper js function like one mentioned in this blog post originally found on justswell.org.
Related
I am using this:
document.getElementById("div").getElementsByClassName("class");
The above seems to work in Chrome and FireFox, but not in IE8.
I am using
document.getElementById("branch").getElementsByClassName("branch.address");
Above one fetches one row but using this
document.getElementById("branch").querySelectorAll("branch.address");
fetched empty
How do I make this work in IE8?
The problem isn't getElementById, it's getElementsByClassName — IE8 doesn't have that.
Instead, you can use querySelectorAll, which is on all modern browsers, and also IE8:
document.getElementById("div").querySelectorAll(".class");
Or all in one:
document.querySelectorAll("#div .class");
querySelectorAll accepts any CSS selector, and returns a list of matching elements. There's also querySelector, which accepts any CSS selector, and returns the first matching element (or null if none match).
IE8 does not support getElementsByClassName(). See this post for more details. Also see the link posted here for a SO post with work-arounds.
Is there anyone that can explain the note on section 5.2.2 of the W3C DOM4 specification?
Relevant Quote:
Note: The getElementById() method is not on elements for compatibility with older versions of jQuery. If a time comes where that version of jQuery has disappeared, we might be able to support it.
I'm curious how this interface would explicitly cause a problem with jQuery and what versions, does anyone have an example?
To expand on #Nan answer, it probably has something to do with jQuery using getElementById to validate a step in an iteration. Adding this method to HTMLElement would make some conditions validate when part of jQuery code depends on it not validating.
Hard to say exactly which version causes the problem and in exactly which situations, but a quick look to old jQuery versions, you can see that find() in older version isn't compatible with Elements having getElementById method.
Going back to version 1.3, you can try to add the method to HTMLElement and you'll see that it messes the result. More recent version handle this correctly. See snippet:
alert('Without getElementById method on HTMLElement, length of $("div").find("#test") is ' + $('div').find('#test').length);
window.HTMLElement.prototype.getElementById = function(str){
console.log(str);
return str;
}
alert('With getElementById method on HTMLElement, length of $("div").find("#test") is ' + $('div').find('#test').length);
<script src="https://code.jquery.com/jquery-1.3.js"></script>
<div id="container"><div id="test"></div></div>
It looks like the getElementById method is only present on document global object, and it's not part of the DOM4 Element object yet.
This is due to compatibility issues with an older version of jQuery as you can read on DOM4 specification.
But, what does all this means? it means that W3C tried to add this method into the Element object and also means that once this "version of jQuery" disapear we "might" be able to chain getElementById() calls like this:
var myElement = document.getElementById("header").getElementById("slogan");
Nothing special, they didn't want the most popular DOM manipulation wrapper to crash or jQuery as a member of the W3C has had some influence over this decision
I have to use a picture, Stackoverflow says:
Oops! Your question couldn't be submitted because:
Your post appears to contain code that is not properly formatted as code. Please indent all code by 4 spaces using the code toolbar button or the CTRL+K keyboard shortcut. For more editing help, click the [?] toolbar icon.
The screenshot was taken from Stackoverflow's form.
Internet Explorer has no problems with the length property. If it didn't support it, then it would report undefined not 0.
The HTML is invalid, there is no name attribute for the div element. Internet Explorer is just error recovering in a different way to Firefox and not matching the div elements with getElementsByName
Elements that support both the NAME attribute and the ID attribute are included in the collection returned by the getElementsByName method, but elements with a NAME expando are not included in the collection.
— MSDN getElementsByNameMethod
Use a class instead. Internet Explorer 8 doesn't have a native getElementsByClassName, but there are no shortage of cross-browser implementations or you could use a selector engine or a big library that includes one such as YUI or jQuery.
getElementsByName is for use on input HTML elements - DIV elements do not have name attributes
Your problem is not that .length is not working on IE, but that getElementByName() is not working on IE... : getElementsByName in IE7
Do any JavaScript libraries exist that somehow make Internet Explorer (no particular version) recognize advanced CSS selectors, such as input[type="text"]?
I hate adding extra classes to HTML objects just to accommodate IE.
I can't believe this wasn't suggested:
http://selectivizr.com/
selectivizr is a JavaScript utility
that emulates CSS3 pseudo-classes and
attribute selectors in Internet
Explorer 6-8. Simply include the
script in your pages and selectivizr
will do the rest.
Selectivizr works automatically so you
don't need any JavaScript knowledge to
use it — you won't even have to modify
your style sheets. Just start writing
CSS3 selectors and they will work in
IE.
You also need to include a standard JavaScript library of your choice, which you're likely already doing.
IE7.js (and IE8.js and IE9.js): http://code.google.com/p/ie7-js/ do their best to bring prior versions of IE up to support for what the script names (e.g. IE8.js tries to make IE6/7 act like IE8). This includes, among other things, many attributes of CSS2/3, though you'll have to check to see exactly what is supported in which version.
if you just want to use the selectors in JS, http://sizzlejs.com/ supports all CSS2/3 selectors and is used as the base for many JS libraries.
so you want a javascript that changes the browsers css support?
i'm pretty sure that's impossible.
your best bet is going to be putting whatever styles you want into a class, and in your document ready, do an .addClass
I have this problem of an image rollover javascript not working in Internet Explorer if I don't specify the NAME attribute in the tag. The other problem is when I do, the HTML5 validator will come up with a message saying "NAME attr is obsolete, use ID instead" which is what I am using with getElementById.
Should I specify a NAME attribute anyway and ignore the error messages or is there a workaround? I don't wish to add extra attributes if I don't have too.
Thanks
Adam
You aren't calling getElementById; you're writing document[img_name].
Don't.
Check to make sure you do not have duplicate ids. getElementById incorrectly gets name="" in certain IEs, if there is no element with the id.
Also, make sure the document is not in quirks mode and is in standards mode. alert( document.compatMode ) and make sure it isnt BackCompat. If it is, use a proper doctype and kill comments/whitespace before doctype.