Javascript DOM HTML Element getElementsByTagName() Method

Introduction

Change the HTML content of the first <li> element (index 0) in a list:

Click the button to change the text of the first list item (index 0).

View in separate window 

<!DOCTYPE html>
<html>
<body>

<ul>
  <li>CSS</li>
  <li>HTML</li>
</ul>//from w  w  w . j  a v a2s  .  c o m
<button onclick="myFunction()">Test</button>

<script>
function myFunction() {
  var list = document.getElementsByTagName("UL")[0];
  list.getElementsByTagName("LI")[0].innerHTML = "Milk";
}
</script>

</body>
</html>

The getElementsByTagName() method returns a collection of an elements's child elements with the specified tag name as a NodeList object.

The NodeList object represents a collection of nodes.

The nodes can be accessed by index numbers. The index starts at 0.

The parameter value "*" returns all of the element's child elements. 

element.getElementsByTagName(tagname);

Parameter Values

Parameter Type Description
tagname String Required. The tagname of the child elements you want to get

The elements in the returned collection are sorted as they appear in the source code.




PreviousNext

Related