DOM and Layout Trees

Critical Rendering Path

How is the DOM created

<html>
<head>
  <title>Understanding the Critical Rendering Path</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
      <h1>Understanding the Critical Rendering Path</h1>
  </header>
  <main>
      <h2>Introduction</h2>
      <p>Lorem ipsum dolor sit amet</p>
  </main>
  <footer>
      <small>Copyright 2017</small>
  </footer>
</body>
</html>

Piece by piece

 Constructing the CSSOM Tree

body { font-size: 18px; }

header { color: plum; }
h1 { font-size: 28px; }

main { color: firebrick; }
h2 { font-size: 20px; }

footer { display: none; }

Running JavaScript

<script async src="script.js">

Creating the Render Tree

Generating the Layout

<meta name="viewport" content="width=device-width,initial-scale=1">

Painting

All together

What, exactly, is the DOM?

What the DOM is not

The DOM is not your source HTML

1. When the HTML is not valid

<!doctype html>
<html>
Hello, world!
</html>

2. When the DOM is modified by Javascript

let newParagraph = document.createElement("p");
let paragraphContent = document.createTextNode("I'm new!");
newParagraph.appendChild(paragraphContent);
document.body.appendChild(newParagraph);

The DOM is not what you see in the browser

<!doctype html>
<html lang="en">
  <head></head>
  <body>
    <h1>Hello, world!</h1>
    <p style="display: none;">How are you?</p>
  </body>
</html>

The DOM is not what is in DevTools

The DOM Tree & Nodes

Node vs Element

Navigation

Methods in Node

  • parentNode.insertBefore(newNode, refNode)
  • appendChild(node)
  • createTextNode(textString)
  • removeChild(childNode)
  • replaceChild(newNode, childNode)
  • cloneNode()
  • parentNode()
  • getSelection()

DOM Manipulation

Methods in Element

  • innerHTML()

  • getElementById(id)

  • getElementsByClassName()
  • getElementsByTagName()
  • querySelectorAll(selector)/querySelector(selector)

  • setAttribute(attrKey, attrValue)

  • getAttribute(attrKey)

  • getAttributeNames()

  • classList

  • innerHTML/innerText

Have a break

Event Delegation

The two ways of handling JavaScript Events

 

  • By using an event handler
  • By adding an event listener

preventDefault
stopPropagation
stopImmediatePropagation

DOM / Browser render

By Khrystyna Landvytovych

Made with Slides.com

DOM / Browser render

  • 274

More from Khrystyna Landvytovych