Javascript 按属性从子节点中选择节点

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

childNodes和children属性都返回一个对象，该对象只能选择具有item（index）的子元素，这很烦人，因为相关子元素的索引在每个div中都不同。对于量角器，我使用了webmanager.by（selector），它能够使用除index之外的其他参数进行搜索。我是否可以使用类似的方法来选择data related=“true”的子节点。我也不确定该属性是否是在HTML中指定哪个子节点相关的最佳方法

---

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

如果要从某个父元素中选择数据相关为“true”的子节点，可以使用选择器方法

元素。querySelector（）
这将返回第一个匹配的元素

在你的特殊情况下，它可能是

父元素。querySelector（“[data related='true']”）

或者，如果要选择父div中数据相关属性值为true的所有段落p:parentDiv.queryselectoral（“p[data related='true']）

你可以在网上找到一些例子

另一种方法是使用一个特殊的类来识别哪个子节点是相关的。。。 您可以使用getElementsByClassName（someClassName）获取此元素/或许多元素

使用.querySelectorAll（）方法编写示例代码：

addEventListener（“加载”，init，false）；
函数init（）{
var parentDiv=document.getElementById（“divWithChildren”）；
var relevantChildren=parentDiv.queryselectoral（“[data relevant='true']”）；
alert（relevantChildren[2].id）；//这将给出第三个子元素的id，其中数据relevant='true'
}

请发布您的代码。

<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>