Question

在文档中，我可以使用document.getElementById()来获取特定唯一元素的句柄。

如何作为参数给出一组相同的内容。

 <g id="right_hook">
  <circle id="wheeltap" r="3" stroke-width="1" />
  <path d="M 0 0 L 200 0 A 5,5 0 0,1 200,20" stroke-width="4" />
 </g>

如果我将此组传递给函数：

 function some( hook ) {
  var tap1= hook.wheeltap;    // does not work
  var tap2= hook.getElementById("wheeltap");   // does not work
}

有什么用？

我这样做的原因是我有多个类似的对象，我想在JavaScript中制作动画。我当然可以为每个子对象提供全球唯一的名称（s.a。“right_hook_wheeltap”，“left_hook_wheeltap”，但这很糟糕。

Answer 1

我只是看了this one并认为可能会使用childNodes来完成任务。

e.g。

getElementById("SVG").childNodes

BTW，看看jQuery.SVG插件（link）

Answer 2

getElementById正试图通过它的唯一ID来查找元素。 DOM specification states:

getElementById ...返回元素其ID由elementId给出。如果不这样的元素存在，返回null。 如果多个元素具有此ID ，则不会定义行为。

如果您对您感兴趣的hook元素有引用，那么我建议使用getElementsByTagName（返回具有指定标记名称的元素集合）：

function some( hook ) {
  var taps = hook.getElementsByTagName("circle");
  var tap1 = taps[0]; // should contain the element you're looking for
  ...
}

或者，正如Tzury Bar Yochay所说，如果jQuery.SVG是一个选项，它将使选择器更容易使用。

Answer 3

如果您可以使用最新的浏览器版本，则可以使用Selectors API来执行此操作。

你想要的似乎是QuerySelector：

var rh = document.getElementById("right_hook");
var wheel = rh.querySelector("#wheeltap");

我还没有验证它是否适用于非唯一ID：但是。

如何处理SVG <g>组中的条目？</g>

3 个答案: