/    Sign up×
Community /Pin to ProfileBookmark

getElementsByClass

Copy linkTweet thisAlerts:
Sep 23.2010

I’m relatively inexperienced with Javascript and am trying to write a simple script to expand/collapse a ul by changing its class. My problem is using the getElementsByClass() / getElementsByClassName() functions. Firebug says it is not defined. I have the jQuery library loading but still no success.

Here is the code so far:

[CODE]
var collapsers = getElementsByClassName(“collapser”);

for (var i = 0; i < collapsers.length; i++) {
var collapser = collapsers[i];

alert(collapser);
}

function togglecollapsers() {

}[/CODE]

Obviously no functionality yet, just intended to show alerts to show the script has selected the objects. But nothing.

to post a comment
JavaScript

12 Comments(s) ↴

Copy linkTweet thisAlerts:
@eTech1Sep 23.2010 — collapsers[i] is referencing an object, do you want collapsers[i].value maybe? just a guess.
Copy linkTweet thisAlerts:
@mioceneauthorSep 23.2010 — I think I want it to alert to show it has put the variable collapsers in the variable collapser.

I've been using this video from google to try and get me started although I'm not using any of the files it uses - I'm trying to create my own from scratch.
Copy linkTweet thisAlerts:
@eTech1Sep 23.2010 — I think I want it to alert to show it has put the variable collapsers in the variable collapser.[/QUOTE]

Yea that's what it looks like to me, do you know if this is where you're getting the error? What is firebug saying isn't defined? I can take a look at the video when I get home from work in a couple of hours.
Copy linkTweet thisAlerts:
@mioceneauthorSep 23.2010 — here is the output from firebug:

getElementsByClassName is not defined

[Break on this error] var collapsers = getElementsByClassName("ul"); [/QUOTE]

basically it doesn't recognise the function 'getElementsByClassName'. I would have thought jQuery at least would provide that function.
Copy linkTweet thisAlerts:
@criterion9Sep 24.2010 — Wouldn't that be "document.getElementsByClassName" rather than just "getElementsByClassName"?
Copy linkTweet thisAlerts:
@huyhoang08Sep 24.2010 — to access elements in HTML recommended start with document.anchors

anchor contain as:

forms, image, use self key with index to seek & get info of element:

example: document.anchors[n] //n=[0,1,...,)

however, with table should 'nt using anchor.

other way to reach element by using getElementById, getElementsByTagName, getElementsByName.
Copy linkTweet thisAlerts:
@KorSep 24.2010 — 
basically it doesn't recognise the function 'getElementsByClassName'. I would have thought jQuery at least would provide that function.[/QUOTE]
The problem with JQuery and all the other JavaScript libraries is that you will never be sure which is the custom method and whether the custom method overwrites a native one or not.

In fact [B]document.getElementsByClassName()[/B][I] is a native DOM method[/I]. It works in all the modern browsers except IE <9 (it was implemented now in IE9 beta, as far as I could test). There is no need of JQuery for that. But you need a workaround to make it work in IE as well, and this is probably what JQuery has somewhere.

For me, I use my own approach (and I expect JQuery has a similar code in its core):
<i>
</i>onload=function(){
if (!document.getElementsByClassName) {
document.getElementsByClassName = function (cn) {
var rx = new RegExp("(?:^|\s)" + cn+ "(?:$|\s)");
var allT = document.getElementsByTagName("*"), allCN = [], ac="", i = 0, a;
while (a = allT[i=i+1]) {
ac=a.className;
if ( ac &amp;&amp; ac.indexOf(cn) !==-1) {
if(ac===cn){ allCN[allCN.length] = a; continue; }
rx.test(ac) ? (allCN[allCN.length] = a) : 0;
}
}
return allCN;
}
}
}


By short, I bet you have not used the proper syntax. As [B]criterion9[/B] noticed, I expect JQuery to use [B][COLOR="Blue"]document.[/COLOR][/B]getElementsByClassName(), not simply getElementsByClassName(). But, well, you'll never know... libraries are strange enough :rolleyes:
Copy linkTweet thisAlerts:
@mioceneauthorSep 24.2010 — Thanks for all the replies. That solved it.

Weird they don't use the "document." thingy in the google example but I think they call a similar function to Kor's beforehand but without the .document.
Copy linkTweet thisAlerts:
@Jeff_MottSep 24.2010 — If you're interested in knowing where things went wrong, miocene, then here's what happened:

In the google video, they are not using jQuery. They are including their own "utilities.js" file, which undoubtedly implements a getElementsByClassName function. jQuery, by contrast, has a much different interface.

So you have a few options.

A) Find and include the utilities.js that they used in the google video. Then you can write your code the same as they do in the video, and everything should just work.

? Continue with jQuery. If you do this, you would need to rewrite the code from the video for jQuery. The code from your first post would look like this:

$(".collapser").each(function(){
alert(this);
});

You'll also need to read and reference the [url=http://docs.jquery.com/Main_Page]jQuery documentation[/url] if you're going to go this route.

C) Roll your own code. I think most good programmers would tell you that this is the least favorable of all the options. "Don't reinvent the wheel," is the phrase. It's almost always better to use existing code that is widely used and widely tested.
Copy linkTweet thisAlerts:
@KorSep 25.2010 —  I think most good programmers would tell you that [COLOR="red"]this is the least favorable of all the options[/COLOR]. "Don't reinvent the wheel," is the phrase. It's almost always better to use existing code that is widely used and widely tested.[/QUOTE]
I doubt. [I]That[/I] (writing your own codes) is the [I][COLOR="Blue"]most favorable[/COLOR][/I] of the options. JQuery did not invent the wheel, for us to reinvent it, JQuery uses nothing but JavaScript language. I bet their getElementsByClassName() custom aproach is not better than mine. Except that, for using theirs, you need to load all their JQuery core code. What for? :rolleyes:
Copy linkTweet thisAlerts:
@mioceneauthorSep 26.2010 — yeah I had located the utility.js file and it did contain the missing functions including hasclass(), addclass() etc.

I would prefer to use the jQuery methods but I'm not sure of the correct syntax. I'm still quite new to javascipt and am more familiar with php.

I got the example working but only after using the utility.js file. I would like to see a jQuery version.
Copy linkTweet thisAlerts:
@eTech1Sep 29.2010 — I think I would recommend learning Javascript well before moving on to jQuery. I'm guessing you'll understand jQuery a lot better if you do it that way.
×

Success!

Help @miocene spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...