Використання querySelectorAll для отримання прямих дітей

Я вмію це робити:

<div id="myDiv">
   <div class="foo"></div>
</div>

myDiv = getElementById("myDiv");
myDiv.querySelectorAll("#myDiv > .foo");

Тобто я можу успішно отримати всіх прямих дітей myDivелемента, які мають клас .foo.

Проблема полягає в тому, що мене турбує те, що я повинен включати #myDivв селектор, тому що я виконую запит на myDivелементі (тому він, очевидно, зайвий).

Я повинен мати змогу залишити #myDivвимкнено, але тоді селектор не є юридичним синтаксисом, оскільки він починається з а >.

Хтось знає, як написати селектор, який отримує лише прямих дітей елемента, на якому працює селектор?

Гарне питання. На той момент, коли його запитували, не існував універсально реалізований спосіб робити "запити з укоріненими комбінаторами" (як їх називав Джон Ресіг ).

Тепер : введено псевдоклас сфери . Він не підтримується у [до-Chrominum] версіях Edge або IE, але він підтримується Safari вже кілька років. Використовуючи це, ваш код може стати:

let myDiv = getElementById("myDiv");
myDiv.querySelectorAll(":scope > .foo");

Зауважте, що в деяких випадках ви можете також пропустити .querySelectorAllта використовувати інші хороші старомодні функції DOM API. Наприклад, замість myDiv.querySelectorAll(":scope > *")вас можна було просто написати myDiv.children, наприклад.

Інакше, якщо ви ще не можете покластися :scope, я не можу придумати інший спосіб вирішити вашу ситуацію, не додавши більше власної логіки фільтра (наприклад, знайти myDiv.getElementsByClassName("foo")чию .parentNode === myDiv), і, очевидно, не ідеально, якщо ви намагаєтесь підтримати один шлях коду, який дійсно просто хоче взяти довільну рядок селектора як вхідний і список збігів як вихід! Але якщо, як я, ви в кінцевому підсумку задавали це питання просто тому, що ви застрягли, думаючи, що "у вас був молоток", не забувайте, що існує ще безліч інших інструментів, які DOM пропонує.

Хтось знає, як написати селектор, який отримує лише прямих дітей елемента, на якому працює селектор?

Правильний спосіб записати селектор, який "укорінений" до поточного елемента, - це використовувати :scope.

var myDiv = getElementById("myDiv");
var fooEls = myDiv.querySelectorAll(":scope > .foo");

Однак підтримка веб-переглядача обмежена, і вам потрібно буде шим, якщо ви хочете ним скористатися. Для цього я створив scopedQuerySelectorShim .

Ось гнучкий метод, написаний у ванільній JS, який дозволяє запускати запит селектора CSS над лише прямими елементами елемента:

var count = 0;
function queryChildren(element, selector) {
  var id = element.id,
      guid = element.id = id || 'query_children_' + count++,
      attr = '#' + guid + ' > ',
      selector = attr + (selector + '').replace(',', ',' + attr, 'g');
  var result = element.parentNode.querySelectorAll(selector);
  if (!id) element.removeAttribute('id');
  return result;
}

якщо ви точно знаєте, елемент унікальний (наприклад, ваш випадок із ідентифікатором):

myDiv.parentElement.querySelectorAll("#myDiv > .foo");

Для більш "глобального" рішення: (використовуйте matchSelector shim )

function getDirectChildren(elm, sel){
    var ret = [], i = 0, l = elm.childNodes.length;
    for (var i; i < l; ++i){
        if (elm.childNodes[i].matchesSelector(sel)){
            ret.push(elm.childNodes[i]);
        }
    }
    return ret;
}

де elmваш батьківський елемент, і selваш вибір. Цілком може бути використаний і в якості прототипу.

Наступне рішення відрізняється від запропонованих до цього часу і працює для мене.

Обґрунтування полягає в тому, що ви вибираєте спочатку всіх відповідних дітей, а потім фільтруєте тих, які не є прямими дітьми. Дитина - це пряма дитина, якщо у неї немає відповідного батька з тим самим селектором.

function queryDirectChildren(parent, selector) {
    const nodes = parent.querySelectorAll(selector);
    const filteredNodes = [].slice.call(nodes).filter(n => 
        n.parentNode.closest(selector) === parent.closest(selector)
    );
    return filteredNodes;
}

HTH!

Я створив функцію для вирішення цієї ситуації, думав, що поділюсь нею.

getDirectDecendent(elem, selector, all){
    const tempID = randomString(10) //use your randomString function here.
    elem.dataset.tempid = tempID;

    let returnObj;
    if(all)
        returnObj = elem.parentElement.querySelectorAll(`[data-tempid="${tempID}"] > ${selector}`);
    else
        returnObj = elem.parentElement.querySelector(`[data-tempid="${tempID}"] > ${selector}`);

    elem.dataset.tempid = '';
    return returnObj;
}

По суті, те, що ви робите, - це генерувати випадковий рядок (функція randomString тут є імпортним модулем npm, але ви можете зробити свій власний.), Використовуючи цю випадкову рядок, щоб гарантувати отримання елемента, який ви очікуєте в селекторі. Тоді ви зможете скористатися >після цього.

Причиною того, що я не використовую атрибут id, є те, що атрибут id вже може бути використаний, і я не хочу його переосмислювати.

Ми можемо легко отримати всіх прямих дітей елемента, використовуючи, childNodesі ми можемо вибрати предків із певним класом querySelectorAll, тому не важко уявити, що ми могли б створити нову функцію, яка отримує і те, і інше і порівнює два.

HTMLElement.prototype.queryDirectChildren = function(selector){
  var direct = [].slice.call(this.directNodes || []); // Cast to Array
  var queried = [].slice.call(this.querySelectorAll(selector) || []); // Cast to Array
  var both = [];
  // I choose to loop through the direct children because it is guaranteed to be smaller
  for(var i=0; i<direct.length; i++){
    if(queried.indexOf(direct[i])){
      both.push(direct[i]);
    }
  }
  return both;
}

Примітка. Це поверне масив вузлів, а не NodeList.

Використання

 document.getElementById("myDiv").queryDirectChildren(".foo");

Хочеться додати, що ви можете розширити сумісність : obseg , просто призначивши тимчасовий атрибут тимчасового атрибуту.

let node = [...];
let result;

node.setAttribute("foo", "");
result = window.document.querySelectorAll("[foo] > .bar");
// And, of course, you can also use other combinators.
result = window.document.querySelectorAll("[foo] + .bar");
result = window.document.querySelectorAll("[foo] ~ .bar");
node.removeAttribute("foo");

Я б пішов з

var myFoo = document.querySelectorAll("#myDiv > .foo");
var myDiv = myFoo.parentNode;

Я просто роблю це, навіть не намагаючись. Це би спрацювало?

myDiv = getElementById("myDiv");
myDiv.querySelectorAll(this.id + " > .foo");

Спробуйте, може, це може, можливо, і ні. Вибачте, але я зараз не на комп’ютері, щоб спробувати це (відповідаючи зі свого iPhone).