Select Elements

--- Find Element By ID

document.getElementById("my-div");

-this usually used to get an element using the ID

--- Find Element By Tag Name

let myTagElements = document.getElementsByTagName("p");

-this usually used to get all elements that has the targeted tag

-You deal with it as an array of element

console.log(myTagElements[1]);

--- Find Element By Class Name

let myClassElement = document.getElementsByClassName("my-span");

-this usually used to get an element using the class name

--- Find Element By CSS Selectors

let myQueryElement = document.querySelector(".my-span");

-this usually used to get an element using the class name and using the
dot notation.

let myQueryAllElement = document.querySelectorAll(".my-span");

-this usually used to get an all element using the class name and using
the dot notation.

-You deal with it as an array to access a specified element using the

indexes

console.log(myClassElement[1]);

Note: it can be used using the the symbol # before the ID name

Note: to get an element using the name use the following pattern

document.querySelector("[name='username']");
 --- Find Element By Collection

------ title

console.log(document.title);

-This return the title of the web page.

------ body

console.log(document.body);

-this return all the element inside the body of the HTML document

------ images

console.log(document.image);

-This return an all images inside a web page

------ forms

console.log(document.forms);

-This return all the forms in the page inside and array,and you access
them using indexes.

For example : console.log(document.forms[0]);

Note: to access and element inside the form you assigned a value to
name attribute and use the value to access it

For example : console.log(document.forms[0].one);

<input type="text" value="ahmed" name="one">

Note: to access the value inside use the value attribute with dot
notation.

For example : console.log(document.forms[0].one.value);

Note: you can also access all element of the from using

Document.forms[“from-one”].element[index];

------ links

console.log(document.links);

-This will return all the link element inside a body and store them in
array.
Note: to access an attribute use the attribute name with dot notation
and this we return the value stored in that attribute

For example : console.log(document.links[1].href);

Get, Set Elements Content And Attributes

let myElement = document.querySelector(".js");

DOM [Get / Set Elements Content And Attributes]

- innerHTML

console.log(myElement.innerHTML);

-This will return the entire text inside the HTML tag including any tag
inside the text

- textContent

console.log(myElement.textContent);

-This will return the entire text inside the HTML tag ignoring any tag
inside the text

myElement.innerHTML = "Text From <span>Main.js</span> File";

-When you change the text inside the HTML tag using the innerText

It will ignore any tag inside the text

myElement.textContent = "Text From <span>Main.js</span> File";

-When you change the text inside the HTML tag using the innerText

It will write down any tag inside the text

- Change Attributes Directly

document.images[0].src = "https://google.com";

document.images[0].alt = "Alternate";

document.images[0].title = "Picture";

document.images[0].id = "pic";

document.images[0].className = "img";
 - Change Attributes With Methods

let myLink = document.querySelector(".link");

- getAttribute

console.log(myLink.getAttribute("class"));

console.log(myLink.getAttribute("href"));

-This will return the value stored in that attribute.

- setAttribute

myLink.setAttribute("href", "https://twitter.com");

myLink.setAttribute("title", "Twitter");

-This will change the value of an attribute

 Check Attributes And Examples
- Element.attributes

console.log(document.getElementsByTagName("p")[0].attributes);

-This method gets all attributes store inside an element as an array

- Element.hasAttribute

myP.hasAttribute("data-src");

-This method return a boolean if an specific attribute exist or not.

- Element.hasAttributes

