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.
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.
- What is the DOM?
- Choosing and isolating elements
- Traversing up and down DOM nodes
- Changing HTML attributes
- Modifying elements as text
- Creating and appending nodes
- Cloning and removing nodes
- Adding a bubbling event listener
- Adding and resizing images
- Handling clicks