Friday, December 3, 2021
In JavaScript the DOM is an acronym for "Document Object Model" that's quite a mouthful. Most people just refer to it as the DOM. The DOM is basically a collection of objects/elements organized in the tree structure. To perform any functions in JavaScript you first have to find a reference to the object or element you are working with. Luckily, there are a few handy JavaScript methods that can help you find the elements in the DOM that you want.
Let's take a look at the methods:
Let's take a look at the methods:
- getElementById - this method gets the element based on the unique id that is assigned to the element
- getElementByClassName - this method gets the elements that has the class name that is passed into the method
- getElementByTagName - this method gets the elements that matches the tag name
- querySelector - this method gets the first child element that matches the CSS selector being passed in
- querySelectorAll - this method gets all the child elements that match the CSS selector
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<table id="myTable">
<tr class="row">
<td>
<p>Paragraph 1</p>
</td>
</tr>
<tr class="row">
<td>
<p>Paragraph 2</p>
</td>
</tr>
<tr class="row">
<td>
<p>Paragraph 3</p>
</td>
</tr>
<tr class="row">
<td>
<p>Paragraph 4</p>
</td>
</tr>
<tr class="row">
<td>
<p>Paragraph 5</p>
</td>
</tr>
</table>
<script src="index.js"></script>
</body>
</html>
How would you select all the paragraph elements? You would use the getElementByTagName to get all the paragraph tags.
var paragraphs = document.getElementsByTagName("p");
Here is how it looks like on the console.
One of the most used method to select an element before jQuery came along was the getElementById method. This was during the time with grandpa used to walk ten miles in the snow to go to school.
Here is how grandpa used to write them!
var tableElem = document.getElementById("myTable");
As you can see grandpa was able to get the table element with the getElementById by passing in the unique "myTable" id that's assigned to the table.
Now we are going to look how we can use the getElementByClassName method to all the elements with the class "row".
As you can see we got all the rows in the table. Generally speaking we don't want to depend on the class name to perform operations on a different type of element such as table row. Let's say we have four rows with the class "row" but the fifth row has the class "special-row" if we only look for the class "row" with our search then we would be missing the fifth row. So in this case the method getElementByTagName is more suitable.
If you've used jQuery before the next two methods should be very familiar to you. The querySelectAll is the catch all method that will find anything that you pass in by searching through the whole entire DOM. For instance you can find all the <p> elements by typing in
var paragraphs = document.querySelectorAll("p");
To select classes all you have to do is prefix the class name with a . remember you can pass any CSS selector as the method parameter.
var rows = document.querySelectorAll(".row");
Like the querySelectorAll method the querySelector method also take a CSS selector. However, it stops search for elements when it hits the first element that matches the CSS selector. For instance if you look for the same "row" class with the querySelector instead of the querySelectorAll method you will only get back one element
var row = document.querySelector(".row");
The most common usage for the querySelector is to get an element by id like the following code
var element = document.querySelector("#myTable");
Subscribe to:
Post Comments (Atom)
Search This Blog
Tags
Web Development
Linux
Javascript
DATA
CentOS
ASPNET
SQL Server
Cloud Computing
ASP.NET Core
ASP.NET MVC
SQL
Virtualization
AWS
Database
ADO.NET
AngularJS
C#
CSS
EC2
Iaas
System Administrator
Azure
Computer Programming
JQuery
Coding
ASP.NET MVC 5
Entity Framework Core
Web Design
Infrastructure
Networking
Visual Studio
Errors
T-SQL
Ubuntu
Stored Procedures
ACME Bank
Bootstrap
Computer Networking
Entity Framework
Load Balancer
MongoDB
NoSQL
Node.js
Oracle
VirtualBox
Container
Docker
Fedora
Java
Source Control
git
ExpressJS
MySQL
NuGet
Blogger
Blogging
Bower.js
Data Science
JSON
JavaEE
Web Api
DBMS
HTML5
MVC
SPA
Storage
github
AJAX
Big Data
Design Pattern
DevOps
Eclipse IDE
Elastic IP
GIMP
Graphics Design
Heroku
Postman
R
SSL
Security
Visual Studio Code
ASP.NET MVC 4
CLI
Linux Commands
Powershell
Python
Server
Subnets
Telerik
VPC
Windows Server 2016
angular-seed
font-awesome
log4net
servlets
tomcat
AWS CloudWatch
Active Directory
Angular
Blockchain
Collections
Compatibility
Cryptocurrency
DIgital Life
DNS
Downloads
Google Blogger
Google Chrome
Google Fonts
Hadoop
IAM
KnockoutJS
LINQ
Linux Performance
Logging
Mobile-First
Open Source
Prototype
R Programming
Responsive
Route 53
S3
SELinux
Software
Software Development
Unix
View
Web Forms
WildFly
XML
cshtml
githu
thanku so much this information
ReplyDeleteamazetechnology
Good post thanks for shre article.
ReplyDelete