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

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不是一个函数。

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

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>