From the course: JavaScript: Enhancing the DOM (2013)

What is the Document Object Model (DOM)?

From the course: JavaScript: Enhancing the DOM (2013)

Start my 1-month free trial

What is the Document Object Model (DOM)?

“

Before we get started we need to talk about: what the DOM is, why its important, and discuss some DOM related terminology. The DOM is and acronym for Document Object Model. Its job is to describe the structure of a HTML document and the relationship between different elements like tags, attributes, and texts on a page. As you add, delete or modify existing elements on your website, you're creating structure that a browser interprets as the DOM. So, if I go to this page and I add a new navigational element. (SOUND). Then I'm adding an additional node to this page's DOM. This node has different relationships, like siblings and parents. So, the other li elements on this list are the siblings of the new node I just created. The ol tag is it's parent. The DOM is also the API that gives languages like JavaScript and CSS a way to define and modify the existing document. So, I have an article tag here with an id of main as well a headline right underneath. If I go to the CSS with this document I can access that element each 1 node and ask the browser to change it's color. The browser knows how to access this element, because it looks at the HTML I wrote, and creates a DOM tree. Once that structure exists, it can can map the CSS I wrote and target a specific element in the page. It's really best to think of the DOM as an upside down family tree. I'm working with a really simple webpage with a traditional HTML structure plus a header, an article tag, and a footer. At the top of the family tree is the document itself. And then what we called a root element, which is normally the HTML tag. Inside that element, we have children of the html element, which is normally the head and the body tags. Inside those, we may have some additional elements. For example, in the head section, we may have a title element, a script tag, and maybe a call to an external style sheet. Inside the body tag we may have a header, and that header can have a nav, and that nav can have a list of links. Each one of those links may have an anchor tag inside them. We could also have an article tag, with a series of headlines and paragraphs. Every element in the DOM, including the text and attributes are considered nodes. Nodes can be both parent, and have children elements. But they can also have other relationships. Elements in the same level is known as siblings. So these h1 and paragraph tags are considered siblings. So are these li tags. Siblings are elements with the same parents. The first and last children of an element have special names called first child and last child. The rest of the children of the element are known as child nodes. Remember that browsers use your HTML code to create this DOM structure. And this is why it's really important to write clean and valid HTML. So that your CSS and JavaScript code can access and modify existing elements without any problem.

Contents