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

Question

我来自python背景，所以如果这听起来很愚蠢，那么请允许我批评。但是我有三个元素，我已经将它们存储在单独的变量中，然后从这些变量中创建一个数组。

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

Uncaught TypeError: item.hasChildNodes is not a function

Answer 1

似乎更容易做

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

<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>

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

由于您使用的每个循环，项目将成为你的关键。在array数组中，item是数组的索引，并且您试图执行函数removeChild on数组索引，这就是为什么得到错误。您需要提供执行功能的确切元素

请参阅代码段。

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); 
 
      } 
 
    }

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

见下面的链接以供参考：” https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

For-each over an array in JavaScript?