Select elements in hierarchy with Javascript

Question

I have a hierarchy as follows

<li class="clear2 clearfix" id="field_id16">
<span class="row_title">Link: </span>
<span class="row_data">
    <div class="field_uneditable">http://3.bp.blogspot.com/-O7KAb62ChqU/Tb_wIM-9zOI/AAAAAAAAACA/nG7EnK7xAmY/s1600/ydc9ntyrhmi63s0umu4a881dc4018f7_homer-reggae.jpg</div>
</span>

To get the link inside the span row_data with jQuery I can use this:

$('#field_id16 .row_data div').text();

I wonder, how do I make this selector where I can filter the elements with pure Javascript? #field_id16 .row_data div

This exists in CSS too, but I don’t know how to use Javascript.

Answer 1

If you don’t need to use old browsers, i.e., using IE8 or newer, you can use .querySelector():

var elemento = document.querySelector('#field_id16 .row_data div');
console.log(elemento.innerHTML); // http://3.bp.blogspot.com/-O7KAb62ChqU/Tb_wIM-9zOI/AAAAAAAAACA/nG7EnK7xAmY/s1600/ydc9ntyrhmi63s0umu4a881dc4018f7_homer-reggae.jpg

Example: http://jsfiddle.net/es94w/