Javascript querySelector（）-第一个内部元素

我使用的是SVG.js select（）函数，它使用querySelector（）函数

目前，我使用的命令是：

select（[id='1']）

（1可以被其他数字替换）

我想做的是选择这个元素中的第一个内部元素。或者，我可以通过标记名来选择它

怎么做

我尝试了

选择（“[id='1']：first”）

，但收到了一个错误

---

顺便说一下，我这样选择它的原因是querySelector显然对id有问题，id是数字

：首先

是jQuery的东西。对于正在执行的操作，可以使用

：first child

，即：

该选择器将作为元素的第一个子元素的所有元素与

id=“1”

匹配，但如果

select

在封面下使用

querySelector

，则将获得第一个此类元素

请注意，其中的

是：这意味着我们正在

[id='1']

中寻找

:first child

。（此答案的早期版本使用了

[id='1']：first child

，它只使用了一个[空白]。选择元素列表很重要，但如果只在第一次匹配时选择，则不重要。）（您需要一个或另一个，因为没有任何组合符（

[id='1']：first child

），它将查找第一个

[id='1']

那也是一个

：第一个孩子

）

“我正在使用SVG.js

select（）

函数，它使用

querySelector（）

函数。”

但是你在TJ的答案下的评论表明它使用了

queryselectoral（）

。这是不同的

“我要做的是选择此元素中的第一个内部元素。”

如果确实使用了

查询选择器

，则使用此选择器：

"[id='1'] > *"

这将为您提供

[id='1']

元素中的第一个子元素

但如果它实际使用了

querySelectorAll

，那么使用TJ的

：first child

选择器将起作用，但正如他所指出的，您需要注意的是，它将返回作为其父元素的第一个子元素的所有元素

您可以使用

>

子选择器确保只有一个

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

或者，我可以按标记名选择。如何选择

我不知道您指的是哪个元素，但一般来说，如果选择器选择的是属性或位置，那么就包括标记名。这将极大地帮助引擎缩小元素集的范围

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

“我尝试了

选择（“[id='1']：first”）

，但收到一个错误。”

正如TJ所指出的，这是一个无效的选择器。jQuery的选择器引擎在几个不同方面不符合标准。尽可能保持选择器的纯净，这样您就不会被不必要的依赖性所吸引

“顺便说一句，我这样选择它的原因是，

querySelector

显然对id有问题，id是数字。”

如果转义前导数字，则可以按数字选择

"#\\1 > *"

---

现在没人知道为什么会发生这种事了。“但这很有挑衅性；让人们行动起来！”我投票支持你帮忙。我非常不喜欢一些随机的人在没有实际贡献的情况下这样做。一种理论是，他们想要的是当你这样做时颁发给人们的徽章。数字ID@RobertLongson，目前，我无法更改ID。预计届时生活会很艰难。实际上，它对我不起作用：

未捕获的DomeException:未能对'Element'执行'querySelectorAll'：“[id='1']：first child'不是有效的选择器。

@Elimination:将该空格放在：。@Elimination:正如BoltClock所说，

：first child

与

：first child

不同。空格在CSS选择器中很重要（

div.foo

和

div.foo

和

div.foo

也都是不同的，例如，最后一个是无效的）。我自己永远也猜不到，代码中很少有空格有意义。@消除：CSS有点不寻常，因为标记之间的空格有意义，但大多数语言对标记内的空格很敏感。在

中放入空格：第一个孩子
与在
10中放入空格没有什么不同。4
，它也会断开。在这两种情况下，它们都是语言基本标记中的意外空格。但无论如何，现在您知道：CSS是空间敏感的。：-）谢谢你的详细回答。至于
querySelectorAll（）
，您是对的，但这对语法问题没有影响。不是吗？在这方面，两个函数是相同的。@Elimination:语法没有区别，但结果是一样的。使用TJ的答案，如果存在嵌套深度超过一个级别的元素，您将使用
querySelectorAll
获得多个元素，但如果使用
选择器，您将保证只与
:first child
匹配一次，因为一个元素只能有一个直接的子元素，它是
：第一个子元素
…这里有一个演示：但是使用
querySelector
，这不是问题，因为无论哪种方式，您都只能得到一个元素。因此，就结果和需要做的工作量而言，这是有区别的。
"#\\1 > *"