JavaScript Select element in the way like CSS in proper way

Question

I want to select a tbody tag with no id or class or tags or whatever...

In CSS I know that I can use the following to select it:

table#header_info > tbody

But how can I achieve the same thing in JavaScript / jQuery? What is the best way?

Would you not do the same with jQuery? $("table#header_info > tbody").yourOperations... — Roger Lindsjö
– Roger Lindsjö, Commented Feb 8, 2012 at 22:05
If you use jQuery only for selecting elements, remove that jQuery and use 4. But if you use jQuery on your page and you want to load 24KB script into you page the first one is the fastest. (but you could remove table). The second one is wrong, see my comment at Rick Burns answer. — Wouter J
– Wouter J, Commented Feb 8, 2012 at 22:14
Alright, then i will use the first one, because i already use JQuery. Thanks for the reply's guys — Mathlight
– Mathlight, Commented Feb 8, 2012 at 22:17

Wouter J · Accepted Answer · 2012-02-08 22:08:44Z

2

In jQuery:

var tbody = $('#header_info').children('tbody');

In MooTools:

var tbody = $('header_info').getChildren('tbody');

In DoJo:

var tbody = dojo.query('tbody', '#header_info');

In Raw JS:

var tbody = document.querySelectorAll("#header_info > tbody ");

In Raw JS old version:

var tbody = document.getElementById('header_info').getElementsByTagName('tbody');

And there are many many other JavaScript Selecting Engines and functions that you can use...

answered Feb 8, 2012 at 22:08

Wouter J

42k15 gold badges113 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user1106925 · Accepted Answer · 2012-02-08 22:04:06Z

2

Just like CSS, in jQuery...

var tbody = $('#header_info > tbody')

I removed the unnecessary table selector, but you can keep it if you want.

http://docs.jquery.com/Tutorials

answered Feb 8, 2012 at 22:04

user1106925

Comments

Lupus · Accepted Answer · 2012-02-08 22:04:58Z

1

var elem = document.querySelectorAll("table#header_info > tbody ");

But this won't work on some of old browsers. You should use jquery

$("table#header_info > tbody")

answered Feb 8, 2012 at 22:04

Lupus

1,5183 gold badges21 silver badges39 bronze badges

Comments

Michael Berkowski · Accepted Answer · 2012-02-08 22:04:59Z

1

Using plain JavaScript, you can use getElementsByTagName()

// This retrieves the first `<tbody>` found as a child of the node with
// id `header_info`
document.getElementById('header_info').getElementsByTagName('tbody')[0]

answered Feb 8, 2012 at 22:04

Michael Berkowski

271k47 gold badges450 silver badges395 bronze badges

Comments

Christofer Eliasson · Accepted Answer · 2012-02-08 22:17:12Z

1

With jQuery you can do:

$("#header_info").children("tbody");

Or:

$("#header_info > tbody");

edited Feb 8, 2012 at 22:17

answered Feb 8, 2012 at 22:04

Christofer Eliasson

34k7 gold badges77 silver badges103 bronze badges

2 Comments

Wouter J Over a year ago

#header_info tbody or #header_info > tbody is a big difference. The first one selects all tbody tags that are descendant of #header_info and the second one selects only the tbody tags that are children of #header_info

Christofer Eliasson Over a year ago

@WouterJ Missed the parent/child operator in OP's example, edited my answer. Thanks!

Rick Burns · Accepted Answer · 2012-02-08 22:05:11Z

0

This will select a tbody in a table with an ID of header_info, like your CSS above.

$("#header_info tbody")

answered Feb 8, 2012 at 22:05

Rick Burns

1,54616 silver badges20 bronze badges

Collectives™ on Stack Overflow

JavaScript Select element in the way like CSS in proper way

6 Answers 6

Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related