Introduction to JavaScript DOM Page Elements

This course explores the basic knowledge and techniques required to create and update page elements using JavaScript DOM. It begins with an introduction to DOM. Here, you will learn the functions of DOM and how it helps improve a webpages' functionality, including connecting web pages to scripts or programming languages by representing the structure of a document. Then, you will learn how to use the Google Chrome dev tool to debug and test your HTML and JavaScript codes on windows and Mac OS. We demonstrate the various methods of selecting and updating page elements, including the query selector. Learn how to update all matching page elements using the JavaScript QuerrySelectorAll and return multiple elements into a node list, update the count of and the text content of an element.

In this course, you will learn how to select an element and update the style values, set the attributes of the page element and then update the HTML and add it to the page elements with the innerHTML property value. For example, update the colour and background colour of the selected element and apply various styling values to the style attribute with JavaScript. Next, you will learn class list methods to toggle an existing class, add, remove and check if the class exists on an element that returns a Boolean value. Then you will discover the Append, Prepend, AppendChild to parent Element methods of adding page elements to the page. Finally, we show how to navigate the DOM tree by selecting a starting element and moving to its related elements with JavaScript Code.

DOM is an abbreviation for document object model. It is a programming interface for web documents. DOM represents the document as nodes and objects, enabling programming languages such as JavaScript and HTML to interact and modify the page elements or contents. By taking this course on Alison.com, you will learn how to create and modify page elements and add event listeners for mouse and keyboard events. Why are you waiting? Take this free online course today and earn a new skill.