Note_Tech

All technological notes.

Project maintained by simonangel-fong Hosted on GitHub Pages — Theme by mattgraham

DOM

Back

HTML DOM (Document Object Model)

Dom Tree

Connect JS file

<head>
  <script src="js_file.js"></script>
</head>

Document Object

Attribute Description
document.URL the actual URL of the website
document.body everything inside of the body
document.head everything in the head of the page
documnet.links all the links on the page

Element

Find HTML Element

Method Description
document.getElementById(id) Find an element by element id
element.getElementsByTagName(name) Find all descendant elements by tag name
element.getElementsByClassName(name) Find all descendant elements by class name
element.querySelector() Find the first descendant element by CSS selector
element.querySelectorAll(selector) Find all descendant elements by CSS selector

DOM Navigation

Method Description
element.hasChildNodes() Returns true if an element has any child nodes
element.contains(node) Returns true if a node is a descendant of a node
element.parentNode Returns the parent node of an element
element.childNodes Returns a NodeList of an element’s child nodes
element.firstChild Returns the first child node of an element
element.lastChild Returns the last child node of an element
element.previousSibling Returns the previous node at the same node tree level
element.nextSibling Returns the next node at the same node tree level

Create Element

Method Description
document.createElement(type) creates an element node

Add Element

Method Description
element.appendChild(node) Adds (appends) a new child node to an element

Update Element

Method Description
document.write() writes directly to an open (HTML) document stream
element.innerHTML Sets or returns the content of an element
node.replaceChild(newnode, oldnode) Replaces a child node in an element

Delete Elements

Method Description
element.remove() Removes an element from the DOM
element.removeChild(node) Removes a child node from an element

Text Node

Method Description
document.createTextNode(text) Creates a Text node
element.innerText Sets or returns the text content of a node and its descendants
element.textContent Sets or returns the textual content of a node and its descendants

Attribute

Property Description
element.style Sets or returns the value of the style attribute of an element
element.hasAttribute(name) Returns true if an element has a given attribute
element.getAttribute(name) Returns the value of an element’s attribute
element.setAttribute(name, value) Sets or changes an attribute’s value
element.removeAttribute(name) Removes an attribute from an element

Example: Randomly Changing Color

<body>
  <h1>Changing Color</h1>
  <script src="demo.js"></script>
  <script>
    console.log("url", document.URL);
    console.log("body", document.body);
    console.log("head", document.head);
    console.log("links", document.links);
  </script>
</body>

const header = document.querySelector("h1"); //get the first h1 element

// generate a random color code
const randomColorCode = () => {
  let hexaChar = "0123456789ABCDEF";
  let colorCode = "#";
  for (let i = 0; i < 6; i++) {
    colorCode += hexaChar[Math.floor(Math.random() * 16)];
  }
  return colorCode;
};

// set an time interval to change color
setInterval(() => {
  header.style.color = randomColorCode();
}, 500);

DOM Events

Common Events

Event Occurs When
change The content of a form element have changed
input An element gets user input
submit A form is submitted
Event Occurs When
blur An element loses focus
focus An element gets focus
Event Occurs When
input The content (value) of an input element is changed
Event Occurs When
click A user clicks on an element
contextmenu A user right-clicks on an element
dblclick A user double-clicks on an element
mousedown A mouse button is pressed over an element
mouseenter The mouse pointer moves into an element
mouseleave The mouse pointer moves out of an element
mousemove The mouse pointer moves over an element
mouseout The mouse pointer moves out of an element
mouseover The mouse pointer moves onto an element
mouseup A mouse button is released over an element
Event Occurs When
keydown A user presses a key
keypress A user presses a key
keyup A user releases a key

Event handlers

Method Description
document.getElementById(id).onclick = function(){code} Adding event handler code to an onclick event
element.addEventListener(event, function, useCapture) Attaches an event handler to an element
element.removeEventListener(event, function, capture) Removes an event handler from an element. 
<div id="demo">mouse</div>

<script>
  const demo = document.querySelector("#demo");

  // mouse over
  demo.addEventListener("mouseover", function () {
    this.style.color = "red";
  });

  // mouse out
  demo.addEventListener("mouseout", function () {
    this.style.color = "black";
  });
  // click
  demo.addEventListener("click", function () {
    this.innerText = "Click";
  });

  // double click
  demo.addEventListener("dblclick", function () {
    this.innerText = "Double Click";
  });
</script>

Event Methods

Method Description
event.preventDefault() the default action that belongs to the event will not occur

Example: Prevent Submitting Form

<form id="form" action="www.google.com" method="get">
  <p id="demo">Submit</p>
  <input type="text" name="search" id="search" />
  <input type="submit" value="Submit" />
</form>

<script>
  const form = document.querySelector("#form");
  const demo = document.querySelector("#demo");

  // mouse over
  form.addEventListener("submit", function (event) {
    event.preventDefault();
    demo.innerText = "Submit prevented";
  });
</script>

TOP