www.webdeveloper.com
Results 1 to 9 of 9

Thread: Get Element By Class Name

  1. #1
    Join Date
    Feb 2010
    Posts
    21

    Smile Get Element By Class Name

    Im trying to make a Greasemonkey script to get the number inside the attribute "thevalue" from a div with only a class.

    I know with ID divs you can use getElementByID and then add getAttribute to it, but how would I do this for a class name?


    HTML:
    <div class="info" thevalue="10000">Information</div>


    SCRIPT (WHICH DOESNT WORK):
    <script type="text/javascript">
    function doit () {
    var GG = new String();
    GG = document.getElementsByClassName('info').getAttribute('thevalue');
    }
    </script>





    Any help is appreciated!
    Last edited by appletree; 01-16-2011 at 07:18 PM.

  2. #2
    Join Date
    Dec 2009
    Location
    Shropshire UK
    Posts
    153
    I posted this in a previous post

    http://www.webdeveloper.com/forum/sh...13&postcount=5

    It takes the parameters like this getClass('myclassname', rootnode) or just getClass('myclassname').

    rootnode is optional, but enables you to specify a start point to search from. e.g.

    getClass('myclassname', document.getElementById('myList')).

    Hope it helps.
    Last edited by rpg2009; 01-16-2011 at 07:31 PM.

  3. #3
    Join Date
    Feb 2010
    Posts
    21
    That script works but I dont understand how to get the attribute from "thevalue" for that specific class. How would that be coded?

  4. #4
    Join Date
    Dec 2009
    Location
    Shropshire UK
    Posts
    153
    var val = getClass('info')[0].getAttribute('thevalue');

    getClass returns an array or an HTML collection depending on whether it uses the built in method or not.

    Either way you get an indexed collection, much like getElementsByTagName.

    As your example only has one match for that class we can use [0] // index 0
    Last edited by rpg2009; 01-16-2011 at 08:28 PM.

  5. #5
    Join Date
    Feb 2010
    Posts
    21
    Thank you so much!!!!!!!!!!

  6. #6
    Join Date
    Mar 2010
    Posts
    2,803
    There are a few getElementsByClassName scripts around on the www.

    This is one I "borrowed" some time ago. It works in all the major browsers.

    Code:
     
    function getElementsByClassName(oElm, strTagName, strClassName){
        var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
        var arrReturnElements = new Array();
        strClassName = strClassName.replace(/\-/g, "\\-");
        var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
        var oElement;
        for(var i=0; i<arrElements.length; i++){
            oElement = arrElements[i];
            if(oRegExp.test(oElement.className)){
                arrReturnElements.push(oElement);
            }
        }
        return (arrReturnElements)
    }
    typical usage

    Code:
    var inpObj = getElementsByClassName(document, 'input', 'myInputs');
    inpObj will be an array of input objects with a class name of 'myInputs'.

    Instead of document you can specify a start point to search below using document.getElementById() and specify the id of the element below which to search.
    Last edited by tirna; 01-16-2011 at 08:43 PM.

  7. #7
    Join Date
    Dec 2009
    Location
    Shropshire UK
    Posts
    153
    @appletree you're welcome

    This is one I "borrowed" some time ago. It works in all the major browsers.
    ("(^|\\s)" + strClassName + "(\\s|$)"); can be replaced with word boundaries ("\\b" + strClassName + "\\b").

    Not saying mine is great, but I am utilising the built in getElementsByClassName if available. Saves having to getElementsByTagName and loop through them unecessarily.

    Cheers

  8. #8
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    Quote Originally Posted by rpg2009 View Post
    ("(^|\\s)" + strClassName + "(\\s|$)"); can be replaced with word boundaries ("\\b" + strClassName + "\\b").
    Unfortunately we can't use word boundaries, because class names can have dashes. For instance, if we have a div with class="hello-world", and we run getClass('hello'), then you'll get a false positive.
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  9. #9
    Join Date
    Dec 2009
    Location
    Shropshire UK
    Posts
    153
    Unfortunately we can't use word boundaries, because class names can have dashes. For instance, if we have a div with class="hello-world", and we run getClass('hello'), then you'll get a false positive.
    Thanks for pointing that out. Hadn't considered that.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles