如何从子元素中获取属性？

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 *')来查找位于#container下的.parent下的所有元素，而无需自己获取父母。

注意： 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>