Unit 4: DOM Interfaces and Interactive JavaScript
The Document Object Model (DOM) represents the structure of an HTML document and connects web pages to scripts and programming languages. It was covered in the first course and is extended in this unit. For example, we covered the DOM data types and the properties and methods used to access the DOM. This unit will discuss the DOM Interfaces with methods to manipulate nodes using JavaScript.
Completing this unit should take you approximately 2 hours.
Upon successful completion of this unit, you will be able to:
- describe the hierarchical structure of the Document Object Model;
- identify how DOM Programming Interfaces are used to access elements;
- apply JavaScript to access content in the DOM; and
- manipulate DOM elements using JavaScript.
4.1: DOM Programming Interfaces
The Document Object Model (DOM) is an interface for web documents that helps structure them logically to interact more easily with programming. We will discuss some of the different interfaces in the DOM and how they work. The articles in this section provide several examples you can use as references throughout this course and the next one.
In the DOM, all document parts are organized in a hierarchical tree-like structure consisting of parents and children. These individual parts are called Nodes. The Node interface is an abstract base class, so there is no such thing as a plain Node object. Look at some of the most used properties
nodeType,parentNode,childNodes,firstChild,lastChild,previousSibling,nextSibling, andattributes.The Document interface is an interface for web documents. It represents a document as a logical tree and has different properties and methods you can access as you build.
Element nodes in HTML documents have properties and methods that help us locate specific elements on a webpage. Using methods such as
getElementsByTagName()andgetElementById(), we can easily parse the document and find what we need without searching from the root parent element.Most interfaces in the HTML DOM API map almost one-to-one to individual HTML elements. This interface allows you to perform various actions on your webpage, such as getting, removing, adding, and changing HTML elements. Many options and methods are available to accomplish these changes, and we will cover some of the most common ones in the next section.
Understanding the EventTarget interface can make coding much easier to comprehend when working with events triggered by user actions. There are various types of events, and knowing how to handle them is essential for understanding JavaScript and its use of this interface. For example, the
addEventListener()method adds a function that responds to certain events (e.g., mousedown).
4.2: JavaScript and the DOM: Commonly Used Methods
The are several common methods in JavaScript used when working with DOM objects. For example, the
.append()method is used to insert nodes and.createElement()is used to create a node. There are many more methods, but the following are the most commonly used.The
createElement()method creates an Element node. The syntax for this method iscreateElement(type), where "type" refers to the type of element to create and is required as a parameter. This method returns the created node element.The
.append()method inserts a set of Node or string objects after the last child of the document. This can be used to add a new node or move an existing child node to a new position. Theappend()method does not return a value; its parameters are either Nodes or string objects.The
.append()method inserts a set of Node or string objects after the element's last child. This can be used to add a new node or move an existing child node to a new position. Theappend()method does not return a value; its parameters are either Nodes or string objects.In JavaScript, the
getElementById()method returns the element with the ID passed as an argument to the function. The syntax for this method isdocument.getElementById(element_ID), where "element_ID" refers to the ID of an element and is required as a parameter. If there's no such ID, then this method will return null. In this video, we display some basic text on a web page in various ways and use this method in our code.The
getElementsByName()method of the Document object returns a NodeList Collection of elements with a given name. The syntax for this method isDocument.getElementsByName(param), where "param" refers to the Name that it will search and is required as a parameter. The NodeList is an object similar to an array with properties like length and indexing beginning at 0. However, note that this method does not have full functionality like an array.The
querySelector()is a method that searches and returns the first element that matches the parameter sent to it. The syntax for this method isdocument.querySelector(param). If a match is not found, it will return null. If there is more than one match, it only returns the first.The
querySelector()returns the first element within the document that matches the selector(s) and null if no match is found. This will only return the first element that matches the selectors. You need to use a different method to return all matches,querySelectorAll()When working with the DOM, you need to be able to create elements, and once you have created them, you should set whatever attributes you are trying to modify. Finally, you attach your element to the DOM. We recommend that you follow the examples in this video using your favorite editor.
This video covers some of the methods mentioned in this section. The DOM Tree comprises nodes from the elements on the page. If you want to change something, you must know how to "grab" the node and use another method to manipulate the node. Follow along with the video and try some of the examples using your favorite editor. This exercise does not count toward your grade. It is just for practice!
Unit 4 Assessment
- Receive a grade
Take this assessment to see how well you understood this unit.
- This assessment does not count towards your grade. It is just for practice!
- You will see the correct answers when you submit your answers. Use this to help you study for the final exam!
- You can take this assessment as many times as you want, whenever you want.