Skip to content

Jisan-mia/learn-dom

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

58 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

DOM Manupulation

DOM -> Document Object Model

  1. HTML page is a Document
  2. HTML elements are Objects
  3. HTML tree structure is the Model
console.log(document.all)
//gives us all the elements in the html file in the type of HTMLAllcollection
console.log(document.images)
// gives us all the img in the html file in the type of HTMLCollection
console.log(document.links)
//gives us all the links in the html file in the type of HTMLCollection
console.(document.forms)
// gives all all the forms in the html file in the type of **HTMLCollection.


Some document object methods to find/select/get document elements.

  • To Get element by id:

    document.getElementById(id);
  • To get elements by class name which gives us all the elements which has this same className in the type of HTMLCollection.

    document.getElementsByClassName(className);
  • To get elements by tag name which gives us all the elements which has this same tagName in the type of HTMLCollection.

    document.getElementsByTagName(tagName);
  • To get element using any of the selector(ex. classSelector, id, tagName) using only one method which gives the first matched element.

    document.querySelector(curresponding selector with its sign as prefix)
    
    //example
    document.querySelector(".className" | "#id" | "tagName" )
    ```javascript
  • To get element using any of the selector(ex. classSelector, tagName) using only one method which gives all the elements which has this same tagName or classname in the type of NODEList.

    document.querySelectorAll(curresponding selector with its sign as prefix)
    
    // example
    document.querySelectorAll(".classname" | "tagName")


DOM Hierarchy Traversing (Parent/Child relation):

querySelector finds element from top to bottom
closest finds element from bottom to top

  • Find element from parent to children.:

    const parent = document.querySelector(parent);
    const children = parent.children;
  • Find element from grandParent to children:

    const grandParent = document.querySelector(grandParent)
    const children = grandParent.querySelectorAll(children)<br>
  • Find element from children to parent:

    const children = document.querySelector(children)<br />
    const parent = children.parentElement
  • Find element from children to grandParent:

    const grandParent = children.closest(grandParent);
  • Finding sibling elements. Find next immediate sibling

    const childrenOne = document.querySelector(childrenOne);
    const childrenTwo = childrenOne.nextElementSibling;
  • Find previous immediate sibling

    const childrenTwo = document.querySelector(childrenTwo);
    const childrenOne = childrenTwo.previousElementSibling;


Manipulate the DOM

appendChild() can only take one html element as argument
> append() can take both element and others(text, etc) also multiple elements as an argument.

  • Creating an element

    const elementWantToCreate = document.createElement(tagNameWantToCreate);
    
    //example
    const divElement = document.createElement("div");
    const paragraph = document.createElement("p");
  • add className to element using dom

    element.className = className;
    //example
    divElement.className = "item";
  • set attribute using dom

    element.setAttribute(attributeName, attributeValue);
    //example
    divElement.setAttribute("id", "firstItem");
  • append created element or element at the end of a container

    container.appendChild(elem);
    //example
    container.appendChild(divElement);
  • append element before a childElement within container

    const childElm = document.querySelector("h2Elm");
    container.insertBefore(divElement, childElm);
  • changing HTML content using dom

    const element = document.getElementById(id)
    element.innerHTML = newHTMl
    //or
    element.innerText = newText`
  • changing html elements style using dom

    element.style.propertyName = propertyValue;


Listening to DOM Events:

DOM allows Javascript to react on HTML events
A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element.

  • trigger an action when someone click an element

    element.addEventListener(eventName, a function for what to do when this event triggered)
    
    element.addEventListener('click', (event) => {console.log(event)})

Examples of HTML events:

  • When a user clicks the mouse
  • When the mouse moves over an element
  • When a web page has loaded
  • When an image has been loaded
  • When an input field is changed
  • When an HTML form is submitted
  • When a user strokes a key

Some common HTML events

Event Description
click when an user clicks an element
dblclick when the user double click an element
input when an element gets user input
blur when an element losses blur
focus when an element gets focus
mouseenter when the pointer is moved onto an element
keydown when a user is pressing a key
keyup when a user releases a key

Project Overview

The project was created using most of the DOM methods.

  • An user can add todo to the active TODO ul
  • From the active todo ul user can
    • toggle todos from active to complete
    • edit a todo and
    • delete a todo
  • In the complete todo ul section user can
    • toggle todos from complete to active and
    • delete todos

Image Overview

todojisan

Finally, This would not have been possible to document this wonderful Topic about JS DOM without Sumit bhaiya's guideline.

Sumit bhaiya's Playlist about JS DOM

About

DOM Manipulation with a project included crud operations.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published