Question

这是我用于Div标签的JavaScript的onMouseOver事件处理程序。（它工作正常，至少在Chrome和IE中）：

function changeCallout(sender, e) {
    document.getElementById(sender.id).className = "callout2";
}

我希望能够设置Div中包含的H2标签的颜色属性，使其类更改。

我知道我应该能够访问color属性或更改类，但我无法弄清楚如何只访问相应的H2标记（我知道getElementsByTagName）。这样做的语法是什么？

TIA。

Answer 1

document.getElementById(sender.id).getElementsByTagName('h2')将返回具有给定id的元素内所有H2元素的NodeList。

Answer 2

假设所需的h2是目标div下的第一个，请使用以下内容相对于div进行搜索：

var div = document.getElementById(sender.id);
var h2 = div.getElementsByTagName("h2")[0];

如果不是第一个，只需将0更改为n（在第二行），其中n是所需标题的位置。

Answer 3

是的，getElementsByTagName可以解决问题，但请记住它也会获得嵌套元素。例如，如果div中有一个带有h2元素的div，那么它们也将被转储到数组中。

我知道这不是你的问题，但你不需要让sender元素的id在代码中使用它;只需使用this关键字作为参数，元素就会传递给函数。它适用于内联html元素和eventListener调用，您不需要使用getElementById。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
            div {width:100px;height:100px;background-color:#F00;}
            </style>
    </head>
    <body>

        <div onclick="onClick(this)">I'm a div</div>

        <script>
            function onClick(div) {
                alert(div.innerHTML);
            }
            </script>
    </body>
</html>

如何动态访问特定Div标签的元素？

3 个答案: