我如何 select 父元素中最外层元素的id？

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>和incclass里面的所有id。我只想得到<p>的id和class盒子的名字，我怎样才能得到它？

Answer 1

替换此行

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

与：

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

这是一个plunkr

Answer 2

如果您确定，div.inc

中将只有 <p> 个元素

那么你可以简单地做

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

如果您不确定第一级元素是什么，那么您可以简单地使用 select 或 select 只有直系子元素，例如

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

Answer 3

替换下一行

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

和

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

我如何 select 父元素中最外层元素的id？

How can I select the id of the outermost element inside a parent element?

javascript

html

element

getelementbyid

selectors-api