如何在给定条件下使用javascript访问子div元素？
[英]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. 我正在尝试学习javascript（以后要与油脂猴子一起使用），但是我在努力理解DOM及其处理方式方面有些挣扎。
<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. 所以elements现在是一个元素数组，我可以分别访问每个元素。 But where can I find what methods/properties these elements have? 但是我在哪里可以找到这些元素具有哪些方法/属性？
2 个解决方案
解决方案1
1 已采纳 2010-05-16 06:32:29
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. 请注意，我编写的用于按类获取元素的C函数并不是一个完美的解决方案，但它在大多数情况下都能很好地工作，并且易于即时编写。 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] ). 警报作品通过使第一元件一类的interesing （ C("interesing)[0]然后使用根据在获得具有一个类的第一子元件的参数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. 我只是假设您正在基于类查找那些元素，在这种情况下，简单的getElementsByClassName函数将满足您的所有需求。
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. 请记住，您可以将getElementsByTagName串在一起，因此，如果您希望孩子div可以简单地运行一个嵌套的for循环，则首先遍历所有div ，如果有孩子，则遍历这些div 。
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);
}
解决方案2
0 2010-05-16 02:08:15
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.