Question

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

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

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

Answer 1

如果要从某个父元素中选择数据相关=“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>

从子属性中选择节点属性

1 个答案: