DOM
What we will do
- Window vs Document
- DOM vs BOM
- DOM Navigation
- Searching and getting Elements Reference
- Some example of window object properties are :
- innerHeight
- innerWidth and there are many more.
Usage of BOM
BOM practice ⇗HTML, CSS and JS Code ↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BOM practise</title>
<style>
body {
background-color: rgb(30, 30, 120);
}
button {
display: block;
margin: auto;
width: 130px;
height: 40px;
margin-top: 100px;
font-size: 1.3rem;
}
</style>
</head>
<body>
<button onclick="goBack()">GO Back!</button>
<script>
function goBack() {
window.history.back();
}
</script>
</body>
</html>
Let's see more practical on History object
- Funtions like alert/confirm/prompt are also a part of BOM: they are directly not related to the document, but represent pure browser methods of communicating with the user.
alert(location.href); // shows current URL
if (confirm("Want to Visit ThapaTechinical?")) {
location.href = "https://www.youtube.com/thapatechnical"; // redirect the browser to another URL
}
Navigate through the DOM
- <html> is the root element of DOM. Then further this can be divided into:
- <body>
- <a>
- <p>
- <head>
- <body>
- document.head
- document.body
- document.body.childNodes (include tab, enter and whiteSpace)
- document.children (without text nodes, only regular elements)
- document.childNodes.length
Practice time ⌣
How to check whether an element has child nodes or not?
- We will use hasChildNodes().
document.body.hasChildNodes(); // true
Practice time ⌣
How to find the child in DOM tree
const data = document.body.firstElementChild;
data.firstElementChild.firstElementChild.style.color = "red";
// another syntax ↓ (simpler)
const childTwo = document.querySelector('.child-two');
childTwo.style.color = "green";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@import url("https://fonts.googleapis.com/css?family=Inconsolata:400,700");
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Inconsolata', 'san-serif';
background: #2a364f;
display: grid;
place-items: center;
}
.main-div {
width: 100vw;
height: 100vh;
display: grid;
place-items: center;
text-align: center;
color: azure;
}
</style>
</head>
<body>
<div class="main-div">
<div class="child-one">
<p>I am child one</p>
</div>
<div class="child-two">
<p>I am child two</p>
</div>
<div class="child-three">
<p>I am child three</p>
</div>
</div>
<script>
const data = document.body.firstElementChild;
data.firstElementChild.firstElementChild.style.color = "red";
const childTwo = document.querySelector('.child-two');
childTwo.style.color = "green";
</script>
</body>
</html>
How to find the Parent Nodes
document.body.parentNode
document.body.parentElement
How to find or access the siblings
document.body.nextSibling // null - as there is not element next to body
document.body.nextElementSibling
document.body.previousSibling
document.body.previousElementSibling
How to search the Elements and the references
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@import url("https://fonts.googleapis.com/css?family=Inconsolata:400,700");
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Inconsolata', 'san-serif';
background: #2a364f;
display: grid;
place-items: center;
}
button {
display: inline-block;
background-color: #F8B627;
color: #000000;
font-size: 16px;
font-weight: normal;
width: 132px;
text-align: center;
border-radius: 3px;
transition: 400ms;
text-decoration: none;
padding: 10px 22px;
z-index: 100000;
outline: none;
border: none;
cursor: pointer;
margin: 20px;
}
p {
text-align: center;
color: rgba(255, 255, 255, 0);
color: white;
margin: 20px;
}
h1 {
color: aquamarine;
}
form{
color: white;
}
</style>
</head>
<body>
<p class="para">Plz like the video</p>
<p class="para">Plz Share this video</p>
<p>Don't forget to subscribe my channel</p>
<h1 id="heading">Changed the content of the h1</h1>
<form action="">
<label for="">male</label>
<input type="radio" name="gender">
<label for="">female</label>
<input type="radio" name="gender">
</form>
<button onclick="changeContent()">Click me</button>
<button onclick="changeContent2()">Undo</button>
<script>
const changeContent = () => {
// without reference
// document.getElementById('heading').innerHTML = "Welcome to Thapa Technical";
// with reference
const changeHeading = document.getElementById('heading');
changeHeading.innerHTML = "Welcome to Thapa Technical";
// Selecting multiple element with same class name
console.log(document.getElementsByClassName('para'));
console.log(document.getElementsByName('gender'))
}
const changeContent2 = ()=>{
document.getElementById('heading').innerHTML = "Changed the content of the h1";
}
</script>
</body>
</html>
- Now the same we have is the query selectors, querySelector returns the first matching value whereas querySelectorAll() will return all the elements
document.querySelector('#heading').innnerHTML = "I changed again"; // selects the first element only
document.querySelectorAll('.para');
Interview quesiton ⌣
What is the difference between getElementById and querySelector?
- What is getElementById()?
Syntax ↓element = document.getElementById(id);
If the element with the specified ID is not in the document, it will return null. - What is querySelector()?
Syntax ↓element = document.querySelector(selectors);