Question

我正在尝试理解document对象类型的使用并挑战自己我试图隐藏所有div标记。当我执行该函数时，我返回错误Uncaught TypeError: Cannot set property 'display' of undefined但是我不确定它究竟是什么意思。什么是未定义的？

可以在http://jsfiddle.net/Bdbtq/

找到代码的输出

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta http-equiv="content-language" content="en-us" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="copyright" content="&copy; 2012" />
    <meta name="robot" content="noindex, nofollow" />

    <title>js features</title>

    <base href="" />

    <link rel="stylesheet" type="text/css" media="all" href="" />

    <style type="text/css" media="all">

    </style>
</head>
<body>
    <div id="container">
        <div id="header"></div>
        <div id="content">
            <p>This is sample content</p>
        </div>
        <div id="footer">&copy; 2012</div>
    </div>

    <script type="text/javascript">

    function hideMe() {
        //hide all div elements
        var div = document.getElementsByTagName("div");

        for(var i = 0; i < div.length; i = i + 1) {
            div.style.display="none";
        }
    }

    </script>
    <p onClick="hideMe();">Click to hide</p>
</body>
</html>

Answer 1

Div是元素数组，而不是单个元素。试试这个：

for(var i = 0; i < div.length; i = i + 1) {
    div[i].style.display="none";
}

我认为如果你调用变量divs或类似的东西表明它不是一个元素，那么避免这些错误会更容易。

Answer 2

getElementsByTagName返回一个数组。所以你需要：

    var divs = document.getElementsByTagName("div");

    for(var i = 0; i < divs.length; i = i + 1) {
        divs[i].style.display="none";
    }

Answer 3

此变量div此时是节点列表，而不是单个变量，因为getElementsByTagName()返回节点列表。您需要通过其循环中的数组索引访问它，如div[i]

for(var i = 0; i < div.length; i = i + 1) {
    // div[i] holds the current loop iteration
    div[i].style.display="none";
}

为什么我得到错误Uncaught TypeError：无法在Javascript中设置undefined属性'display'？

3 个答案: