Dom node management

# Web Site Writing Basics

# javascript

# domnode

DOM Node management in JavaScript is a process that uses JavaScript code to access, change, add, or delete the elements that make up the DOM Tree. It is what makes a web page from the original to just a static HTML / CSS document to a dynamic interactive and content-changing web application. 🔑 What JavaScript uses to manage DOM Node management is divided into three main steps using JavaScript methods and properties: 1. Selecting a (Selecting) Node Before handling any Node, it must "select" or "access" that Node before the method (Method) document.getElementById ('id-name') selects an Element Node from the iddocument.querySelector ('CSS-selector') attributes. Select the first Node that matches the given Selector (e.g. div, .class.,# id) document.querySelectorAll ('CSS-selector') Select all Node that matches the given Selector.2.Modifying (Modifying) Node Once the Node has been obtained, it can change content, attributes, or style: Change content: element.textContent = 'New text' (change only text) element.innerHTML = '< h1 > New HTML < / h1 >' (change including the HTML tag inside) Change attribute: element.setAttribute ('class', 'new-class') element.RemoveAttribute ('class') Change style (CSS): element.style color = 'red' elements.add classic.3) Creating and arranging (Creating & Structuring) NodeJavaScript can create a new Node and rearrange it in the DOM Tree: Create a new Node: document.createElement ('div') (Create Element Node) document.createTNoextNode ('Hello') (Create Text Node) Add / Remove Node: parentNode.appendchild (childNode) (Add Node Child Node to Last) parentNode.Remove eChild (Remove Node Child Node) parentNode.Insert Before (NewChild, ReferenceChild Node) (Add Node Child Node Front Node Reference) 🎯 The importance of DOM-Update Real-Node Management is the key of DOM-Node-Node Management. : Change numbers, text, or images without reloading pages. Respond to the user: For example, when the user clicks a button, enters a form, or moves the mouse, it can hide / display elements or change colors. Create a new element: add an item to the list, display a pop-up window, or create a data table based on the information provided by the server.