boxoft/dbdwjp1

DOM 2022 Build Dynamic Websites JavaScript Part 1

DOM 2022 Build Dynamic Websites JavaScript Part 1

Contents

1. Introduction

• DOM
  • DOM Living Standard

    • "The DOM" is an API for accessing and manipulating documents.

  • Introduction to the DOM
• Web APIs
  • Window #interface
    • Window.document
    • Window.navigator
    • Window.screen
    • Window.location
    • Window.history
    • Window.console
  • Document #interface
    • Document.head #HTMLHeadElement
    • Document.body #HTMLBodyElement #or #HTMLFrameSetElement #deprecated #or null
    • Document.forms #HTMLCollection
  • Navigator #interface
  • Screen #interface
  • Location #interface
  • History
  • console
• Render Tree
  • Render-tree Construction, Layout, and Paint
  • Populating the page: how browsers work
• CSS
  • Pseudo-elements

2. JavaScript vs DOM

• Web APIs
  • Document Object Model (DOM)
  • Window
    • Window.open()
    • Window.close()
  • setTimeout()

3. Accessing the DOM

• Web APIs
  • Document #interface
    • Document.getElementById()
      • returns

        • An Element object describing the DOM element object matching the specified ID, or null if no matching element was found in the document.

    • Document.getElementsByClassName()
      • returns

        • A live HTMLCollection of found elements.

    • Document.getElementsByTagName()
      • returns

        • A live HTMLCollection of found elements in the order they appear in the tree.

    • Document.querySelector()
      • returns

        • An Element object representing the first element in the document that matches the specified set of CSS selectors, or null is returned if there are no matches.

    • Document.querySelectorAll()
      • returns

        • A non-live NodeList containing one Element object for each element that matches at least one of the specified selectors or an empty NodeList in case of no matches.

  • Element #interface
    • Interface Element
  • HTMLCollection #interface
    • Interface HTMLCollection
  • NodeList #interface
    • Interface NodeList
• HTML
  • Getting started with HTML
• Emmet
  • Cheat Sheet

4. Nodes

• Web APIs

  • Node #interface

    • Node.childNodes #read-only

      • A live NodeList containing the children of the node.

    • Node.nodeType #read-only

      • Returns an unsigned short representing the type of the node. Possible values are:

        Name	Value
        ELEMENT_NODE	1
        ATTRIBUTE_NODE	2
        TEXT_NODE	3
        CDATA_SECTION_NODE	4
        PROCESSING_INSTRUCTION_NODE	7
        COMMENT_NODE	8
        DOCUMENT_NODE	9
        DOCUMENT_TYPE_NODE	10
        DOCUMENT_FRAGMENT_NODE	11

    • Node.nodeName #read-only

    • Node.nodeValue

5. Traversing the DOM

• Web APIs

  • Node

    • Node.parentNode #read-only

      • A Node that is the parent of the current node. The parent of an element is an Element node, a Document node, or a DocumentFragment node.

    • Node.parentElement #read-only

      • An Element that is the parent element of the current node, or null if there isn't one.

    • Node.previousSibling #read-only

      • A Node representing the previous sibling of the current node, or null if there are none.

    • Node.nextSibling #read-only

      • A Node representing the next sibling of the current node, or null if there are none.

    • Node.firstChild #read-only

      • A Node, or null if there are none.

    • Node.lastChild #read-only

      • A Node that is the last child of the node, or null is there are no child nodes.

    • Node.hasChildNodes()
      • returns

        • A boolean value that is true if the node has child nodes, and false otherwise.

    • Node.childNodes #read-only
      • A live NodeList containing the children of the node.

  • Element

    • Element.previousElementSibling #read-only

      • A Element object, or null.

    • Element.nextElementSibling #read-only

      • A Element object, or null.

    • Element.firstElementChild #read-only

      • An Element object, or null.

    • Element.lastElementChild #read-only

      • An Element object, or null.

    • Element.children #read-only

      • An HTMLCollection which is a live, ordered collection ... If the element has no element children, then children is an empty list with a length of 0.

6. Creating, Removing and Cloning DOM Elements

• Web APIs
  • Document
    • Document.createElement()

      • A new HTMLElement is returned if the document is an HTMLDocument, which is the most common case. Otherwise a new Element is returned.

  • Node
    • Node.appendChild(aChild)
      • returns

        • A Node that is the appended child (aChild), except ...

    • Node.insertBefore()

      • Returns the added child.

    • Node.replaceChild()
      • returns

        • The replaced Node.

    • Node.removeChild()
    • Node.cloneNode()
      • returns

        • The new Node cloned.

    • Node.textContent

      • A string, or null.

  • Element
    • Element.innerHTML

      • A string containing the HTML serialization of the element's descendants.

    • Element.remove()
  • HTMLElement
    • HTMLElement.innerText

      • A string representing the rendered text content of an element.

7. Where to next

Known Issues

1. My document and code are different from the official version.