How to retrieve information using JavaScript?
add a comment
1 Answer
There are several ways to retrieve information using JavaScript:
- getElementById(): This method is used to retrieve a specific element from the HTML document by its ID attribute.
Example:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Get ElementById Example</title>
</head>
<body>
<h1 id="heading">Hello World!</h1>
<script>
var element = document.getElementById("heading");
alert(element.innerHTML);
</script>
</body>
</html>
- getElementsByClassName(): This method is used to retrieve all the elements that have a specific class name.
Example:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Get ElementByClassName Example</title>
</head>
<body>
<h1 class="heading">Hello World!</h1>
<p class="desc">This is a description.</p>
<script>
var elements = document.getElementsByClassName("heading");
for(var i = 0; i < elements.length; i++) {
alert(elements[i].innerHTML);
}
</script>
</body>
</html>
- getElementsByTagName(): This method is used to retrieve all the elements that have a specific tag name.
Example:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript GetElementsByTagName Example</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a paragraph.</p>
<script>
var elements = document.getElementsByTagName("p");
for(var i = 0; i < elements.length; i++) {
alert(elements[i].innerHTML);
}
</script>
</body>
</html>
- querySelector(): This method is used to retrieve the first element in the document that matches a specific CSS selector.
Example:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript querySelector Example</title>
</head>
<body>
<div id="main">
<h1>Hello World!</h1>
<p>This is a paragraph.</p>
</div>
<script>
var element = document.querySelector("#main h1");
alert(element.innerHTML);
</script>
</body>
</html>
- querySelectorAll(): This method is used to retrieve all the elements in the document that match a specific CSS selector.
Example:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript querySelectorAll Example</title>
</head>
<body>
<div id="main">
<h1>Hello World!</h1>
<p>This is a paragraph.</p>
</div>
<script>
var elements = document.querySelectorAll("#main p");
for(var i = 0; i < elements.length; i++) {
alert(elements[i].innerHTML);
}
</script>
</body>
</html>
Your Answer
Stats
Asked: 2023-05-24 04:49:12 +0000
Seen: 11 times
Last updated: May 24 '23