How to access HTML element without ID?

For instance in the snippet below - how do I access the h1 element knowing the ID of parent element (header-inner div)?

<div id='header-inner'> 
   <div class='titlewrapper'> 
      <h1 class='title'> 
      Some text I want to change
      </h1> 
   </div> 
</div>

Thanks!

From stackoverflow JohnIdol

• function findFirstDescendant(parent, tagname)
  {
     parent = document.getElementById(parent);
     var descendants = parent.getElementsByTagName(tagname);
     if ( descendants.length )
        return descendants[0];
     return null;
  }
  
  var header = findFirstDescendant("header-inner", "h1");
  

  Finds the element with the given ID, queries for descendants with a given tag name, returns the first one. You could also loop on descendants to filter by other criteria; if you start heading in that direction, i recommend you check out a pre-built library such as jQuery (will save you a good deal of time writing this stuff, it gets somewhat tricky).

  JohnIdol : Cheers bud - the script looks great, I'll give it a try and mark as answer
  From Shog9

• If you are sure that there is only one H1 element in your div:

  var parent = document.getElementById('header-inner');
  var element = parent.GetElementsByTagName('h1')[0];
  

  Going through descendants,as Shog9 showed, is a good way too.

  Shog9 : getElementsByTagName() returns a list of elements, not a single element. Even if there *is* only one element.

  buti-oxa : Oops. Thanks, fixed.
  From buti-oxa

• Here I get the H1 elements value in a div where the H1 element which has CSS class="myheader":

  var nodes = document.getElementById("mydiv")
                      .getElementsByTagName("H1");
  
  for(i=0;i<nodes.length;i++)
  {
      if(nodes.item(i).getAttribute("class") == "myheader")
          alert(nodes.item(i).innerHTML);
  }
  

  Here is the markup:

  <div id="mydiv">
     <h1 id="myheader">Hello</h1>
  </div>
  

  I would also recommend to use jQuery if you need a heavy parsing for your DOM.

  From mnour

• The simplest way of doing it with your current markup is:

  document.getElementById('header-inner').getElementsByTagName('h1')[0].innerHTML = 'new text';

  This assumes your H1 tag is always the first one within the 'header-inner' element.

  roenving : And this ought to be: document.getElementById('header-inner').getElementsByTagName('h1')[0].forstChild.nodeValue = 'new text';
  From domgblackwell

• To get the children nodes use "obj.childNodes", that returns a collection object;

  To get the first child, use "list[0]", that returns a node.

  So the complete code should be:

  var div = document.getElementById('header-inner');

  var divTitleWrapper = div.childNodes[0];

  var h1 = divTitleWrapper.childNodes[0];

  If you want to iterate over all the children, comparing if they are of class 'title', you can iterate using a for loop and the className attribute.

  The code should be:

          var h1 = null;
          var nodeList = divTitleWrapper.childNodes;
  
          for (i =0;i < nodeList.length;i++){
  
              var node = nodeList[i];
  
              if(node.className == 'title' && node.tagName == 'H1'){
  
                  h1 = node;
              }
          }
  

  From RogueOne

• If you were to use jQuery as mentioned by some posters, you can get access to the element very easily like so (though technically this would return a collection of matching elements if there were more than one H1 descendant):

  var element = $('#header-inner h1');
  

  Using a library like JQuery makes things like this trivial compared to the normal ways as mentioned in other posts. Then once you have a reference to it in a jQuery object, you have even more functions available to easily manipulate its content and appearance.

  From patmortech