if (document.getElementsByTagName("div")[0].hasAttributes()) {

console.log(`Has Attributes`);} else {

console.log(`Div Has No Attributes`);

-This method return boolean expression if there is any attribute or

not.

- Element.removeAttribute

if (myP.hasAttribute("data-src")) {

if (myP.getAttribute("data-src") === "") {

myP.removeAttribute("data-src");

} else {

myP.setAttribute("data-src", "New Value");

}} else {

console.log(`Not Found`);

-This method remove a specific attribute from inside a tag

 Create And Append Elements

- createElement

let myElement = document.createElement("div");

-This create an element inside the html page.

- createComment

let myComment = document.createComment("This Is Div");

-This method used to create a comment and it used with appendChild() to

add the comment

- createTextNode

const h1 = document.createElement("h1");

const textNode = document.createTextNode("Hello World");

-This method create a text object and you can append it to and other
tag

h1.appendChild(textNode);

- createAttribute

let myAttr = document.createAttribute("data-custom");

-This create an attribute and make it null.

Note: to set an attribute to a node you should use

setAttributeNode(myAttr) or setAttribute("data-test", "Testing")

- appendChild

myElement.appendChild(myComment);

myElement.appendChild(myText);

-This method usually used to add a text or comment to a tag

 Deal With Children

DOM [Deal With Childrens]

- children

console.log(myElement.children);

-this write all childern of that element exclude all of the node such
text and comment node.

-you deal with it using indexes myElement.children[index]

- childNodes

console.log(myElement.childNodes);

-this write all childern of that element include all of the node such
text and comment node.

-you deal with it using indexes myElement.childNodes[index]

- firstChild

console.log(myElement.firstChild);

-this return the frist node.

- lastChild

console.log(myElement.lastChild);

-this return the last node.

- firstElementChild

console.log(myElement.firstElementChild);

-this return the first element excluding the node

- lastElementChild

console.log(myElement.lastElementChild);

-this return the last element exclude the nodes

 DOM Events
DOM [Events]

- Use Events On HTML

- Use Events On JS

--- onclick

--- oncontextmenu

-this to change the menu when right click is pressed

--- onmouseenter

--- onmouseleave

--- onload

--- onscroll

--- onresize

Usually with input field

--- onfocus

--- onblur

--- onsubmit

let myBtn = document.getElementById("btn");

myBtn.onmouseleave = function () {

console.log("Clicked");};

window.onresize = function () {

console.log("Scroll");};
 Validate Form And Prevent Default
DOM [Events]

- Validate Form Practice

Note: use .value to get the value from the tag and it will return a
string

For example :

document.forms[0].onsubmit = function (e) {

let userValid = false;

let ageValid = false;

if (userInput.value !== "" && userInput.value.length <= 10) {

userValid = true;

if (ageInput.value !== "") {

ageValid = true;

if (userValid === false || ageValid === false) {

e.preventDefault();

}};
 - Prevent Default

event.preventDefault();

-this usually used with function to prevent the function from

performing it order

For example:

document.links[0].onclick = function (event) {

console.log(event);

event.preventDefault();

};
 Event Simulation – Click, Focus, Blur
/*

let one = document.querySelector(".one");let two =

document.querySelector(".two");

DOM [Events Simulation]

let the browser do the event for you

- click

one.onblur = function () {

document.links[0].click();

};

Whenever you blur after foucs in input for example

- focus

window.onload = function () {

two.focus();

};

To let foucs in something at the begaining

- blur
 ClassList Object and Methods
/*

let element = document.getElementById("my-div");

DOM [Class List]

- classList

console.log(element.classList);

This return all the class as list

--- length

console.log(element.classList.length);

This return the length of the classList

--- contains

console.log(element.classList.contains("osama"));

console.log(element.classList.contains("show"));

This check if the classList has a specific class name and return a
boolean value.

--- item(index)

console.log(element.classList.item("3"));

This return the class name with that index

--- add

console.log(element.classList.add("show"));

This add a class call “show”

--- remove

console.log(element.classList.remove("show"));

This remove a class cald “show” if exist

--- toggle

element.onclick = function () {

element.classList.toggle("show");

};

This check if the class exist it will remove it if not it will add it
 CSS Styling And Stylesheets
let element = document.getElementById("my-div");

DOM [CSS]

- style

element.style.color = "red";

element.style.fontWeight = "bold";

This for inline styling and change the attribute of one element

- cssText

element.style.cssText = "font-weight: bold; color: green; opacity:

0.9";

This for inline styling and change the attribute of multible elements

In one line.

- removeProperty(propertyName) [Inline, Stylesheet]

element.style.removeProperty("color");

This for inline to remove the a specific color style

- setProperty(propertyName, value, priority)

element.style.setProperty("font-size", "40px", "important");

This for inline to add the a specific style

Note: to change in css style for a specifc style sheet use styleSheet
to select which one and the use the rule to choose which element inside
the styleSheet

document.styleSheets[0].rules[0].style.removeProperty("line-height");

document.styleSheets[0].rules[0].style.setProperty("background-color",
"red", "important");
 Before, After, Prepend, Append, Remove
/*

let element = document.getElementById("my-div");

let createdP = document.createElement("p");

DOM [Deal With Elements]

- before [Element || String]

Element.before(createP);

-this method add the created element before the targeted element

- after [Element || String]

Element.before(createP);

-this method add the created element after the targeted element

- append [Element || String]

Element.before(createP);

-this method add the element at the last inside the targeted element

- prepend [Element || String]

Element.before(createP);

-this method add the element at the begaining inside the targeted
element

- remove

element.remove();

-this methed delete the element from the HTML body

 DOM Traversing
DOM [Traversing]

let span = document.querySelector(".two");

- nextSibling

console.log(addClasses.nextSibling);

-this method display the next node

- previousSibling

console.log(addClasses.previousSibling);

-this method display the previous node

- nextElementSibling

console.log(addClasses.nextElementSibling);

-this method display the next element

- previousElementSibling

console.log(addClasses.previousElementSibling);

-this method display the preivous element

- parentElement

console.log(span.parentElement);

-this method display the paraent element of a node

span.onclick = function () {

span.parentElement.remove();

}
 DOM Cloning
DOM [Cloning]

- cloneNode(Deep)

let myP = document.querySelector("p").cloneNode(true);

let myDiv = document.querySelector("div");

myDiv.appendChild(myP);

- if the deep argument set to true it will copy the element that inside
the the copied element as well.

-take to your considration that the clone element will duplicate the id
and this is wrong so you must change it

myP.id = `${myP.id}-clone`;

Note: appendChiled can set from existing element and move them form
place to another
 addEventListener
DOM [Add Event Listener]

- addEventListener

- Use Without On

- Attach Multiple Events

- Error Test

Search

- Capture & Bubbling JavaScript

- removeEventListener

let myP = document.querySelector("p");

// myP.onclick = one;

// myP.onclick = two;

// function one() {// console.log("Message From OnClick 1");// }

// function two() {// console.log("Message From OnClick 2");// }

Note : here using on event the event will only attach the last one,it
will override the others

// window.onload = "Osama";

Note: it will not show a error but event listener it will

// myP.addEventListener("click", function () {

console.log("Message From OnClick 1 Event");

});

// myP.addEventListener("click", one);

// myP.addEventListener("click", two);

Note : here using event listener the event will attach all the function
// myP.addEventListener("click", "String");

// Error

Note: the second parameter only accept js object or function

myP.onclick = function () {

let newP = myP.cloneNode(true);

newP.className = "clone";

document.body.appendChild(newP);

};

// let cloned = document.querySelector(".clone");

// Error

Note: the error because the onclick event does not deal with element
not created yet

// cloned.onclick = function () {//

console.log("Iam Cloned");//

};

document.addEventListener("click", function (e) {

if (e.target.className === "clone") {

console.log("Iam Cloned");

});

Note: no error because the event listener can deal with element not
created yet
 setTimeout and clearTimeout
BOM [Browser Object Model]

- setTimeout(Function, Timeout, Additional Params)

-This function is used to perform the function after a set of timeout;

setTimeout(function () {

console.log("Msg");

}, 3000);

-You do not give the argument in the function parameter but you write
them after timeout in order

setTimeout(sayMsg, 3000, "Osama", 38);

function sayMsg(user, age) {

console.log(`Iam Message For ${user} Age Is : ${age}`);

- clearTimeout(Identifier)

-This function is made to stop the setTimeout from runing by giving it

the counter for the setTimeout function

For example

function sayMsg(user, age) {

console.log(`Iam Message For ${user} Age Is : ${age}`);

let counter = setTimeout(sayMsg, 3000, "Osama", 38);

let btn = document.querySelector("button");

btn.onclick = function () {

clearTimeout(counter);

};
 setInterval and clearInterval
BOM [Browser Object Model]

- setInterval(Function, Millseconds, Additional Params)

-This function keep repeating the function each millseconds.

- clearInterval(Identifier)

-This function stop the setInterval

For example

let div = document.querySelector("div");

function countdown() {

div.innerHTML -= 1;

if (div.innerHTML === "0") {

clearInterval(counter);

}}

let counter = setInterval(countdown, 1000);