Professional Documents
Culture Documents
New DOCX Document
New DOCX Document
document.getElementById("my-div");
-this usually used to get all elements that has the targeted tag
console.log(myTagElements[1]);
-this usually used to get an element using the class name and using the
dot notation.
-this usually used to get an all element using the class name and using
the dot notation.
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);
------ body
console.log(document.body);
-this return all the element inside the body of the HTML document
------ images
console.log(document.image);
------ forms
console.log(document.forms);
-This return all the forms in the page inside and array,and you access
them using indexes.
Note: to access and element inside the form you assigned a value to
name attribute and use the value to access it
Note: to access the value inside use the value attribute with dot
notation.
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
- 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
-When you change the text inside the HTML tag using the innerText
-When you change the text inside the HTML tag using the innerText
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
- getAttribute
console.log(myLink.getAttribute("class"));
console.log(myLink.getAttribute("href"));
- setAttribute
myLink.setAttribute("href", "https://twitter.com");
myLink.setAttribute("title", "Twitter");
console.log(document.getElementsByTagName("p")[0].attributes);
- Element.hasAttribute
myP.hasAttribute("data-src");
- Element.hasAttributes
if (document.getElementsByTagName("div")[0].hasAttributes()) {
- Element.removeAttribute
if (myP.hasAttribute("data-src")) {
myP.removeAttribute("data-src");
} else {
}} else {
console.log(`Not Found`);
- createElement
- createComment
- createTextNode
const h1 = document.createElement("h1");
-This method create a text object and you can append it to and other
tag
h1.appendChild(textNode);
- createAttribute
- appendChild
myElement.appendChild(myComment);
myElement.appendChild(myText);
- children
console.log(myElement.children);
-this write all childern of that element exclude all of the node such
text and comment node.
- childNodes
console.log(myElement.childNodes);
-this write all childern of that element include all of the node such
text and comment node.
- firstChild
console.log(myElement.firstChild);
- lastChild
console.log(myElement.lastChild);
- firstElementChild
console.log(myElement.firstElementChild);
- lastElementChild
console.log(myElement.lastElementChild);
- Use Events On JS
--- onclick
--- oncontextmenu
--- onmouseenter
--- onmouseleave
--- onload
--- onscroll
--- onresize
--- onfocus
--- onblur
--- onsubmit
myBtn.onmouseleave = function () {
console.log("Clicked");};
window.onresize = function () {
console.log("Scroll");};
Validate Form And Prevent Default
DOM [Events]
Note: use .value to get the value from the tag and it will return a
string
For example :
userValid = true;
ageValid = true;
e.preventDefault();
}};
- Prevent Default
event.preventDefault();
For example:
console.log(event);
event.preventDefault();
};
Event Simulation – Click, Focus, Blur
/*
- click
one.onblur = function () {
document.links[0].click();
};
- focus
window.onload = function () {
two.focus();
};
- blur
ClassList Object and Methods
/*
- classList
console.log(element.classList);
--- length
console.log(element.classList.length);
--- 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"));
--- add
console.log(element.classList.add("show"));
--- remove
console.log(element.classList.remove("show"));
--- 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
This for inline styling and change the attribute of multible elements
In one line.
element.style.removeProperty("color");
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
/*
Element.before(createP);
-this method add the created element before the targeted element
Element.before(createP);
-this method add the created element after the targeted element
Element.before(createP);
-this method add the element at the last inside the targeted element
Element.before(createP);
-this method add the element at the begaining inside the targeted
element
- remove
element.remove();
- nextSibling
console.log(addClasses.nextSibling);
- previousSibling
console.log(addClasses.previousSibling);
- nextElementSibling
console.log(addClasses.nextElementSibling);
- previousElementSibling
console.log(addClasses.previousElementSibling);
- parentElement
console.log(span.parentElement);
span.onclick = function () {
span.parentElement.remove();
}
DOM Cloning
DOM [Cloning]
- cloneNode(Deep)
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
- Error Test
Search
- removeEventListener
// myP.onclick = one;
// myP.onclick = two;
Note : here using on event the event will only attach the last one,it
will override the others
// window.onload = "Osama";
// myP.addEventListener("click", function () {
});
// 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
myP.onclick = function () {
newP.className = "clone";
document.body.appendChild(newP);
};
// Error
Note: the error because the onclick event does not deal with element
not created yet
console.log("Iam Cloned");//
};
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 () {
console.log("Msg");
}, 3000);
-You do not give the argument in the function parameter but you write
them after timeout in order
- clearTimeout(Identifier)
For example
btn.onclick = function () {
clearTimeout(counter);
};
setInterval and clearInterval
BOM [Browser Object Model]
- clearInterval(Identifier)
For example
function countdown() {
div.innerHTML -= 1;
clearInterval(counter);
}}