How to access child div elements under a given condition with javascript?
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>
开发者_如何学Go <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?
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);
}
Check out: http://www.w3schools.com/jsref/default.asp
加载中,请稍侯......
精彩评论