Question

例如，我有一个<div>，因此在我的<div>内我有一些带有ID的元素，例如<label>，<span>和<p>我的代码上出现的元素是<p>

<div id = 'cont' class = 'inc'>
   <p id = '1' class = 'box'>
      <label id ='aa' class = 'innerbox'><span id = 'aaa' class = 'innerboxs'></span></label>
   </p>

 <p id = '2' class = 'box'>
          <label id ='aa' class = 'innerbox'><span id = 'aaa' class = 'innerboxs'></span></label>
       </p>

 <p id = '3' class = 'box'>
          <label id ='aa' class = 'innerbox'><span id = 'aaa' class = 'innerboxs'></span></label>
       </p>
</div>

基于上面的示例，在<div>之后，<p>是它发生的第一个子元素。我们假设我想通过此代码获取他们的ID。

function checkContents(){
    var output = "";
    var elements = document.querySelectorAll('.inc [id]'),
    ids = Array.prototype.map.call(elements, function(element) {
        return element.id;
    });
    output = 'ids = ' + JSON.stringify(ids, null, '  ');
    alert(output);
}

此函数输出<div>内inc类的所有id。我只想获得<p>的id，其类名为box，我怎么能得到它？

Answer 1

如果您确定，<p>

中只会有div.inc个元素

然后你可以简单地做

var elements = document.querySelectorAll('.inc p');

如果你不确定什么是第一级元素，那么你可以简单地使用选择器来选择直接的孩子，如

var elements = document.querySelectorAll('.inc > *'),

Answer 2

替换以下行

var elements = document.querySelectorAll('.inc [id]')

与

var elements = document.querySelectorAll('.inc p[id]'),

如何选择父元素中最外层元素的id？

2 个答案: