Category: HTML DOM

DOMTokenList The DOMTokenList is an interface in DOM (Document Object Model) which represents a set of space-separated tokens (classes). Generally, it is used for managing the classes in HTML elements. It may look like an array, but it is not. Similar to an array, you can loop through a DOMTokenList and access its tokens by index. However,…

DOM NodeList The NodeLists are similar to an array or HTMLCollection containing the HTML elements. However, it is not the same as the array or HTML collection. All modern browsers return the node list when you use querySelectorAll() method and childNodes properties. You can traverse the NodeList as an array but can’t use other array methods like map(), filter(), etc, with node lists. The following…

DOM Collections The DOM (Document Object Model) collections are a way to group together related HTML elements. They are read-only and can be accessed using the properties of DOM objects such as the document object or a DOM node. There are many different types of DOM collections, including: DOM collections can be used to perform a variety…

In JavaScript, with HTML DOM we can navigate the tree nodes using the relationship between the nodes. Each HTML element is represented as a node in the DOM tree. The HTML document object is represented as root node. There are different types of nodes such as root node, parent, child and sibling nodes. The relationship between these nodes help to navigate the DOM tree. What are DOM…

The DOM animation can be achieved by changing the DOM element’s style using JavaScript. When changes are gradual and time interval is small, the animation looks continuous. Generally, there are three ways to animate a DOM element: This chapter provides a basic understanding of how to animate DOM elements using JavaScript. Animate DOM Elements with JavaScript JavaScript…

Changing CSS with JavaScript JavaScript allows you to change the CSS of the HTML element dynamically. When HTML gets loaded in the browser, it creates a DOM tree. The DOM tree contains each HTML element in the object format. Furthermore, each HTML element object contains the ‘style‘ object as a property. Here, a ‘style‘ object contains various properties like color,…

Changing HTML with JavaScript The HTML DOM allows us to change the HTML elements with JavaScript. You can customize or dynamically update the HTML elements using the various methods and properties. For example, you can change the content of the HTML element, remove or add new HTML elements to the web page, change a particular…

The DOM Forms The HTML DOM document forms are used to get the data from the users. In JavaScript, you can use the ‘forms’ collection of the ‘document’ object to access all <form> elements of the HTML document. You can access all forms elements of particular forms and manipulate them. Using JavaScript, you can validate the form values, handle…

The attribute interface in the Document Object Model (DOM) represents attributes of an element as an object. And, this object represents an HTML attribute, through which we can control the functionality of HTML elements. The attributes of an element are stored in an array-like unordered collection called NamedNodeMap. You can access nodes of this array…

The DOM Elements The HTML DOM elements is the acronym for the Document Object Model elements. With JavaScript, we can manipulate the HTM elements. We can access the HTML elements using id, attribute, tag name, class name, etc. When a web page loads in the browser, it creates a DOM tree representing the web page’s structure. The web page…