Javascript - How to get attribute value from a tag, inside a specific div class?

Question

Snippet of HTML code I need to retrieve values from:

<div class="elgg-foot">
  <input type="hidden" value="41" name="guid">
  <input class="elgg-button elgg-button-submit" type="submit" value="Save">
</div>

I need to get the value 41, which is simple enough with:

var x = document.getElementsByTagName("input")[0];
var y = x.attributes[1].value;

However I need to make sure I'm actually retrieving values from inside "elgg-foot", because there are multiple div classes in the HTML code.

I can get the class like this:

var a = document.getElementsByClassName("elgg-foot")[0];

And then I tried to combine it in various ways with var x, but I don't really know the syntax/logic to do it. For example:

var full = a.getElementsByTagName("input")[0];

So: Retrieve value 41 from inside unique class elg-foot.

I spent hours googling for this, but couldn't find a solution (partly because I don't know exactly what to search for)

Edit: Thanks for the answers everyone, they all seem to work. I almost had it working myself, just forgot a [0] somewhere in my original code. Appreciate the JQuery as well, never used it before :-)

Answer 1

The easiest way is to use jQuery and use CSS selectors:

$(".elgg-foot") will indeed always get you an element with class "elgg-foot", but if you go one step further, you can use descendent selectors:

$(".elgg-foot input[name='guid']").val()

That ensures that you only get the input named guid that is a child of the element labelled with class elgg-foot.

The equivalent in modern browsers is the native querySelectorAll method:

document.querySelectorAll(".elgg-foot input[name='guid']")

or you can do what you have yourself:

var x = document.getElementsByClassName("elgg-foot")
var y = x.getElementsByTagName("input")[0];

Assuming you know it is always the first input within the div

Answer 2

You can combine it like this:

    var a = document.getElementsByClassName("elgg-foot")[0];
    var b = a.getElementsByTagName("input")[0];
    var attribute = b.attributes[1].value;
    console.log(attribute); // print 41

Think of the DOM as the tree that it is. You can get elements from elements in the same way you get from the root (the document).