SELECTORS
ELEMENT SELECTORS: In JavaScript You want to manipulate the HTML you have to find the elements first. There are several ways to do this: Finding HTML elements by id Finding HTML elements by tag name Finding HTML eleme
ELEMENT SELECTORS:
In JavaScript You want to manipulate the HTML you have to find the elements first. There are several ways to do this:
Finding HTML elements by id
Finding HTML elements by tag name
Finding HTML elements by class name
Finding HTML elements by CSS selectors
Finding HTML elements by HTML object collections
Finding HTML elements by id
- Its is used to find the HTML element in DOM by using id
<h1 id="name">hello<h1>
<script>
const ele = document.getElementById("name");
console.log(ele.innerText);
</script>
output:
hello
Finding HTML elements by tag name
- It is used to find HTML element in DOM by Using the Tag name
<h1 id="name">Welcome<h1>
<script>
const ele = document.getElementByTagName("h1");
console.log(ele[0].innerText);
</script>
output:
Welcome
Finding HTML elements by class name
- It is used to find HTML element in DOM by using the class name
<h1 class="name">shobika<h1>
<script>
const ele = document.getElementByClassName("name");
console.log(ele[0].innerText);
</script>
output:
shobika
Finding HTML elements by CSS selectors
- Its a Query selector method()
<h1 class="name">JavaScript<h1>
<script>
const ele = document.querySelector(".name");
console.log(ele.innerText);
</script>
output:
JavaScript
Finding HTML elements by HTML object collections
- Its a querySelectorAll() Method
<h1 class="name">JavaScript<h1>
<h1 class="name">Java<h1>
<script>
const ele = document.querySelectorAll(".name");
console.log(ele[1].innerText);
</script>
output:
Java
Task 1: Disabled the button after clicking
<button id="click" onclick="Clicking()">click me!</button>
<script>
function Clicking(){
const select = document.getElementById("click")
if(select.disabled==false){
select.disabled=true;
}
}
</script>
Output:
Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes โ full credit and traffic to the original publisher.