DOM and DOM Manipulation
This is short description of what DOM is and how we can use it for our JavaScript Pogramming Language
Section JavaScript Dom Manipulation and Events
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:
So the point here is to use DOM to connect webpages to some scripts in our case the JavaScript. So every document currently loaded in our browser tabs is represented by a document object model. This is a "tree structure" representation created by the browser. This enables the HTML structure to be easily accessed by programming languages . So after the page has been rendered developers access this HTML structure and we can apply styling and other information to the correct element in that page. This is called DOM manipulation.
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 Nodes
DOM 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.
