How to find and use HTML element with getElementsByTagName in JavaScript

<!DOCTYPE html>
<html>
<body>

<ul>
  <li>Eva</li>
  <li>Cinderella</li>
  <li>Superman</li>
</ul>

<button onclick="ElementsByTagNameTest()">Elements By Tag Name Test</button>

<script>

function ElementsByTagNameTest() 
{
    var li = document.getElementsByTagName("LI");
    
    var li_content = li[0].innerHTML + " "  + li[1].innerHTML + " " + li[2].innerHTML;
    
    document.getElementById("p-id").innerHTML = li_content;
}

/*
run:

Eva Cinderella Superman

*/

</script>

<p id="p-id"></p>

</body>
</html>

70+ SQL courses for beginners and professionals

answered Jul 5, 2015 by avibootz

<!DOCTYPE html>
<html>
<body>

<ul>
  <li>Eva</li>
  <li>Cinderella</li>
  <li>Superman</li>
</ul>

<button onclick="ElementsByTagNameTest()">Elements By Tag Name Test</button>

<script>

function ElementsByTagNameTest() 
{
    var li_tags = document.getElementsByTagName("LI");
    
    var li_content = "";
    
    for (i = 0; i < li_tags.length; i++) 
         li_content += li_tags[i].innerHTML + " ";
    
    document.getElementById("p-id").innerHTML = li_content;
}

/*
run:

Eva Cinderella Superman 

*/

</script>

<p id="p-id"></p>

</body>
</html>

70+ SQL courses for beginners and professionals

answered Jul 5, 2015 by avibootz

<!DOCTYPE html>
<html>
<body>

<ul>
  <li>Eva</li>
  <li>Cinderella</li>
  <li>Superman</li>
</ul>

<button onclick="ElementsByTagNameTest()">Elements By Tag Name Test</button>

<script>

function ElementsByTagNameTest() 
{
    var li_tags = document.getElementsByTagName("LI");
    
    var li_content = "";
    
    for (i = 0; i < li_tags.length; i++) 
         li_tags[i].style.backgroundColor = "cornflowerblue";
}

/*
run:

change the  <li> background color to  cornflowerblue

*/

</script>

</body>
</html>

70+ SQL courses for beginners and professionals

answered Jul 5, 2015 by avibootz

<!DOCTYPE html>
<html>
<body>

<p></p>
<p></p>
<p></p>

<button onclick="ElementsByTagNameTest()">Elements By Tag Name Test</button>

<script>

function ElementsByTagNameTest() 
{
    document.getElementsByTagName("P")[0].innerHTML = "Hello 0";
    document.getElementsByTagName("P")[1].innerHTML = "Hello 1";
    document.getElementsByTagName("P")[2].innerHTML = "Hello 2";
    document.getElementsByTagName("P")[3].innerHTML = "Hello 3";
    document.getElementsByTagName("P")[4].innerHTML = "Hello 4";
}

/*
run:

Hello 0

Hello 1

Hello 2

Hello 3

Hello 4

*/

</script>

<p></p>
<p></p>

</body>
</html>

70+ SQL courses for beginners and professionals

answered Jul 6, 2015 by avibootz

<!DOCTYPE html>
<html>
<body>

<p></p>
<p></p>
<p></p>

<button onclick="ElementsByTagNameTest()">Elements By Tag Name Test</button>

<script>

function ElementsByTagNameTest() 
{
    var p_tags = document.getElementsByTagName("P");
    
    for (i = 0; i < p_tags.length; i++) 
         document.getElementsByTagName("P")[i].innerHTML = "Hello " + i;
}

/*
run:

Hello 0

Hello 1

Hello 2

Hello 3

Hello 4

*/

</script>

<p></p>
<p></p>

</body>
</html>

70+ SQL courses for beginners and professionals

answered Jul 6, 2015 by avibootz

<!DOCTYPE html>
<html>
<body>

<p>p tag 1</p>
<p>p tag 2</p>

<button onclick="ElementsByTagNameTest()">Elements By Tag Name Test</button>

<script>

function ElementsByTagNameTest() 
{
    var all_tags = document.getElementsByTagName("*");
    var s;
    
    for (i = 0; i < all_tags.length; i++) 
         s = s + all_tags[i].toString() + "<br />";
    document.write(s);
}

/*
run:

undefined[object HTMLHtmlElement]
[object HTMLHeadElement]
[object HTMLBodyElement]
[object HTMLParagraphElement]
[object HTMLParagraphElement]
[object HTMLButtonElement]
[object HTMLScriptElement]
[object HTMLParagraphElement]
http://localhost:8080/test.html
[object HTMLUListElement]
[object HTMLLIElement]
[object HTMLParagraphElement]

*/

</script>

<p>p tag 3</p>

<a href="#">a tag</a>

<ul>
<li>li tag</li>
</ul>

</body>
</html>

70+ SQL courses for beginners and professionals

answered Jul 6, 2015 by avibootz

Most popular tags

How to find and use HTML element with getElementsByTagName in JavaScript

7 Answers

Related questions