Question

如何从容器中的子元素获取属性而不从父元素获取属性？我想在代码中不显示父属性，我尝试过：

Array.prototype.slice.call (document.getElementById ("container"). GetElementsByClassName ("wp-activ").querySelectorAll('*'))

但是它不起作用。...

这是我的代码：

<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 class="parent" name="parentthree" >
        <div id="childfour" style="height:10px"></div>
    </div>
</div>
<button onclick="myFunction()">Try it</button>

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

function myFunction() {

  var divs = Array.prototype.slice.call(document.getElementById("container").querySelectorAll('*'));
  // Loop over the array
  var results = "";

  var attri = "";
  divs.forEach(function(div){
        attri += div.getAttribute("style");

  });

    results = attri;

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

}

Answer 1

Document.querySelectorAll()使您可以使用复杂的选择器来查找所有符合条件的元素。您可以使用document.querySelectorAll('#container .parent *')来查找.parent下#container下的所有元素，而无需让父母自己。

注意：由Document.querySelectorAll()生成的NodeList集合具有本机NodeList.forEach()方法，因此您无需将其转换为数组。如果您确实希望将其转换为数组，请使用Array.from()。

function myFunction() {
  var results = [];
  
  document.querySelectorAll('#container .parent *')
    .forEach(function(div) {
      results.push(div.getAttribute("style"));
    });


  document.getElementById("demo").innerHTML = results.join(', ');

}

<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 class="parent" name="parentthree">
    <div id="childfour" style="height:10px"></div>
  </div>
</div>
<button onclick="myFunction()">Try it</button>

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

如何从子元素获取属性？

1 个答案: