How do I get the value of a div inside a div using javascript?

Question

I need to figure out how to either set the ID of the last Div, or get the value of the last DIV. I can't use the classes below, as they're used over & over in the code. Perhaps nodechilds of the main one?

I've tried searching around, with no luck.

<div class="designer-object adapter" id="73c8f274-e14f-4891-126e-67019bb100d1" data-previewcolor="" zindex="10008" style="width: 140px; height: 22px; left: 916px; top: 90px; z-index: 10008; opacity: 1;">
  <div class="labelControl">
    <div class="labelControlLabel" style="overflow: visible;">
      <div class="labelControlLabelTable">
        <div class="labelControlLabelCell" style="text-align: center; vertical-align: middle;">System Administrator</div>
      </div>
    </div>
  </div>
</div>

Need to return value System Administrator

Answer 1

Firstly, you can scope your query selector by either invoking querySelector on a particular node rather than document , or by using the child ( ab ) or descendant ( a>b ) selectors.

Secondly, to get the text of a div, simply read the textContent property.

let parentId = '73c8f274-e14f-4891-126e-67019bb100d1';
let text = document.querySelector(`#${parentId} .labelControlLabelCell`).textContent;
console.log(text); // System Administrator 

Answer 2

Just use getElementsByClassName() and use an index. Here is a good Good explanation for what it is. When using it, document.getElementsByClassName("labelControlLabelCell")[index] where index is number of the div, starting from 0. So you have to do some counting but it works.

Answer 3

Just assign an id to the element as below:

<div class="labelControlLabelCell" id="dummyId" style="text-align: center; vertical-align: middle;">System Administrator</div>

then use following method to get the content:

var x = document.getElementById("dummyId").textContent;