JS DOM Targeting Methods

Most often, you want to manipulate HTML elements. To manipulate element you have to find the elements first.
Javascript provides us with various methods to find an element within the document.

Methods Description
document.getElementById() Select the unique element with given id. In case there are 2 same ID then it selects the first element.
document.getElementsByClassName() Select collection elements with given classname
document.getElementsByTagName() Select collection elements with given tagname

DOM getElementsById() Method

The getElementById() method returns the elements that have given an ID which is passed to the function. This function is a widely used HTML DOM method in web designing to change the value of any particular element or get a particular element. If the passed ID to the function does not exist then it returns null. The element is required to have a unique id, in order to get access to that specific element quickly, & also that particular id should only be used once in the entire document.

Syntax:

document.getElementById( element_ID )

Parameter: This function accepts single parameter element_ID which is used to hold the ID of the element.

Return Value: It returns the object of the given ID. If no element exists with the given ID then it returns null.

DOM getElementsByClassName() Method

The getElementsByClassName() method in Javascript returns an object containing all the elements with the specified class names in the document as objects. Each element in the returned object can be accessed by its index. The index value will start with 0. This method can be called upon by any individual element to search for its descendant elements with the specified class names.

Syntax:

document.getElementsByClassName(classnames);

Parameters: This is a required method that takes only one parameter, which is a string containing space-separated class names of the elements that are to be searched for. For searching with multiple class names, it must be separated with space.

DOM getElementsByTagName() Method

The HTML DOM getElementsByTagName() method in HTML returns the collection of all the elements in the document with the given tag name. To extract any info just iterate through all the elements using the length property. 

Syntax:
  

var elements = document.getElementsByTagName(name);

var elements = document.getElementsByTagName(name);

Parameters:

html file

<!DOCTYPE html>
<html>
	<head>
		<title>Basic Layout</title>
		<link rel="stylesheet" href="css/main.css">
		<script src="js/dom-main.js"></script>
	</head>
	<body>
		<div id="wrapper">
			<div id="header">
			   <h1>Yahoo Baba</h1>
			</div>
			<div id="menu">
				<ul>
					<li><a href="">Home</a></li>
					<li><a href="">About Us</a></li>
					<li><a href="">Gallery</a></li>
					<li><a href="">Contact Us</a></li>
				</ul>
			</div>
			<div id="content">
				<h2>Sub Heading</h2>
				<img src="images/flower.jpg" width="200px" class="content-image" alt="">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, veniam eius architecto ullam cupiditate quam aspernatur quis facilis tempora vel! Aspernatur, consequatur, laborum, explicabo consequuntur minima beatae perferendis impedit accusantium ex animi odit quisquam sint pariatur minus amet ullam reprehenderit rerum inventore sed officiis voluptas? Dolore, perferendis, minus eum debitis vero ipsam tempora voluptate nam ut autem itaque provident consequatur nobis quia libero! Magni, molestiae, laborum architecto natus inventore facere quis pariatur quia quos quasi quo dicta dolores. Deleniti, facere, fugit sed minus ducimus ut modi voluptatum eaque praesentium saepe aperiam nam quidem laboriosam assumenda voluptate vitae inventore et quibusdam!</p>
				<ul class="list">
				   <li>Lorem ipsum dolor sit amet. </li>
				   <li>Modi nihil in animi necessitatibus.</li>
				   <li>Consectetur adipisicing elit.</li>
				   <li>Lorem ipsum dolor sit amet.</li>
				   <li>Modi nihil in animi dolore natus.</li>
				</ul>
				<p class="list">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, quam.</p>
			</div>
			<div id="sidebar">
				<ul>
					<li><a href="">Home</a></li>
					<li><a href="">About Us</a></li>
					<li><a href="">Gallery</a></li>
					<li><a href="">Contact Us</a></li>
				</ul>
			</div>
			<div id="footer">
				yahoobaba@copyright 2018.
			</div>
		</div>
	</body>
</html>

main.css

@import "color.css";

*{
  box-sizing: border-box;
}
body{
  font: 18px/24px arial;
}
#wrapper{
  border:1px solid black;
  width: 1000px;
  background: white;
  margin: 0 auto;
}

#top-bar{
  background: MEDIUMPURPLE;
}
#top-bar ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
#top-bar ul li{
  display: inline-block;
  margin: 5px;
}
#top-bar a{
  color: #fff;
  font-size: 20px;
}
#top-bar a:hover{
  color: crimson;
}
#header{
  min-height: 100px;
  font-family: arial;
  border-bottom: 1px solid black;
}

#header h1{
  padding:30px 0 0 20px;
  margin: 0;
}
#menu{
      border-bottom: 1px solid black;
}
#menu ul{
  margin: 0;
  padding: 0;
}
#menu li{
  display:inline-block;
}
#menu li a{
  display:block;
  padding: 10px 13px;
  text-decoration:none;

}
#menu li a:hover{

}
#content{
  width:795px;
  min-height:500px;
  padding: 15px;
  float:left;
  box-sizing:border-box;
  position:relative;
}
#content h2{
  font-family: arial;
}
.content-image{
  float:left;margin:0 15px 10px 0;
}
#sidebar{
  width:200px;
  min-height:500px;
  float:right;
  border-left: 1px solid black;
}
#sidebar a{
  text-decoration:none;
  color:black;
}
#footer{
  padding: 5px 10px;
  text-align:right;
  font-size: 14px;
  clear:both;
  border-top: 1px solid black;
}
@import "mediatest.css" screen and (max-width:1020px);

@media screen and (max-width:810px){
  #wrapper{
    width:500px;
  }
  #content{
      width:65%;
  }
  #sidebar{
    width:34%
  }
}
@media screen and (max-width:510px){
  #wrapper{
    width:auto;
  }

  #content{
      width:100%;
    float:none;
  }
  #sidebar{
    width:100%;
    float:none;
  }
  #header h1{
  padding:30px 0 0 0;
  text-align:center;
}
}

dom-main.js

var element;

//element = document.all;

//element = document.head;

//element = document.title;

//element = document.body;

//element = document.links;

//element = document.links[0];

//element = document.images;

//element = document.forms;

//element = document.doctype;

//element = document.URL;

//element = document.domain;

//element = document.baseURI;

//element = document.getElementById("header");

//element = document.getElementsByClassName("list");

//element = document.getElementsByClassName("list")[0]

//element = document.getElementsByTagName("ul");

element = document.getElementsByTagName("ul")[2]

console.log(element);