DOM Manipulation

DOM Manipulation

Introduction

The Document Object Model (DOM) is an application programming interface (API) for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated. In the DOM specification, the term "document" is used in the broad sense - increasingly, XML is being used as a way of representing many different kinds of information that may be stored in diverse systems, and much of this would traditionally be seen as data rather than as documents. Nevertheless, XML presents this data as documents, and the DOM may be used to manage this data. Hence we can say that dom is a part of the browser but we can access that using javascript.

DOM Operation

While performing dom-manipulation every time we will do the following operations

  1. Select the HTML element that we want to target
  2. Perform the manipulation

Selecting HTML elements

  1. document .querySelector( ) Based on the CSS selector provided we will select that element. If we have multiple CSS selectors then the first one selected will be given.
  2. document.querySelectorAll() Based on the CSS selector provided it will select and return back all the elements which match the CSS selector provided in the form of a list node.

NOTE: The returned list node does not have access to all the properties of the array. The two available properties are forEach loop and .length To access other properties we need to convert them into an array which can be done as
ARRAY.from(list_node)

3.document.getElementbyID(ID) Selects the HTML element which has the same id. In case of multiple matches will return the element with the first occurrence.

Editing the DOM NODES

  1. Changing the HTML attributes HTML tags have properties called attributes. We can modify them as a. Changing the inline styles element. style ---> this will affect the inline styles
    b. Changing the text inside the HTML tag element.textContent ---> will change the text inside the HTML tag
    c. element.setAttribute("attribute") sets the HTML attribute to a specific value

  2. Document.body The Document.body property represents the or node of the current document, or null if no such element exists.

  3. element.classlist: The Element.classList is a read-only property that returns a live DOMTokenList collection of the class attributes of the element. This can then be used to manipulate the class list.

Creating DOM nodes

  1. node.appendChild(element): The appendChild() method of the Node interface adds a node to the end of the list of children of a specified parent node. If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position.
  2. element.append() : The Element. append() method inserts a set of Node objects or string objects after the last child of the Element. String objects are inserted as equivalent Text nodes. 3.HTMLElement.innerText: The innerText property of the HTMLElement interface represents the rendered text content of a node and its descendants.
  3. element.InnerHTML() : gets the entire html tag as a string.