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.
Related
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 wrote this simple javascript code:
$("input[type='file']").attr("value", "");
It works in Firefox and Chrome but not in IE (I tried in IE9)
What's the good approach to empty the input type file value ?
Thank you
There are some restriction on input type = file
You can read here
This seems to be working in IE8, IE9
$("input[type='file']").replaceWith($("input[type='file']").clone(true));
To test in IE8 I changed the compatibility mode in developer tool to IE8
Edit:
As for many IE hacks I think this is better
if($.browser.msie){
$("input[type='file']").replaceWith($("input[type='file']").clone(true));
} else {
$("input[type='file']").val('');
}
jQuery docs says:
As of jQuery 1.6, the .attr() method returns undefined for attributes
that have not been set. In addition, .attr() should not be used on
plain objects, arrays, the window, or the document. To retrieve and
change DOM properties, use the .prop() method.
Use .prop()
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.
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
Using Firebug Lite in IE 7, with jQuery 1.4.4. I'm trying to grab all the ".step" <div/> elements that are not the first one (there are 2 or 3 now, but assume an arbitrary amount of steps). Works in FF and Webkit, but noticed the same selector of :not with :first does not select the same items in IE7. jQuery bug? Should this work? Can you suggest an alternative way to select these items?
# Firebug Lite console
>>> $('.step')
[div#step_1.step, div#step_2.step, div#step_3.step]
>>> $('.step:first')
[div#step_1.step]
>>> $('.step:not(:first)')
[div#step_1.step, div#step_2.step, div#step_3.step]
This isn't an answer to the IE7 issue, but it is a workaround, and probably a better way to do it overall.
Instead of:
$('.step:not(:first)')
do this:
$('.step').slice(1);
Now you're using a simple selector that is valid for querySelectorAll, and simply paring it down to all but the first match.
Overall it should perform better for you.
EDIT:
There does seem to be an open bug with regard to :not(:first) in IE 7.
Here's the link: http://bugs.jquery.com/ticket/4028
You could use
$('.step:gt(0)')
don't have an IE7 handy to test at the moment though
The .not() method is recommended over the :not pseudo-class selector in the jQuery documentation for readability, but :not also has terrible performance consequences. Omitting tag-names does as well in many cases. Testing in IE8, I found the .not() method about thirty-four times faster than the :not pseudo-class selector.
I concur with user113716 that the .slice method is probably best here, but for those having trouble with :not in a similar situation, I would suggest something like this:
$('div.step').not('div:first')