Question

我的主要问题是计算最后一条警报信息，但也欢迎任何其他信息。

我正在尝试学习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现在是一个元素数组，我可以单独访问它们。但是我在哪里可以找到这些元素有哪些方法/属性？

Answer 1

假设你想按类而不是位置来抓取元素及其子元素，我只想写一个简短的函数，它将按类返回元素集合。

<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类的第一个子元素的参数（{{ 1}}）。

如果您希望根据位置或标记获取这些元素，那么不同的解决方案会更合适。我只是假设您正在寻找基于类的元素，在这种情况下，一个简单的C("one",C("interesing")[0])[0]函数可以满足您的所有需求。

我希望这会有所帮助。

编辑：看起来我已经解决了你的警报问题，但还没有完全回答真正的问题......我想。请记住，你可以将getElementsByClassName串在一起，所以如果你想要孩子getElementsByTagName，你可以简单地运行一个嵌套的for循环，第一个循环遍历所有div，如果有孩子，循环通过那些。

以下是一个例子：

div

Answer 2

退房：http://www.w3schools.com/jsref/default.asp

如何使用javascript访问给定条件下的子div元素？

2 个答案: