Как сделать querySelectorAll выбирать только из дочерних элементов текущего элемента

Question

Я спрашиваю, как реализовать эквивалентную функциональность jQuery's children() с помощью запроса HTML5Slector/querySelectorAll, то есть как я могу назначить текущий элемент в селекторе шаблон.

Например:

<div id="foo"> 
    <div class="bar" id="div1"> 
     <div class="bar" id="div1.1"> 
     </div> 
    </div> 
    <div class="bar" id="div2"></div> 
    </div> 

С document.getElementById('foo').querySelectAll('div.bar') будут выбраны все три div s. Что делать, если я только хочу получить div1 и div2, а не div1's div1.1? Как написать [[current node]] > div.bar как css-селектор?

Может ли кто-нибудь пролить свет на это?

Answer 1

Вы можете просто использовать, как это:

document.querySelectorAll('#foo > p.bar') 

Answer 2

Там нет Селектор для обозначения элемента, из которого .querySelectorAll называлась (хотя я думаю, что, возможно, было предложено что-то).

Таким образом, вы можете не ничего сделать так:

var result = document.getElementById('foo').querySelectorAll('[[context]] > p.bar'); 

---

Что вам нужно будет выбрать из документа, и включают в себя #foo ID в селекторе.

var result = document.querySelectorAll("#foo > p.bar"); 

---

Но если вы должны начать с элемента, один из вариантов будет взять его идентификатор (если он есть) и сцепить его в селекторе.

var result = document.querySelectorAll("#" + elem.id + " > p.bar"); 

---

Если это возможно, что элемент не имеет идентификатора, то вы можете временно дать ему один.

var origId = elem.id 

if (!origId) { 
    do { 
     var id = "_" + Math.random().toString(16) 
    } while (document.getElementById(id)); 

    elem.id = id; 
} 

var result = document.querySelectorAll("#" + elem.id + " > p.bar"); 

elem.id = origId; 

Answer 3

В вашем примере вы имеете did id="foo", поэтому приведенный выше пример работает.

Но в ситуации, когда родительский элемент не имеет ID, но вы все еще хотите использовать querySelectorAll, чтобы получить немедленные детей - это также можно использовать :scope ссылаться на элемент, как это:

var div1 = document.getElementById('div1'); //get child 
    var pdiv = div1.parentNode; //get parent wrapper 
    var list = pdiv.querySelectorAll(':scope > div.bar'); 

Здесь запрос будет быть «корни» в pdiv элемент ..

Answer 4

на самом деле существует псевдо-класс:scope для выбора текущего элемента, однако, это не обозначен как поддерживаются любым Versio n от MS Internet Explorer.

document.getElementById('foo').querySelectAll(':scope>div.bar')