<html>
Hello Stephen
<head></head>
<title></title>
<body>
<p id="para1">Hello John</p>
<p class="para2">Hello Stephen</p>
<p class="para2">Hello Edward</p>
<script>
//Accessing dom by using id
var a= document.getElementById('para1');
document.write(a);
document.write("<br>")
var b= document.getElementById('para1').innerHTML;
document.write(b);
document.write("<br>")
//Accessing dom by using class
var c= document.getElementsByClassName('para2');
document.write(c);
document.write("<br>")
var d= document.getElementsByClassName('para2').innerHTML;
document.write(d);
document.write("<br>")
var e= document.getElementsByClassName('para2')[0].innerHTML;
document.write(e);
document.write("<br>")
//Accessing dom by using TagName
var f= document.getElementsByTagName("p");
document.write(f);
document.write("<br>")
var g= document.getElementsByTagName("p").innerHTML;
document.write(g);
document.write("<br>")
var h= document.getElementsByTagName("p")[0].innerHTML;
document.write(h);
document.write("<br>")
//Accessing first element
var i = document.querySelector("p"); //querySelector selects the first tag
document.write(i);
document.write("<br>")
var j = document.querySelector("p").innerHTML;
document.write(j);
document.write("<br>")
</script>
</body>
</html>
Output:
//Accessed dom by using id
[object HTMLParagraphElement]
Hello John
Hello John
//Accessed dom by using class
[object HTMLCollection]
undefinedHello Stephen
//Accessed dom by using TagName
[object HTMLCollection]
undefined
Hello John
undefined
Hello John
//Accessed first element
[object HTMLParagraphElement]
Hello John
No comments:
Post a Comment