Пошук дочірнього елемента батьківського чистого JavaScript

142

Який найефективніший метод - це знайти дочірній елемент (з класом або ідентифікатором) певного батьківського елемента, використовуючи лише чистий JavaScript. Немає jQuery чи інших фреймворків.

У цьому випадку мені потрібно знайти child1 або child2 з батьків , припускаючи, що дерево DOM може мати кілька елементів класу child1 або child2 у дереві. Я хочу лише батьківських елементів

    <div class="parent">
        <div class="child1">
            <div class="child2">
            </div>
        </div>
    </div>

javascript dom

— Блайд
джерело

stackoverflow.com/questions/7815374/…

— Дмитро Волох

1

Ідентифікація була б найпростішим способом. Вони повинні бути унікальними, так що ви можете просто зробити document.getElementById('element-id').

— Фелікс Клінг

1

Тоді використовуйте регулярні запити dom: прочитайте цей найкращий спосіб отримати дочірні вузли

— Elias Van Ootegem

152

childrenВластивість повертає масив елементів, наприклад так:

parent = document.querySelector('.parent');
children = parent.children; // [<div class="child1">]

Є альтернативи querySelector, як, document.getElementsByClassName('parent')[0]якщо ви цього хочете.

Редагувати: Тепер, коли я замислююся над цим, ви можете просто використати querySelectorAllдля отримання обманщиками parentназви класу child1:

children = document.querySelectorAll('.parent .child1');

Різниця між qS і qSA полягає в тому, що останній повертає всі елементи, що відповідають селектору, тоді як перший повертає лише перший такий елемент.

— Рік Віскомі
джерело

182

Якщо у вас вже є, var parent = document.querySelector('.parent');ви можете зробити це, щоб охопити пошук parentдітей:

parent.querySelector('.child')

— csch
джерело

1

Ви також parent.querySelectorAll('.child')можете повернути NodeList

— schmijos

19

Просто додавши ще одну ідею, ви можете скористатись дочірнім селектором для отримання негайних дітей

document.querySelectorAll(".parent > .child1");

повинні повернути всіх безпосередніх дітей з класом .child1

— Waleed
джерело

Я бачив, як усі пропонують querySelector ніж getElementBy **. Це ефективніше?

— Андре

Можливо, це допоможе. stackoverflow.com/questions/14377590/…

— Waleed

2

У вас є батьківський елемент, ви хочете отримати всі дочірні конкретні атрибути 1. отримати батьківський 2. отримати ім'я батька, використовуючи parent.nodeName.toLowerCase()перетворити ім'я вузла в нижній регістр, наприклад, DIV буде ділом 3. для подальшої конкретної мети, отримайте атрибут батьківський напр parent.getAttribute("id"). це дасть вам idбатько 4. Потім використовуйте, document.QuerySelectorAll(paret.nodeName.toLowerCase()+"#"_parent.getAttribute("id")+" input " ); якщо ви хочете ввести дітей батьківського вузла

let parent = document.querySelector("div.classnameofthediv")
let parent_node = parent.nodeName.toLowerCase()
let parent_clas_arr = parent.getAttribute("class").split(" ");
let parent_clas_str = '';
  parent_clas_arr.forEach(e=>{
     parent_clas_str +=e+'.';
  })
let parent_class_name = parent_clas_str.substr(0, parent_clas_str.length-1)  //remove the last dot
let allchild = document.querySelectorAll(parent_node+"."+parent_class_name+" input")

Розгорніть фрагмент

— Адіо Азез
джерело