Question

我试图使用JS或jQuery从DOM获取特定的子节点。我想到了如何获取包含该节点的NodeList，但documentation仅指定可以通过索引访问节点。这似乎有风险，因为我无法保证他们的订单。

$(".axis")[0].childNodes()

返回以下NodeList [...]


0: <g class="tick" style="opacity: 1;" transform="translate(0,319.94835680751174)">

1: <g class="tick" style="opacity: 1;" transform="translate(0,237.31924882629104)">

2: <path class="domain" d="M0,1H0V353H0" style="fill: none; stroke: rgb(34, 34, 34); shape-rendering: crispedges;">

3: <text>

length: 4

我怀疑循环遍历每个节点并检查其HTML类或类型是最好的方法。我尝试了$(".axis")[0].childNodes.getElementsByClass("domain")，但这会返回TypeError: $(...)[0].childNodes.getElementsByClass is not a function.

他们是通过类型或类更直接地访问它们的方式吗？

Answer 1

jQuery中有两种方法find()和children()方法。

它们都返回与父节点的后代选择器匹配的元素，但是children()只搜索后代子级的第一级，而find()将遍历所有子级 - 显然children()是更快执行时间的首选方法。

一个例子

$('#parent').find('.foo').addClass('bar');

会将类bar添加到#parent元素中具有类名foo

的每个元素中

，而

$('#parent').children('.foo').addClass('bar');

只返回此DOM结构中最外层的.foo元素：

<div id="parent">
  <p class="foo"></p>
  <div>
    <p class="foo"></p>
  </div>
</div>

按类型或类而不是索引获取子节点

1 个答案: