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
In simple terms we use the HTML DOM to get, change, add, or delete HTML elements. This is dom diagram tree created by Ian Hickson Link

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.
DOM Javascript

About TheodoreCoding

TheodoreCoding is site where we publish all of our web development articles, courses and YouTube Content. This content is owned by Rick Sekuloski, which is owner of this site and the courses and Youtube Channel. Here people can find relevant information regarding any news from IT world, latest web development techniques and etc. Our goal is simple to create fun and interesting content for our viewers. Here you can find udemy coupons for some courses or promotions.