ansaurus

Question

How to getElementByClass instead of GetElementById with Javscript?

Answer 1

+2 A:

You'll want to check into jQuery, which will allow the following:

$(".classname").hide(); // hides everything with class 'classname'

Google offers a hosted jQuery source-file, so you can reference it and be up-and-running in moments. Include the following in your page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
  $(function(){
    $(".classname").hide();
  });
</script>

Jonathan Sampson 2009-12-19 17:40:47

Although good, the Google hosted jQuery is useful only for the most simple things, because of the cross-site scripting security implemented by most modern browsers.

Paulo Santos 2009-12-19 17:45:04

You may also download the source file from jQuery.com and reference it locally.

Jonathan Sampson 2009-12-19 17:46:15

@Paulo: Cross-site scripting is not applicable for `<script>` tags. Google hosted jQuery is designed specifically for production websites (as a CDN). If your site is https, just make sure you use the https version to avoid mixed content warning.

Chetan Sastry 2009-12-19 20:39:13

In fact, `<script>` tag injection is the basis of cross-site JSONP requests.

Chetan Sastry 2009-12-19 20:42:34

Paulo, you do realize that once you include jQuery with the <script> tag, there are no cross-site restrictions at all?

Dark Falcon 2009-12-19 20:48:08

Answer 2

+4 A:

The getElementsByClassName method is now natively supported by the most recent versions of Firefox, Safari, and Opera, you could make a function to check if a native implementation is available, otherwise use the Dustin Diaz method:

function getElementsByClassName(node,classname) {
  if (node.getElementsByClassName) { // use native implementation if available
    return node.getElementsByClassName(classname);
  } else {
    return (function getElementsByClass(searchClass,node) {
        if ( node == null )
          node = document;
        var classElements = [],
            els = node.getElementsByTagName("*"),
            elsLen = els.length,
            pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;

        for (i = 0, j = 0; i < elsLen; i++) {
          if ( pattern.test(els[i].className) ) {
              classElements[j] = els[i];
              j++;
          }
        }
        return classElements;
    })(classname, node);
  }
}

Usage:

function toggle_visibility(className) {
   var elements = getElementsByClassName(document, className),
       n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];

     if(e.style.display == 'block') {
       e.style.display = 'none';
     } else {
       e.style.display = 'block';
     }
  }
}

CMS 2009-12-19 17:45:02

Posted an example here: http://jsbin.com/onozu

CMS 2009-12-19 17:55:16

Answer 3

A:

Why haven't I been using jQuery all along?I took @Jonathan Sampson's suggestion of using jQuery, and it works! (CMS's answer was the one I thought I was looking for, but couldn't get it to work)

I've given each link an id, and with jQuery I can define which classes show and which classes are hidden when you click on a particular link. GREAT!

This solution seems too good to be true. jQuery seems too good to be true. What are the drawbacks of using jQuery? As a novice, why would I use Javascript instead of jQuery?

Alan 2009-12-19 20:30:53

Answer 4

A:

adding to CMS's answer, this is a more generic approach of toggle_visibility I've just used myself:

function toggle_visibility(className,display) {
   var elements = getElementsByClassName(document, className),
       n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];

     if(display.length > 0) {
       e.style.display = display;
     } else {
       if(e.style.display == 'block') {
         e.style.display = 'none';
       } else {
         e.style.display = 'block';
       }
     }
  }
}

Cawas 2010-09-16 17:28:28

ansaurus

tags:

views:

answers:

How to getElementByClass instead of GetElementById with Javscript?

related questions