JavaScript DOM
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 ObjectThe window displaying the DOM document
Virtual topmost object
The window object is a global object
Contains various functions, namespaces, and objects
Document ObjectServes 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 methodof the window object
Close window
Use the
close methodof the window object
alert
alertCreates 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()
document.write()When used inside a function and called through an event
It erases the entire existing document and outputs the content
appendChild()
appendChild(): Used to insert a node as a child of a specific node
Inserted at the end of existing child elements
insertBefore()
insertBefore(): Used to insert before a specific element
Usage
parentNode.insertBefore(node to insert, reference node)
replaceChild()
replaceChild(): Replaces a specific child node with a new node
Usage
parentNode.replaceChild(new node, node to be replaced)
getAttribute(), setAttribute()
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
innerHTML, insertAdjacentHTMLMethods that can be used for DOM manipulation
Has the effect of processing
createElement(),createTextNode(),appendChild()all at onceUsage
element.innerHTML(text)
element.insertAdjacentHTML(position, text)
Position can also specify the insertion location
Last updated