如何修复JavaScript中“无法读取属性'getElementsByClassName'的null”错误[重复]

问题描述 投票:-1回答:1

我正在努力学习JavaScript。我有一个测试文件,但它给了我一个错误。结果应该是3个空div。

Error: Cannot read property 'getElementsByClassName' of null

我试过调试并更改item = template.getElementsByClassName(“main”); to item = template.querySelectorAll(“#template div”);

HTML

<body>
    <script src="test.js" charset="utf-8"></script>
    <template id="test">
      <div class="main">
        <div class="">

        </div>
      </div>
    </template>
    <div class="site">

    </div>
  </body>

JavaScript的

var template, item, site, i, a;

template=document.getElementById("test");
item=template.getElementsByClassName("main");

site=document.getElementsByClassName("site");
for(i=0; i<3; i++){
  a=document.importNode(item, true);
  site.appendChild(a);
}

javascript html html5 dom
1个回答
-1
投票

它不起作用的原因是你试图获取3个类名为“main”的元素。但只有1存在,这就是为什么它抱怨它无法读取不存在的东西的属性。所以我更新了代码以获取3个空div

此外,最后一个div是站点div,并且您正在尝试向其添加元素。您将遇到一个问题,您将尝试将自身添加到自身。我稍微更新了代码,因此您不会遇到此问题

var template, item, site, i, a;

template=document.getElementById("test");
item=template.querySelectorAll("#template div");

site=document.getElementsByClassName("site")[0];
for(i=0; i<item.length; i++){
  a=document.importNode(item, true);
  site.appendChild(a);
}
© www.soinside.com 2019 - 2024. All rights reserved.