[TIL] 20201209 Introducing The World of DOM

DOM

• Document Object Model
• JavaScript representation of a webpage.
• It's a 'window/portal' into the contents of a webpage

 

 

Document Object

• Web Browsers take incoming HTML & CSS and create corresponding JavaScript Objects.
• Entry point into the world of the DOM
• Contains representations of all the contentson a page, and other useful methods and properties.

 

 

How to Select the Object

getElementById

• Single out an HTML element (object) with its id.
• If the id is not found, returns null.
• Syntax

const el = document.getDocumentById(id);

 

getElementsByTagName

• Selects elements by tag name (i.e. <p>, <h1>, <img>)
• Returns HTMLCollection.
• Syntax

const el = document.getElementsByTagName(tag name);

 

getElementsByClassname

• Selects elements by class.
• Returns HTMLCollection.
• Syntax

const el = document.getElementsyClassName(class);

 

HTMLCollection

• An array-like object.
• Can't use array methods with HTMLCollection.
• Each element of HTMLCollection is Element Object in JavaScript. It represent the specific HTML element.
• If no element was found, returns an empty HTMLCollection

 

querySelector

• A newer, all-in-one method to select a single element.
• Gives only the first one.
• Can use CSS style selectors.
  • Example : document.querySelector('img:nth-of-type(2)')  //selects the second img
• Syntax

//Finds with tag (only the first one)
document.querySelector('tag');

//Finds with id
document.querySelector('#id');

//Finds with class (only the first one)
document.querySelector('.class');

 

querySelectorAll

• Gives all the elements. Same as querySelector otherwise.
• Returns a static NodeList representing a list of the document's elements that match the specified group of selectors.

 

 

How to Manipulate the Object

innerText

• Spacing in mark up invisible
• Only shows human-readable elements.
• Aware of styling and won't return the text of "hidden" elements.

 

textContent

• All the spacing from the mark up is visible.
• Gets the content of all elements.
• Returns every element in the node.

 

innerHTML

• Gives the entire markup. (Tags are visible)
• If innerHTML is set with tages, it's considered as a part of the HTML.
• Example

document.querySelector('h1').innerHTML = '<b>HELLO</b>';
//changes h1 into bold HELLO

 

Attributes

Contents inside of the HTML tags (i.e. href, src, type, id, class...)

• getAttribute('attr') : get the attribute
• setAttribute('attr', 'newAttr') : set a new attribute

 

Style 

• Inline style change. (Not ideal, especially when there are a lot to change.)
• Example

const h1 = document.querySelector('h1');
h1.style.color = 'olive';
//change the color of h1 into olive

 

Window.getComputedStyle(element)

Shows how the element actually looks like on browser.

 

ClassList

• Used when multiple classes should be applied to an element.
• Put all the classes to apply in the classList
• Syntax

element.classList.add('className'); //add class to the classList
element.classList.remove('className'); //remove class from the classList
element.classList.toggle('className'); //toggle: turns the class on/off

• Example

const h2 = document.querySelector('h2');
h2.classList.add('style3');
//added class 'style3' to the classList

 

 

 

Traversing Parent/Child/Sibling

• parentElement()
  • Gives the parent element.
• childElement() 
  • Gives the child elements. (There can be more than one)
  • Returns HTMLCollection
• previousSibling() / nextSibling()
  • Give corresponding node.
  • Some browsers insert spaces between elements, creating text nodes that do not exist in the mark up.
• previousElementSibling() / nextElementSibling()
  • Give corresponding element.
  • Allow us to navigate one element to another.

 

 

 

Create and Insert Elements

document.createElement('tag ')

• Creates a new element with the tag. (The element will be empty)
• Need to insert the element separately.

parentNode.appendChild(childElement)

• Appends childElement as the last child of the element.

parentNode.append(childElement)

• Can insert more than one thing at a time.
• Internet Explorer doesn't support this.
• Can pass a String instead of childElement.

parentNode.prepend(childElement)

• IE doesn't support this.
• Inserts the childElement as the first child of the parentNode.

Element.insertAdjacentElement()

• Inserts a sibling between two elements.
• Syntax

targetElement.insertAdjacentElement(position, element);

• position parameters
  • beforebegin
  • afterbegin
  • beforeend
  • afterend

 

childNode.after/before(childElement)

• Insert a sibling right after/before the childNode.

 

 

 

Remove Elements

Node.removeChild()

• Remove a child of the parent
• Syntax
  • parent.removeChild(child)
  • child.parentElement.removeChild(child)

Node.remove()

• Remove the element
• Syntax
  • element.remove();

 

 

 

 

 

 

 

 

* This post is a summary of Udemy Course "The Web Developer Bootcamp" by Colt Steele.