我的主要问题是计算最后一条警报消息，但也欢迎任何其他信息。
我正在尝试学习 javascript(稍后与 Greasemonkey 一起使用)，但我在掌握 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>
所以 elements 现在是一个元素数组，我可以单独访问每个元素。但是我在哪里可以找到这些元素有哪些方法/属性？
最佳答案
假设您想按类而不是位置获取元素及其子元素，我只需编写一个简短的函数，该函数将按类返回元素集合。
<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>
请注意，我编写的用于按类获取元素的 C 函数并不是一个完美的解决方案，但它在大多数情况下都可以很好地工作，并且很容易即时编写。该警报的工作方式是获取具有 interesing 类的第一个元素 (C("interesing)[0])，然后将其用作获取第一个子元素的参数其类为 one (C("one",C("interesing")[0])[0])。
如果您希望根据位置或标签抓取这些元素，那么不同的解决方案会更合适。我只是假设您正在寻找基于类的那些元素，在这种情况下，一个简单的 getElementsByClassName 函数就可以满足您所需的一切。
我希望这会有所帮助。
编辑:看起来我已经解决了您的警报问题，但没有完全回答真正的问题......我想。请记住，您可以将 getElementsByTagName 串起来，因此，如果您想要子 div，您只需运行一个嵌套的 for 循环，首先循环遍历所有 div code>，如果有子项，则循环遍历它们。
这是一个例子:
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);
}
关于javascript - 如何使用javascript在给定条件下访问子div元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2842354/