Preview »

JavaScript DOM

By CodeStop

Requirements: Basic knowledge in HTML, CSS, and JavaScript

Duration: 9 hours and 55 minutes

Standards: K-12 Computer Science Framework Core Concepts and Practices * Algorithms and Programming - Collaborating Around Computing - Recognizing and Defining Computational Problems - Developing and Using Abstractions - Creating Computational Artifacts - Testing and Refining Computational Artifacts

About DOM

An HTML or a webpage document contains tags that enclose other tags. Inside each tag is an object. The Document Object Model (DOM) is a representation of the way that a webpage document is structured.

DOM can be used to access and manipulate different HTML objects. It allows you to change HTML content without changing the HTML document itself.

A lot of a web developer's daily work involves interacting with DOM. By learning how to work with the Document Object Model, you will learn one of the most usable skills that a web developer should possess.

An Introduction to JavaScript DOM

With DOM, you can update the style, content, and structure of a webpage efficiently. There are different scripting languages that can be used to manipulate DOM, JavaScript being the most commonly used. An Introduction to JavaScript DOM takes you through your first steps in DOM manipulation through JavaScript. You will answer questions and exercises that will lead you towards a solid foundation in DOM manipulation.

Ideally, you should have an understanding of the basic concepts of HTML, CSS, and JavaScript. If you don't yet, you may still take this course and see where it leads you.

Course Outline

  • DOM Basics
    Document Object Model (DOM) is an interface with a set of objects that represent each element on a web page. In this lesson, you will learn the basic principles on how JavaScript objects work in accessing and modifying HTML elements on a web page.
    55 minutes
    Document
    The DOM document object represents a web page. To access any HTML element on a page without interacting with an HTML document, you can use the DOM document object. In this lesson, you will learn how to use the DOM document object to access and manipulate HTML.
    1 hour and 10 minutes
    Methods
    A DOM method is an action that you can perform on an HTML element. In this lesson, you will learn the different DOM methods and properties like the getElementById method and the innerHTML property.
    1 hour and 10 minutes
    Elements
    Explore how you can use JavaScript to access HTML elements on a web page. In this lesson, you will learn several ways on how to find HTML elements in order to manipulate them.
    55 minutes
    Manipulating HTML
    Learn how you can use JavaScript DOM to manipulate the content of an HTML document. In this lesson, you will practice how to change the value of an attribute and the content of an HTML element.
    55 minutes
    Manipuating CSS
    Modify the style of HTML elements using JavaScript DOM. In this lesson, you will learn how to change the style of an HTML element using the JavaScript DOM style properties.
    1 hour and 15 minutes
    Traversing the DOM Tree
    Discover how you can use the different DOM element properties to move around in the DOM Tree. In this lesson, you will learn how to use different properties of the DOM element like childNodes, parentNode, nextSiblings, and more in traversing the DOM tree.
    1 hour and 10 minutes
    Modifying the DOM Tree
    In this lesson, you will learn how to create, append, delete, and replace child nodes in the DOM tree. You will use different DOM node methods like appendChild(), insertBefore(), removeChild(), and replaceChild().
    1 hour and 10 minutes
    Events
    Learn how you can handle events in the DOM from JavaScript. In this lesson, you will learn how to handle and assign DOM events to HTML elements using the different DOM event attributes.
    1 hour and 15 minutes