CODEWITHSUNDEEP
javascripthtml
Brendan
Brendan

Reputation: 13

Grabbing a class within a class with javascript

Hello this is my first question and I'm an amateur developer so forgive me in advance. I'm trying to grab this specific instance of the value class. The website I am working on has hundreds of different values associated with the value class. 

<li class = "vin">
  <strong class = "title">VIN:</strong>
  <span class="value">121212121212121212</span>
</li>

Below is what I've been doing and it hasn't been working. 

var vinNum = document.getElementsByClassName('li.vin','span.value');
console.log(vinNum.innerText);

Thank you

Upvotes: 0

Views: 1748

Answers (3)

C3roe
C3roe

Reputation: 96316

Although the existing answers cover the "modern" way to do this already - you can use most of the getElementsBy... (all, I think - was gonna say except getElementById, but that is named in singular for a reason, and because of the meaning of an id special) methods on all elements.

https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByClassName:

The Element.getElementsByClassName() method returns a live HTMLCollection containing all child elements which have all of the given class names. When called on the document object, the complete document is searched, including the root node.

So you can use that twice, to first select an element with one specific class, and then another with a different class "within it", among the descendants of the former. (Not "child elements", as the quoted MDN reference wrongly puts it.)

var vinNumContainer = document.getElementsByClassName('vin')[0],
    vinNumElement   = vinNumContainer.getElementsByClassName('value')[0];

(Necessary checks for whether elements exist before accessing them, what to do if more than one element (of either one) exists, etc., left out for brevity ;-)

But a simple call to querySelector is of course a quicker way to do it.

Upvotes: 1

Pedro Castilho
Pedro Castilho

Reputation: 10522

You can use the document.querySelector function in order to search elements on your page based on class, ID, or anything else that can be selected using a CSS selector.

Using Mozilla's CSS Selector reference, we can see that the CSS selector syntax to select an element which is a direct child of some other element is A > B, where A is a selector matching the parent, and B is a selector matching the child.

So one way to do this is to use:

var vinNum = document.querySelector('li.vin > span.value')

The one-liner above will match the first span element of class value which is a child of a li element of class vin.

However, if you have multiple examples of this structure (a li of class vin with a span of class value within it), using this selector won't work. In fact, if you want to have access to each specific span of class value individually, perhaps the best way would be to add a unique id attribute to each of them.

If your structure looked like this: 

<li class = "vin">
  <strong class = "title">VIN:</strong>
  <span class="value" id="v25">121212121212121212</span>
</li>

You could then use the following:

var vinNum = document.querySelector('#v25')

One last alternative for when you have a list of nested HTML elements all with the same structure is to use document.querySelectorAll, which will return all DOM nodes which match your query and allow you to use JavaScript to run through them and select the values you want.

Upvotes: 0

Brandon Pereira
Brandon Pereira

Reputation: 182

Try 

var vinNum = document.querySelector('li.vin span.value');
console.log(vinNum.innerText);

This works because rather than selecting by class you're selecting the li.vin element which has a span.value as a child. vinNumber is now a node element. When you call vinNum.innerText you should get the correct number. When you console.log(vinNum) in uour example you will most likely see undefined or the incorrect element.

Upvotes: 0

Related Questions