tags:

views:

57

answers:

3

My main question is to calculate the last alert message, but any other information is also welcome.

I am trying to learn javascript (to use with greasemonkey later), but I am struggling a bit to grasp the DOM and how to process it.

<html>
<head>
<script type="text/javascript">
function my_test()
{
    var elements = document.getElementsByTagName("div");
    // prints "found [object HTMLCollection] with length 8"
    alert("found " + elements + " with length " + elements.length);
    // prints "0:[object HTMLDivElement]"
    alert("0:" + elements[0]);
    // how to calculate the following?
    alert("for intereting one is AAAA and three is CCCC");
}
</script>
</head>
<body>

<div class="interesing">
        <div class="one">AAAA</div>
        <div class="two">BBBB</div>
        <div class="three">CCCC</div>
</div>

<div class="boring">
        <div class="one">1111</div>
        <div class="two">2222</div>
        <div class="three">3333</div>
</div>

<input type="button" onclick="my_test()" value="my test" 

</body>
</html>

So elements is now an array of elements and I can access each of them individually. But where can I find what methods/properties these elements have?

A: 

Check out: http://www.w3schools.com/jsref/default.asp

BradBrening
A: 

I personally would use jquery to get access the exact div, because it is much easier and cleaner.

In your case, if you want to access the "boring" div, you will do something like this in jquery:-

$("div.boring").someMethod(..)

Check out this page for more info: http://api.jquery.com/class-selector/

Hope this helps.

limc
+1  A: 

Assuming you want to grab the elements and their children by class and not position, I would just write a short function that will return a collection of elements by class.

<html>
<head>
<script type="text/javascript">
function my_test()
{
    var elements = document.getElementsByTagName("div");
    // prints "found [object HTMLCollection] with length 8"
    alert("found " + elements + " with length " + elements.length);
    // prints "0:[object HTMLDivElement]"
    alert("0:" + elements[0]);
    // how to calculate the following?
    alert("for " + "interesing" + " " + "one" + " is " + C("one",C("interesing")[0])[0].innerHTML + " and " + "three" + " is " + C("three",C("interesing")[0])[0].innerHTML);
}

function C(cls,elm){
    if(!elm) elm = document;
    if(elm.getElementsByClassName) return elm.getElementsByClassName(cls);
    else{
        var t = [];
        var children = elm.getElementsByTagName("*");
        for(var i=0;i<children.length;i++){
            if(children[i].className.match(new RegExp("(^|\\s)" + cls + "($|\\s)"))) t.push(children[i]);
        }
        return t;
    }
}
</script>
</head>
<body>

<div class="interesing">
    <div class="one">AAAA</div>
    <div class="two">BBBB</div>
    <div class="three">CCCC</div>
</div>

<div class="boring">
    <div class="one">1111</div>
    <div class="two">2222</div>
    <div class="three">3333</div>
</div>

<input type="button" onclick="my_test()" value="my test" 

</body>
</html>

Please note that the C function I wrote to get elements by class is not a perfect solution, but it will work well enough in most cases and is easy to write on the fly. The alert works by getting the first element with a class of interesing (C("interesing)[0]) and then using that as a parameter in getting the first child element that has a class of one (C("one",C("interesing")[0])[0]).

If you are looking to grab those elements based on position or tag, then a different solution would be more appropriate. I am just assuming you are looking for those elements based on class, in which case a simple getElementsByClassName function would do all you need.

I hope this helps.

EDIT: It looks like I've solved your alert question but not quite answered the real question... I think. Remember that you can string together getElementsByTagName, so if you want the children div you can simply run a nested for loop, the first cycling through all the div, and if there are children, cycle through those.

Here is an example:

var elements = document.getElementsByTagName("div");
for(var i=0;i<elements.length;i++){
    var str = "Parent DIV(" + elements[i].className + ") has ";
    var children = elements[i].getElementsByTagName("div");
    if(children.length){
        str += "children: ";
        for(var j=0;j<children.length;j++){
            str += "{className:" + children[j].className + ",innerHTML:" + children[j].innerHTML + "},";
        }
    }else{
        str += "no children.";
    }
    alert(str);
}
tau
Thank you for this answer. It fully answers this question, and by modifying it a bit, the first step is taken in achieving the end result I want.
hlovdal
im glad it helped!
tau