时间戳

首页 > 解决方案 > 按类型或类而不是索引获取子节点

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

问题描述

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

$(".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.

它们是按类型或类访问它们的更直接的方式吗？

标签： javascriptjqueryhtmlparent-child

解决方案

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

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

一个例子

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

将类添加到具有类名bar的元素中的每个元素#parentfoo

然而

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

只会.foo从这个 DOM 结构返回最外层的元素：

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

推荐阅读