Выберите узел из дочерних элементов по атрибуту

Question

У меня есть интерфейс, который переключается между отображением различных элементов div. Когда он переключает какой элемент, который он отображает, мне нужно получить доступ к определенному дочернему узлу этого элемента div, причем каждый элемент div имеет свои дочерние элементы по-разному.

Свойства childNodes и children возвращают объект, который может выбирать только детей с элементом (индексом), который раздражает использование в качестве индекса дочернего элемента, в каждом div. Для Protractor я использовал webmanager.by (селектор), который смог выполнить поиск с другими параметрами, чем индекс. Есть ли что-то подобное, которое я могу использовать для выбора дочернего узла с релевантным data = "true". Я также не уверен, что этот атрибут является лучшим способом указать в HTML, какой дочерний узел является релевантным.

Это угловое приложение, если это помогает.

Answer 1

Если вы хотите, чтобы выбрать дочерний узел с данными соответствующих = «истина» из некоторого исходного элемента, можно использовать метод выбора

element.querySelector()
Это будет возвращать первое согласование элемент ...

в вашем конкретном случае это может быть что-то вроде

родитель element.querySelector ("[данных соответствующих = 'истина']");

или если вы хотите, чтобы выбрать все пункты р со значением атрибута данных релевантных истинным внутри родительского DIV: parentDiv.querySelectorAll («р [данные отношения =„истина“]»);

Вы можете найти некоторые примеры на http://www.w3.org/TR/selectors-api/#processing-selectors

В качестве альтернативы можно использовать специальный класс для идентификации которых дочерний узел имеет отношение ... вы могли бы получить этот элемент/или множество элементов с getElementsByClassName (someClassName)

Пример кода с .querySelectorAll() метод:

<script type="text/javascript"> 

    window.addEventListener("load", init, false); 

function init(){ 
    var parentDiv = document.getElementById("divWithChildren"); 
    var relevantChildren = parentDiv.querySelectorAll("[data-relevant='true']"); 
    alert (relevantChildren[2].id); // this will give the id of the 3rd child element with data-relevant='true' 
} 

</script>