DOM manipulation Flashcards
List main types in Dom node hierarchy and provide examples
- EventTarget : window, XMLHttpRequest
- Node: document, Text, Comment
- Element: includes HTMLElements, SVGElements
-
HTMLElement:
<i>,<b>; - Speficic HTML Elements types like HTMLButtonElement:
<button>
“var declarations” (typescriptlang.org). Retrieved August 7, 2023.
EventTarget type
An EventTarget is the most generic of DOM types. It represents objects that can receive events and may have listeners for them.
In a nutshell all you can do with it is add event listeners, remove them, and dispatch events.
“EventTarget - Web APIs | MDN” (developer.mozilla.org). Retrieved September 11, 2023.
Node type
It represents a node on the DOM tree.
All objects that implement Node functionality are based on one of its subclasses. Most notable are Document, Element, and DocumentFragment.
“Node - Web APIs | MDN” (developer.mozilla.org). Retrieved September 11, 2023.
Element type
Element is the most general base class from which all element objects (i.e. objects that represent elements) in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element.
For example, the HTMLElement interface is the base interface for HTML elements, while the SVGElement interface is the basis for all SVG elements. Most functionality is specified further down the class hierarchy.
Languages outside the realm of the Web platform, like XUL through the XULElement interface, also implement Element.
“Element - Web APIs | MDN” (developer.mozilla.org). Retrieved September 18, 2023.
HTMLElement type
The HTMLElement class represents any HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it.
“HTMLElement - Web APIs | MDN” (developer.mozilla.org). Retrieved September 18, 2023.
Document interface
The Document interface represents any web page loaded in the browser and serves as an entry point into the web page’s content, which is the DOM tree.
The DOM tree includes elements such as <body> and <table>, among many others. It provides functionality globally to the document, like how to obtain the page’s URL and create new elements in the document.
“Document - Web APIs | MDN” (developer.mozilla.org). Retrieved September 18, 2023.
What is a nodeList ?
A nodeList is an array of elements, like the kind that is returned by the method document.querySelectorAll(). Items in a nodeList are accessed by index in either of two ways:
list.item(1)list[1]
These two are equivalent. In the first, item() is the single method on the nodeList object. The latter uses the typical array syntax to fetch the second item in the list.
“Fundamental data types” (developer.mozilla.org). Retrieved September 18, 2023.
NodeListOf type
The (document.querySelectorAll().) definition returns a new type: NodeListOf. This return type is essentially a custom implementation of the standard JavaScript list element. Arguably, replacing NodeListOf<E> with E[] would result in a very similar user experience. NodeListOf only implements the following properties and methods: length, item(index), forEach((value, key, parent) => void), and numeric indexing. Additionally, this method returns a list of elements, not nodes, which is what NodeList was returning from the .childNodes method. While this may appear as a discrepancy, take note that interface Element extends from Node.
“The querySelector and querySelectorAll methods” (typescriptlang.org). Retrieved September 18, 2023.
