To access the dom elements by id, class, name, tag, attribute and value; In this tutorial. i am going to show you how to get HTML elements id, name, tag, class, attribute, value in JavaScript.
Using the getElementById(), getElementsByClassName(), getElementByName(), getElementsByTagName(); you can get element values with id, class, name, tag, attribute and value.
JavaScript Select Element By id, Class, Tag, Name, Attribute
The following javascript dom method help to select the elements in document.
- JavaScript Get Element By Id Value
- JavaScript Get Element By Class Name
- JavaScript Get Element By Name
- JavaScript Get Element By Tag Name
- JavaScript Get Element By Attribute Name
JavaScript Get Element By Id Value
Using the JavaScript getElementById() is a dom method, you can select and get an element by its id.
The following syntax represents the getElementById() method:
let element = document.getElementById(id);
Note that, the id is case-sensitive. For example, the 'myId' and 'MyId' are totally different ids.
Example – JavaScript getElementById() method
Let, see the following HTML document:
<html>
<head>
<title>JavaScript get Element by id Example</title>
</head>
<body>
<input id='my_id' value="Hello This is test">
<button onclick="getElementBy();">getElementById</button>
<script type="text/javascript">
function getElementBy()
{
elem = document.getElementById('my_id').value;
alert(elem);
}
</script>
</body>
</html>
The document contains a input element that has the id attribute with the value the my_id.
JavaScript Get Element By Class Name
Using the JavaScript getElementByClassName() is a dom method, you can get or select an element by its class name.
The following syntax represents the getElementByClassName() method:
let elements = document.getElementsByClassName(classNames) let elements = parentElement.getElementsByClassName(classNames)
Example – JavaScript getElementsByClassName()
Let, see the following example:
<html>
<head>
<title>JavaScript get Element by class name Example</title>
</head>
<div id="app">
<header>
<nav>
<ul id="menu">
<li class="item">HTML</li>
<li class="item">CSS</li>
<li class="item highlight">JavaScript</li>
<li class="item">TypeScript</li>
</ul>
</nav>
<h1>getElementsByClassName Demo</h1>
</header>
<section>
<article>
<h2 class="heading-secondary">Example 1</h2>
</article>
<article>
<h2 class="heading-secondary">Example 2</h2>
</article>
</section>
</div>
</body>
</html>
JavaScript Get Element By Name
Using the JavaScript getElementByName() is a dom method, you can get or select an element by its name.
The following syntax to represents the getElementsByName() method:
let elements = document.getElementsByName(name);
The getElementsByName() accepts a name which is the value of the name attribute of elements and returns it value.
Example – JavaScript getElementsByName() example
Let, see the following example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript getElementsByName Demo</title>
</head>
<body>
<p>Please rate the service:</p>
<p>
<input type="radio" name="rate" value="Very poor"> Very poor
<input type="radio" name="rate" value="Poor"> Poor
<input type="radio" name="rate" value="OK"> OK
<input type="radio" name="rate" value="Good"> Good
<input type="radio" name="rate" value="Very Good"> Very Good
</p>
<p>
<button id="btnRate">Submit</button>
</p>
<script>
let btn = document.getElementById('btnRate');
btn.addEventListener('click', () => {
let rates = document.getElementsByName('rate');
rates.forEach((rate) => {
if (rate.checked) {
alert(`You rated: ${rate.value}`);
}
})
});
</script>
</body>
</html>
JavaScript Get Element By Tag Name
Using the JavaScript getElementsByTagName() is a dom method, you can get or select an element by its tag name.
The following syntax represents the getElementsByTagName() method:
let elements = document.getElementsByTagName(tagName);
Example – JavaScript getElementByTagName
Let’s see the following example:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript getElementsByTagName() Demo</title>
</head>
<body>
<h1>JavaScript getElementsByTagName() Demo</h1>
<h2>First heading</h2>
<p>This is the first paragraph.</p>
<h2>Second heading</h2>
<p>This is the second paragraph.</p>
<h2>Third heading</h2>
<p>This is the third paragraph.</p>
<button id="btnCount">Count H2</button>
<script>
let btn = document.getElementById('btnCount');
btn.addEventListener('click', () => {
let headings = document.getElementsByTagName('h2');
alert(`The number of H2 tags: ${headings.length}`);
});
</script>
</body>
</html>
JavaScript Get Element By Attribute Name
Use JavaScript getElementsByTagName() with getAttribute() method to allow select an element by its tag name and attribute.
The following syntax represents the attribute() method:
elem = document.getElementsByTagName("input")[0].getAttribute("class");
Example – JavaScript get Element by Attribute Example
Let’s see the following example:
<html>
<head>
<title>JavaScript get Element by Attribute Example</title>
</head>
<body>
<input class="my_class" value="Hello This is test">
<button onclick="myFunc();">getElementsByAttribute</button>
<script type="text/javascript">
function myFunc()
{
elem = document.getElementsByTagName("input")[0].getAttribute("class");
alert(elem);
}
</script>
</body>
</html>