javascript - 按属性从子节点中选择节点

Question

我有一个界面，可以在显示不同的 div 元素之间切换。当它切换显示哪个元素时，我需要访问该 div 元素的特定子节点，每个 div 元素的子节点排列不同。

childNodes 和 children 属性都返回一个对象，该对象只能选择带有 item(index) 的子元素，使用起来很烦人，因为相关子元素的索引在每个 div 中都是不同的。对于 Protractor，我使用了 webmanager.by(selector)，它能够使用索引以外的其他参数进行搜索。有没有类似的东西我可以用来选择数据相关=“真”的子节点。我也不确定该属性是否是在 HTML 中指定哪个子节点相关的最佳方式。

如果有帮助，这是一个 Angular 应用程序。

Answer 1

如果你想从某个父元素中选择 data-relevant="true"的子节点，你可以使用选择器方法

element.querySelector()
这将返回第一个匹配元素...

在你的具体情况下，它可能是这样的

parent-element.querySelector( "[data-relevant='true']");

或者如果您想选择父 div 中数据相关属性值为 true 的所有段落 p:parentDiv.querySelectorAll( "p[data-relevant='true']");

你可以在上面找到一些例子 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>