javascript - querySelector() - first inner element - Stack Overflow

admin管理员组

文章数量:1345293

I'm using SVG.js select() function which uses querySelector() function.

Currently, the mand I use is: select("[id='1']") (1 could be replaced by some other number)

What I'd like to do is to select the first inner element inside this element. Alternatively, I could select it by tag name.

How to do it?

I tried select("[id='1']:first") but received an error.

By the way, the reason I select it like that is that apparently querySelector has a problem with id's which are numbers.

I'm using SVG.js select() function which uses querySelector() function.

Currently, the mand I use is: select("[id='1']") (1 could be replaced by some other number)

What I'd like to do is to select the first inner element inside this element. Alternatively, I could select it by tag name.

How to do it?

I tried select("[id='1']:first") but received an error.

By the way, the reason I select it like that is that apparently querySelector has a problem with id's which are numbers.

• javascript
• jquery
• svg
• jquery-selectors
• selectors-api

Share Improve this question Follow asked Jan 21, 2018 at 17:04 EliminationElimination 2,73344 gold badges2626 silver badges4040 bronze badges 4

• 1 No one knows why it happens anymore nowadays. "But it's provocative; gets people going!" I voted you back up to help. I strongly dislike it when some random person does that with no actual contribution. One theory is they want the badge that is awarded when you do this to people. – suchislife Commented Jan 21, 2018 at 17:08
• 1 numeric ids are best avoided – Robert Longson Commented Jan 21, 2018 at 17:09
• 1 @RobertLongson, for the time being, I cannot change the ids. – Elimination Commented Jan 21, 2018 at 17:10
• 1 Expect life to be hard then. CSS expects identifiers not to start with a number – Robert Longson Commented Jan 21, 2018 at 17:59

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

:first is a jQuery thing. For what you're doing, you can use :first-child, which is a CSS thing:

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

That selector matches all elements that are the first child of elements with id="1", but if select is using querySelector under the covers, you'll get the first such element.

Note that the > in that is the child binator: It means we're looking for :first-child within [id='1']. (An earlier version of this answer used [id='1'] :first-child, which uses a descendant binator [just whitespace]. It would matter for selecting a list of elements, but not if selecting only on the first match.) (You need one or the other, since without any binator ([id='1']:first-child) it would b elooking for the first [id='1'] that was also a :first-child.)

"I'm using SVG.js select() function which uses querySelector() function."

But your ment under TJ's answer suggests it uses querySelectorAll(). There's a difference.

"What I'd like to do is to select the first inner element inside this element."

If it does use querySelector, then use this selector:

"[id='1'] > *"

That'll give you the first child element inside the [id='1'] element.

But if it actually uses querySelectorAll, then using TJ's :first-child selector will work, but as he noted, you need to be aware that it will return all elements that are the first child of their parent.

You can use the > child selector to ensure just one.

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

"Alternatively, I could select it by tag name. How to do it?"

I don't know which element you're referring to, but in general, include the tag name if the selector is selecting on attribute or position. That'll greatly help the engine to narrow down the set of elements.

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

"I tried select("[id='1']:first") but received an error."

As TJ noted, that's an invalid selector. jQuery's selector engine is non-conforming to the standards in several different ways. Keep your selectors pure as much as possible so that you don't get hooked on needless dependencies.

"By the way, the reason I select it like that is that apparently querySelector has a problem with id's which are numbers."

You can select by numbers if you escape the leading number.

"#\\1 > *"

本文标签： javascriptquerySelector()first inner elementStack Overflow