DOM and DOM Manipulation
In our websites or the webstites that we are building what we do want to do is to manipulate the document structure in some way. This is usually done by using the Document Object Model (DOM), a set of APIs for controlling HTML and styling information that makes heavy use of the Document object.
DOM: Document Object Model
The DOM defines a standard for accessing documents:
Again What is the HTML DOM?
The HTML DOM is a standard object model and programming interface for HTML. It defines:
- The HTML elements as objects
- The properties of all HTML elements
- The methods to access all HTML elements
- The events for all HTML elements
DOM Tree NodesDOM is represented with nodes. So it is useful to know the terminology before working with the DOM.
- Root Node: The Top Node In The Tree, in HTML pages is the HTML Node
- Element Node: An Element that exists in the DOM
- Child node: A node directly inside another node so inside section gallery we have img and that is child of the section gallery
- Descendant node: A node anywhere inside another node. From example above we have gallery that have direct child that is img. But gallery is inside our body tag so child is desccedant node
- Parent node: A node which has another node inside it.
- Sibling nodes: Nodes that sit on the same level in the DOM tree. For example, IMG and P are siblings in the above example.
- Text node: A node containing a text string.