Skip to content

Instantly share code, notes, and snippets.

View YasirGaji's full-sized avatar
◼️
Unconfused Focus

Yasir Gaji YasirGaji

◼️
Unconfused Focus
50 followers · 58 following
View GitHub Profile
@YasirGaji
YasirGaji / index.html
Last active December 12, 2021 08:07
The Html collection for the Don of the Dom article by Yasir Gaji
<!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>Article Test</title>
</head>
<body>
<section class="section">
@YasirGaji
YasirGaji / first-instance-1.js
Last active December 12, 2021 12:41
This gist indicates how to call child nodes of an element its further explained in the DOD article by Yasir Gaji
let val; // initilizing alpha variable
const list = document.querySelector('ul.showcase'); // assigning sub variable "list" to the ul in the html collection
val = list.childNodes; // HERE THE METHOD "childNodes" IS ASSIGNED TO THE "list" VARIABLE TO GET IT'S CHILD NODES
console.log(val); // calling the alpha variable
@YasirGaji
YasirGaji / first-instance-2.js
Created December 12, 2021 11:28
This gist indicates the betterment of the ".children" method over ".childNodes" method to call an element's child or children its further explained in the DOD article by Yasir Gaji
let val; // initilizing alpha variable
const list = document.querySelector('ul.showcase'); // assigning sub variable "list" to the ul in the html collection
val = list.children; // HERE THE METHOD "children" IS ASSIGNED TO THE "list" VARIABLE TO GET IT'S CHILDREN
console.log(val); // calling the alpha variable
@YasirGaji
YasirGaji / second-instance-1.js
Created December 12, 2021 12:44
This gist showcases specific children element selection its further explained in the DOD article by Yasir Gaji
let val; // initilizing alpha variable
const list = document.querySelector('ul.showcase'); // assigning sub variable "list" to the ul in the html collection
val = list.children[1]; // HERE THE SPECIFIC METHOD SELECTION "children[1]" SELECTS THE SECOND CHILD OF THE PARENT ELEMENT
val.textContent = 'Ensure To Follow'; // here we manipulate the selected child and change it's text content
@YasirGaji
YasirGaji / second-instance-2.js
Created December 12, 2021 14:10
This gist showcases specific children element's children selection manipulation its further explained in the DOD article by Yasir Gaji
let val; // initilizing alpha variable
const list = document.querySelector('ul.showcase'); // assigning sub variable "list" to the ul in the html collection
val = list.children[1].children[0]; // HERE WE ARE SELECTING THE FIRST CHILD OF THE SECOND CHILD IN THE "list" AND ASSIGNING IT TO "val"
val.style.color = 'red'; // here we manipulate and change "val"'s color
@YasirGaji
YasirGaji / create-elements-1.js
Created December 12, 2021 17:38
This gist showcases how to construct/create an element from scratch and append it to the dom its further explained in the DOD article by Yasir Gaji
const li = document.createElement('li'); // this creates an "li" element
li.className = 'New-photo'; // this assigns a class to the "li" element
li.setAttribute('title', 'The new kid in town'); // this assigns an attribute to the "li" element
li.appendChild(document.createTextNode('The new list Item')); // this inputs a text node into the newly created "li" element
document.querySelector('ul.showcase').appendChild(li); // THIS WOULD APPEND THIS INTO THE EXISTING ELEMENTS IN THE INTERFACE
@YasirGaji
YasirGaji / replacement.js
Last active December 12, 2021 20:18
This gist replaces an element in the Dom with a newly created element its further explained in the DOD article by Yasir Gaji
const newHeading = document.createElement('h1'); // this creates a new element which in this case a "h1" element
newHeading.appendChild(document.createTextNode('Taking over this space!!')); // assigning a text node to the newly created element
const oldHeading = document.querySelector('li.photo'); // initializing the element to be replaced to a variable
const ulElement = document.querySelector('ul.showcase'); // initializing the parent element
ulElement.replaceChild(newHeading, oldHeading); // THIS REPLACES THE OLD ELEMENT WITH THE NEW ONE
@YasirGaji
YasirGaji / remove-1.js
Created December 13, 2021 05:48
This gist showcases how to remove an element from the dom its further explained in the DOD article by Yasir Gaji
const liElements = document.querySelectorAll('li'); // initializing a variable to represent all the "li" elements in the provided Html collection
liElements[1].remove(); // THIS TARGTES AND SELECTS THE "li" ELEMEMT IN THE SECOND INDEX IN THE "liElements" AND REMOVES IT
@YasirGaji
YasirGaji / remove-2.js
Created December 13, 2021 06:15
This gist showcases how to remove child elements using javascript its further explained in the DOD article by Yasir Gaji
const liElements = document.querySelectorAll('li'); // this initializes "liElements" as a variable to represent all the "li" elements in the Html collection
const list = document.querySelector('ul'); // this initializes "list" as a variable to represent the "ul" element in the Html collection
list.removeChild(liElements[3]); // THIS EXECUTES THE MAIN TASK BY TAKING OUT THE 4TH "li" ELEMENT IN THE "ul" USING THE ".removeChild()" METHOD
@YasirGaji
YasirGaji / interface.html
Last active December 26, 2021 16:02
This html collection gist is for "The Javascript Events" article by Yasir Gaji
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" integrity="sha512-EZLkOqwILORob+p0BXZc+Vm3RgJBOe1Iq/0fiI7r/wJgzOFZMlsqTa29UEl6v6U6gsV4uIpsNZoV32YZqrCRCQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Form Interface For Events Test</title>