- Find HTML elements by id
- Find HTML elements by tag name
- Find HTML elements by class name
- Find HTML elements by CSS selectors
Let's try to understand each of these by using examples.
Find HTML elements by id
Example 1
Figure 1
In here, document.getElementById(‘paragraph’) is a method belongs to document object. It search through entire document and look for the element with id called 'paragraph'. Then it can be found and changed them. In here, we put an event, onclick, inside the paragraph. So, when we click the paragraph, 'click here', it calls function 'change'. Inside the paragraph, document.getElementById(‘paragraph’) method is used. So, then element with id named 'paragraph' is searched through the document and found. Then, by using 'par.innerHTML' , paragraph is replaced.
Result is shown in Figure 2.
Figure 2
When paragraph is clicked, it changed as Figure 3.
Figure 3
Find HTML elements by tag name
This is similar as the above one. Only difference is, tag name is used instead id in here.
Example 2
Figure 4
In here, there are several paragraphs. By using document.getElementByTagName("p"), all the paragraphs are searched. Then paragraph with id 'paragraph' is replaced by the first paragraph in here.
So result is as follows.
Figure 5
Find HTML elements by class name
In here, class name is used to find the HTML element.
Example 3
Figure 6
In here, paragraph is searched using the class name. There are several classes with same class name. So, para[0] is used to select the first paragraph.
Result is as follows.
Figure 7
Find HTML elements by CSS selectors
In here "querySelectorAll" method is used to find HTML elements.
Example 4
Figure 8
Result is shown in Figure 9.
Figure 9
Please go through the examples and try on your own. It will help you to understand about referencing elements. Thank you.
