Accessing Elements in the DOM in Javascript

DOM Access

The document object represents a web document or page. It represents a document as a hierarchical tree structure and each element in the document tree is called a Node in the DOM (Document Object Model).

Structurally, the Document Object Model consists of nodes, with each node representing content in the web document. It gives developers a way of representing everything on a web page so that the contents of the web page is accessible via a common set of properties and methods.

DOM Methods

The getElementById() and getElementsByTagName() were the two methods from DOM standard and the HTML5 specification adds three new methods for accessing elements, getElementsByClassName(), querySelector(), and querySelectorAll().

getElementById()

Typically you want to access an element within the DOM directly and try to do something with it. Javascript provides a document.getElementById() method, which is the easiest way to access an element from the DOM tree structure. It will return the element that has the ID attribute with the specified value.

document.getElementById("ID");

Document Object Model

Source

<!DOCTYPE html>
<html>
<body>
	<h1 id="heading">Document Object Model</h1>
	<button onclick="changeIt()">Get Value</button>
<script>
function changeIt() {
	alert(document.getElementById("heading").innerHTML);
}
</script>
</body>
</html>

Above program returns "Document Object Model" .

getElementsByTagName

The getElementsByTagName() is one of the method exposes for accessing nodes directly. This method takes a tag name as argument and returns a collection of all the nodes it finds in the document that are a sort of tag.

document.getElementsByTagName("TagName");

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 4

<!DOCTYPE html>
<html>
<body>
	<p>Paragraph 1</p>
	<p>Paragraph 2</p>
	<p>Paragraph 3</p>
	<p>Paragraph 4</p>
	<button onclick="count()">Get Value</button>
<script>
function count() {
	var cnt = document.getElementsByTagName("p");
	alert(cnt.length);
}
</script>
</body>
</html>

Above program returns 4 , because total 4 paragraph elements in the HTML page.

getElementsByClassName()

The getElementsByClass() method works same like getElementById() method, and it will returns a collection of all elements in the document with the specified class name.

document.getElementsByClassName("ClassName");

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 4

Full Source

<!DOCTYPE html>
<html>
<body>
	<p class="testClass">Paragraph 1</p>
	<p class="testClass">Paragraph 2</p>
	<p class="testClass">Paragraph 3</p>
	<p class="testClass">Paragraph 4</p>
	<button onclick="count()">Change Value</button>
<script>
function count() {
	var tmpClass = document.getElementsByClassName("testClass");
	alert(tmpClass.length);
	tmpClass[1].innerHTML ="Second Paragraph";
}
</script>
</body>
</html>

The above program first alert 4, the number of p elements, and then it change the second p element's text to "Second Paragraph".

Both querySelector() and querySelectorAll() methods let you enter a CSS selector as an argument and return the selected elements as DOM elements.

querySelector()

It will returns the first element that matches a specified CSS selector in the document.

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 4

Full Source

<!DOCTYPE html>
<html>
<body>
	<p id="testQuery">Paragraph 1</p>
	<p id="testQuery">Paragraph 2</p>
	<p id="testQuery">Paragraph 3</p>
	<p id="testQuery">Paragraph 4</p>
	<button onclick="change()">Change Value</button>
<script>
function change() {
	document.querySelector("#testQuery").innerHTML ="First Paragraph";
}
</script>
</body>
</html>

Above program change the first paragraph text to "First Paragraph".

querySelectorAll()

The querySelectorAll() method returns a collection filled with the matching elements in source order. Since it is a static collection, the modification of the document has no effect on the collection

div content 1

Paragraph 2

Full Source

<!DOCTYPE html>
<html>
<body>
	<div id="div_">div content 1</div>
	<p id="p_">Paragraph 2</p>
	<button onclick="change()">Change Value</button>
<script>
function change() {
	var elements = document.querySelectorAll("div,p");
	elements[1].innerHTML = "content changed";
}
</script>
</body>
</html>

When you run the above code, you can see the place of the second p element text is changed but the p element remains there (the change you can see at the top line of browser only).