How to get concrete element in HTML with javascript

You can get your rects by querySelectorAll which is better supported than getElementsByClassName

• tag document.querySelectorAll("rect") or
• class document.querySelectorAll(".rect")

and combine with a normal for loop since forEach does not work on nodelists - read more here.

var labels = ["one", "two", "three"];
window.onload=function() {
  var rects = document.querySelectorAll("rect");
/*  
  rects.forEach(function(rect,index) { // fails
    rects.appendChild(document.createTextNode(labels[index]));
  });
*/  
  for (var i=0;i<rects.length;i++) {
    rects[i].appendChild(document.createTextNode(labels[i]));
  };
  
}

<div class="graph">
  <rect y="2%" class="rect"></rect>
  <text>1</text>
  <rect y="15%" class="rect"></rect>
  <text>2</text>
  <rect y="11%" class="rect"></rect>
  <text>3</text>
</div>

Hi you can try this code in your html page:

<div class="graph" >
  <rect y="2%" class="rect"></rect>
  <text id="one">1</text>
  <rect y="15%"  class="rect"></rect>
  <text id="two">2</text>
  <rect y="11%"  class="rect"></rect>
  <text id="three">3</text>
</div>

<script type="text/javascript">
var labels = ["one", "two", "three"];
labels.forEach(function (label, index) {

        if (index == 0) {
            document.getElementById("one").innerHTML = "TEST WRITE";
           // get first rect and text tag
        } else if (index == 1) {
           // get second rect and text tag
        } else {
           // get third rect and text tag
        }

    })
</script>

Put your Javascript code after HTML.

<div class="graph">

</div>
<script>
var string = "";
var labels = ["one", "two", "three"];
     labels.forEach(function (label, index) {
        if (index == 0) {
           // get first rect and text tag
           string = string + '<rect y="2%" class="rect"></rect>'+
                    '<text>1</text>';
        } else if (index == 1) {
           string = string + '<rect y="15%" class="rect"></rect>'+
                    '<text>2</text>';
        } else {
           string = string + '<rect y="11%" class="rect"></rect>'+
                    '<text>3</text>';
        }

    });
$(".graph").append(string);
</script>

You can get all rect by class.

var elements = document.getElementsByClassName("rect");

You can iterate like you did and use the index to match

var labels = ["one", "two", "three"];
var elements = document.getElementsByClassName("rect");

labels.forEach(function (label, index) {
    alert(label + ": " +  elements[index].getAttribute("y"));
});

You can see it at: https://jsfiddle.net/7Lecaezy/

You can get all rects by className and then target the text elements relatively:

var rects = document.getElementsByClassName('rect');
var curRect, curIndex;
for(var i=0; i<rects.length; i++){

    curRect = rects[i];
    curIndex = curRect.nextSibling.innerHTML;

    switch(curIndex){
        case "0":
            //do something
            break;
        case "1":
            //do something
            break;
        case "2":
            //do something
            break;
        default:
            //default behavior
    }
}

Keep in mind that this is all relative, in other words it may break if the structure changes. It might be better to assign something with which you could select them directly.. For example if you had the following structure:

<div class="graph">
   <rect y="2%" class="rect"></rect>
   <text id="rect-text-1">1</text>
   <rect y="15%" class="rect"></rect>
   <text id="rect-text-2">2</text>
   <rect y="11%" class="rect"></rect>
   <text id="rect-text-3">3</text>
</div>

You could then do

for(var i=0; i<rects.length; i++){
    curIndex = document.getElementById('rect-text-' + i).innerHTML;
}

Targeting by ID is much more reliable than relative, because it's structure independent.

I would also recommend jQuery here. Specifically nth-child.