Question

除内部HTML外，其他所有内容均正常运行。我从父母那里得到了名字，但是一旦在代码中添加innerHTMl，它就不起作用了。我想从循环中的每个父母那里获取innerHTML，数组...，我不知道为什么它不起作用，我在哪里错了？

示例：

function myFunction() {
  var divs = Array.prototype.slice.call(document.getElementById("container").querySelectorAll('*'));
  var divsname = Array.prototype.slice.call(document.getElementsByClassName("parent"));
  var divshtml = Array.prototype.slice.call(document.getElementsByClassName("parent")).querySelectorAll('*').innerHTML;
  // Loop over the array
  var results = "";
  var name = "";
  divsname.forEach(function(div) {
    name += div.getAttribute("name");
    var innerhtml = "";
    divs.forEach(function(div) {
      innerhtml += divshtml;
    });
    results = "<br> Div element" + name + "have innerHTML" + innerhtml + ".";

  });

  document.getElementById("demo").innerHTML = results;
}

<div id="container">
  <div class="parent" name="parentone">
    <div id="childone" style="height:10px">
      <div id="childtwo" style="background-color:red"></div>
    </div>
  </div>
  <div class="parent" name="parenttwo">
    <div id="childthree" style="height:10px"></div>
  </div>
</div>
<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

请为这个问题指导我。

谢谢

Answer 1

尝试一下：

function myFunction() {
  var divs = Array.prototype.slice.call(document.getElementById("container").querySelectorAll('*'));
  var divsname = Array.prototype.slice.call(document.getElementsByClassName("parent"));
  
  var temp = document.querySelectorAll("*");
  var divshtml = Array.prototype.slice.call(temp).innerHTML;
  // Loop over the array
  var results = "";
  var name = "";
  divsname.forEach(function(div){
    name += div.getAttribute("name");
  var innerhtml = "";
  divs.forEach(function(div){
    innerhtml += divshtml;
  });
    results = "<br> Div element" + name + "have innerHTML" + innerhtml;

  });

  document.getElementById("demo").innerHTML = results ; 
}

querySelectorAll是DOM元素上的一种方法，该方法接受CSS选择器并返回匹配元素的静态NodeList。

Array.prototype.slice.call是将NodeList（其作用类似于数组，但没有Array.prototype的方法）转换为真实数组的一种方法。

Answer 2

由于document.getElementByClassName不是函数，因此您应尝试使用id

  var divshtml = Array.prototype.slice.call(document.getElementById("parent").querySelectorAll('*'));

在HTML中：

  <div id="parent" name="parenttwo" >

Answer 3

通过类，您可以这样做，它将为您提供该类节点之间的所有内部节点元素：

let divshtml = Array.prototype.slice.call(document.getElementsByClassName("randerHTML")[0].querySelectorAll('*'));

注意：它将返回NodeList而不是诸如innerHTML之类的字符串

为什么在添加innerHTML之后循环和数组停止工作？

3 个答案: