querySelector() - 第一个内部元素

Question

我正在使用SVG.js的select()函数，该函数使用querySelector()函数。

目前，我使用的命令是：select("[id='1']")（1可以替换为其他数字）

我想要做的是选择此元素内的第一个内部元素。或者，我可以通过标签名称进行选择。

如何实现？

我尝试了select("[id='1']:first")，但收到了错误消息。

顺便说一下，我这样选择的原因是，显然querySelector对于数字ID存在问题。

- Elimination

---

现在没有人知道为什么会发生这种情况了。"但它很挑衅，让人们兴奋起来！"我投票支持你以帮助你。当一些随机的人没有实际贡献时，我非常不喜欢他们这样做。有一种理论是他们想要获得给予这样做的人的徽章。 - suchislife

最好避免使用数字ID（参考：https://dev59.com/83VD5IYBdhLWcg3wJIEK）。 - Robert Longson

@RobertLongson，目前我无法更改这些ID。 - Elimination

期望生活变得艰难。CSS 期望标识符不以数字开头。 - Robert Longson

Answer 1

:first 是 jQuery 中的一个东西。对于你正在做的事情，你可以使用 :first-child，它是 CSS 中的一个东西：

select("[id='1'] > :first-child");

该选择器匹配所有作为具有 id="1" 的元素的第一个子元素的元素，但如果 select 在底层使用的是 querySelector，则您将获得第一个这样的元素。

请注意，其中的 > 是 子组合器：它意味着我们正在查找 [id='1'] 内的 :first-child。（此答案的早期版本使用了 [id='1'] :first-child，它使用了 后代组合器 [仅空格]。对于选择一组元素很重要，但如果仅在第一次匹配时选择，则不重要。）（您需要其中之一，因为没有任何组合器（[id='1']:first-child），它将寻找第一个也是 :first-child 的 [id='1']。）

- T.J. Crowder

---

实际上，它对我不起作用：Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Element': '[id='1'] : first-child' is not a valid selector. - Elimination

@Elimination：在冒号后面去掉那个空格。 - BoltClock

@Elimination：正如BoltClock所说，: first-child与:first-child不同。在CSS选择器中，空格是重要的（例如，div.foo、div .foo和div. foo也都是不同的，其中最后一个是无效的）。 - T.J. Crowder

我自己永远猜不到，代码中空格的重要性是相当罕见的。 - Elimination

@消除歧义：CSS 在某种程度上有些不同寻常，因为标记之间的空格是有意义的，但大多数语言对标记内部的空格都很敏感。在 :first-child 中放置一个空格就像在 10.4 中放置一个空格一样，这也会导致错误。在这两种情况下，它们都是语言基本标记内部的意外空格。但无论如何，现在你知道了：CSS 是敏感于空格的。 :-) - T.J. Crowder

Answer 2

"我正在使用SVG.js的select()函数，该函数使用querySelector()函数。"

但是你在TJ的答案下的评论表明它使用了querySelectorAll()。这是有区别的。

"我想要做的是选择这个元素内部的第一个内部元素。"

如果确实使用querySelector，则使用此选择器：

"[id='1'] > *"

这将给你返回在[id='1']元素内的第一个子元素。

但是如果实际使用的是querySelectorAll，那么使用TJ的:first-child选择器将起作用，但正如他指出的那样，你需要注意它会返回所有作为其父元素的第一个子元素的元素。

你可以使用>子选择器来确保只返回一个元素。

"[id='1'] > :first-child"

"或者，我可以按标签名称选择它。如何做到？"

我不知道您所指的元素是哪个，但通常情况下，如果选择器是根据属性或位置进行选择，则包括标签名称将大大帮助引擎缩小元素集合。

// querySelector       // querySelectorAll
"div[id='1'] > p" ... "div[id='1'] > :first-child"

"我尝试了select("[id='1']:first")但是收到了一个错误。"

正如TJ所指出的那样，这是一个无效的选择器。jQuery的选择器引擎在多个方面不符合标准。尽可能保持你的选择器纯粹，这样你就不会陷入不必要的依赖。

"顺便说一下，我选择它的原因是显然querySelector对数字ID存在问题。"

如果你转义前导数字，就可以通过数字进行选择。

"#\\1 > *"

- user8897421

---

感谢您提供详细的答案。关于 querySelectorAll()，您说得对，但这并不影响语法问题，是吗？在这方面，这两个函数是相同的。 - Elimination

@消除：语法没有区别，但是得到的结果不同。使用TJ的答案，如果有比一级更深的嵌套元素，则会使用querySelectorAll获取多个元素，但是如果使用>选择器，则可以通过:first-child保证只匹配一个元素，因为一个元素只能有一个直接后代是:first-child。 - user8897421

这里有一个演示：https://jsfiddle.net/gyv656uj/ 但是使用 querySelector，它就不是问题了，因为你无论如何都只会得到一个单一的元素。所以这会影响结果和需要执行的工作量。 - user8897421