Skip to content

Latest commit

 

History

History
170 lines (99 loc) · 3.3 KB

03_JavaScript_DOM.md

File metadata and controls

170 lines (99 loc) · 3.3 KB

JavaScript DOM (Document Object Model)



DOM

: The core of client-side JavaScript

  • Objectification of the web browser and web document content
    • Each object can read or set information through properties
  • Want to know the position of the web browser window?
    • Read the property of the window object that tells the window position

DOM Levels and Confusion

  • Recently, DOM has been organized and standardized
    • Ranges from level 0 to the latest level


Composition of the DOM

: Objectified -> Structured -> Composed of layers

  • Current web browser window

    • Window Object

      • The window displaying the DOM document
      • Virtual topmost object
      • The window object is a global object
      • Contains various functions, namespaces, and objects

    • Document Object

      • Serves as the entry point for page content
      • Contains <body> and other elements

  • The web browser is a window that displays web documents, and it is the basis of the DOM

    • Objects other than the Window object are accessed as properties of the Window object!

  • To access the Document object

    • Use the document property of the window object
    • The document property of the window object points to the Document object
      • The Document object can access the web document and some HTML elements within it!


Window Creation

  • Creation
    • Use the open method of the window object
  • Close window
    • Use the close method of the window object

alert

  • Creates an alert box

  • Mainly used for debugging



Web Document Access


getElementById(id)

  • Returns as a single node
  • Everything else returns in an array-like format

querySelector()

  • Selects a node using a CSS Selector, but returns only the first matching node

querySelectorAll()

  • Selects nodes using a CSS Selector
  • Returns all matching nodes as an array


DOM Manipulation


Things You Can Do Depending on the Type of Node

  • Change element attributes or CSS properties
  • Read or change input form values
  • Insert new HTML elements and content into the document

document.write()

  • When used inside a function and called through an event
    • It erases the entire existing document and outputs the content

appendChild()

: Used to insert a node as a child of a specific node

  • Inserted at the end of existing child elements

insertBefore()

: Used to insert before a specific element

  • Usage
    • parentNode.insertBefore(node to insert, reference node)

replaceChild()

: Replaces a specific child node with a new node

  • Usage
    • parentNode.replaceChild(new node, node to be replaced)

getAttribute(), setAttribute()

: Gets the attribute value of a node, and sets the node's attribute to an attribute value

  • Usage
    • node.getAttribute("attribute name")
    • node.setAttribute("attribute name", "attribute value")

innerHTML, insertAdjacentHTML

  • Methods that can be used for DOM manipulation
  • Has the effect of processing createElement(), createTextNode(), appendChild() all at once
  • Usage
    • element.innerHTML(text)
    • element.insertAdjacentHTML(position, text)
      • Position can also specify the insertion location