HTML Element Selectors In JavaScript
HTML Element Selectors In JavaScript..............
JAVASCRIPT CODE...........
console.log("HTML Element Selectors In JavaScript");
/*
element selectors:
1. Single element selector
2. Multi element selector
*/
// Single element selector
let element = document.getElementById('fast')
// element= element.className;
// element= element.childNodes;
// element= element.parentNode;
element.style.color = 'red';
// element= element.style.background = 'red';
// element.innerText = 'Shohaib is a good boy';
element.innerHTML = ' <h1><b>Shohaib is good boy</b> </h1>';
// console.log(element.innerHTML);
let sel = document.querySelector('#fast');
sel = document.querySelector('.child')
sel = document.querySelector('div')
sel.style.color = 'green';
console.log(sel);
// Multi element selector
let elems = document.getElementsByClassName('child');
elems = document.getElementsByClassName('container');
// console.log(elems[0].getElementsByClassName('child'));
elems = document.getElementsByTagName('div');
console.log(elems)
for (let index = 0; index < elems.length; index++) {
const element = elems[index];
console.log(element)
// element.style.color = 'blue';
}
// Array.from(elems).forEach(element => {
// console.log(element)
// // element.style.color = 'blue';
// });
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Layout</title>
</head>
<body>
<div class="container">
<h1 id="heading">Welcome to only one shohaib</h1>
<div class="child" id="fast">child1</div>
<div class="child" id="second">child2</div>
<div class="child" id="third">child3</div>
<div class="child" id="forth">child4</div>
<a href="https://www.youtube.com/onlyoneshohaib" target="blank"><b><h1>YOUTUBE</h1></b></a>
</div>
</body>
<script src="elementselectors.js"></script>
</html>
No comments