Нахождение дочернего элемента родительского чистого JavaScript

142

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

В этом случае мне нужно будет найти child1 или child2 родительского элемента , предполагая, что дерево DOM может иметь несколько элементов класса child1 или child2 в дереве. Я хочу только элементы родителя

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

javascript dom

— Blyde
источник

stackoverflow.com/questions/7815374/…

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

1

ID будет самым простым способом. Они должны быть уникальными, так что вы можете просто сделать document.getElementById('element-id').

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

1

Затем используйте регулярные dom-запросы: прочтите этот лучший способ получить дочерние узлы

— Элиас Ван Оотегем,

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

20

Просто добавив еще одну идею, вы можете использовать дочерний селектор, чтобы получить непосредственных детей

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

должен вернуть всех ближайших детей с классом .child1

— Валид
источник

Я видел, как все предлагают querySelector, а не getElementBy **. Это более эффективно?

— Андре

Может быть, это поможет. stackoverflow.com/questions/14377590/…

— Валид

2

У вас есть родительский элемент, вы хотите получить все дочерние элементы определенного атрибута 1. получить родительский 2. получить родительское имя узла с помощью parent.nodeName.toLowerCase()преобразования имени узла в нижний регистр, например, DIV будет 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")

Развернуть фрагмент

— Адио Азиз
источник