Question

我来自python背景，所以如果这听起来很傻，请不要批评我。但是我有两个来自dom的元素，我已经存储在它们的单独变量中，然后用这些变量创建一个数组。

var item = document.getElementById("s-tools");
var item2 = document.getElementById("s-tools2");
var item3 = document.getElementById("s-tools3");
var arr = [item, item2, item3]

现在我试图在for循环中迭代这个dom对象数组，并从这些项中删除子元素。

 for (var item in arr) {
     while (item.hasChildNodes()) {
          item.removeChild(item.lastChild);
          }
     }

然后它抛出以下错误，并且项目中的值为0

未捕获的TypeError：item.hasChildNodes不是函数

Answer 1

由于您使用的是每个循环，项目将是您的密钥。在数组中，case是数组的数组索引，并且您尝试在数组索引上执行函数 removeChild，这是导致错误的原因。您需要为要执行的函数提供确切的元素

请参阅代码段。

＆＃13;

var item = document.getElementById("s-tools");
var item2 = document.getElementById("s-tools2");
var item3 = document.getElementById("s-tools3");
var arr = [item, item2, item3]

 for (var item in arr) {
     while (arr[item].hasChildNodes()) {
          arr[item].removeChild(arr[item].lastChild);
          }
     }

＆＃13;

<div id="s-tools">
  <p>para</p>
</div>
<div id="s-tools2"><p>para</p>
</div>
<div id="s-tools3"><p>para</p></div>

＆＃13;

见以下链接供参考：＆＃34; https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

For-each over an array in JavaScript?

Answer 2

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

for ... in循环不会迭代值。它迭代属性名称。试试这个。

for (var name in arr) {
    var item = arr[name];
    while (item.hasChildNodes()) 
        ....

Answer 3

似乎更容易做到

＆＃13;

document.querySelectorAll('#s-tools, #s-tools2, #s-tools3').forEach( el => {
  while (el.firstChild) el.firstChild.remove();
});

＆＃13;

<div id="s-tools">
  <span>child 1</span>
</div>
<div id="s-tools2">
  <span>child 2</span>
  child 3
</div>
<div id="s-tools3">
  <div>child 4</div>
</div>

＆＃13;

如何将dom元素传递给javascript函数？

3 个答案: