Accessing HTML Elements

Introduction

Welcome to the Accessing HTML Elements Practice Lab. In this module, you will be provided with the instructions and devices needed to develop your hands-on skills.

Exam Objectives

The following exam objective is covered in this lab:

• 4.4 Complete and debug code that locates, modifies, and adds HTML elements and attributes

Lab Duration

It will take approximately 15 minutes to complete this lab.

Exercise 1 - Accessing HTML Elements Using DOM Methods

The Document Object Model (DOM) is a standard from the World Wide Web Consortium (W3C). This standard provides guidelines or rules to access the web documents. One of the parts of DOM is the HTML DOM, which is the standard model for HTML documents. In DOM, all the HTML elements are considered as objects. The objects have methods and properties. You can access HTML DOM using web-programming languages such as JavaScript. The HTML DOM helps JavaScript to access, modify, add, create, or delete the HTML elements on the page, thereby making the web pages dynamic.

The main object in HTML DOM is the document object. This object points to the web page in whole. The document object can be considered as the owner of all the other objects that exist on the page. Therefore, to access any object on the page, you need to access the document object first.

You can find or access the page objects or elements with the help of id, tag name, or class name. There are various DOM methods to access the page objects or elements such as document.getElementById(id), document.getElementsByTagName(name), and document.getElementsByClassName(name). You will learn more about these methods in this module.

In this exercise, the first task will be to create a new folder named ComputeGrade on PLABWIN10 desktop, add the folder to Visual Studio Code workspace, and save the workspace with the name ComputeGrade. You will create a new HTML page named Grade.html in the ComputeGrade workspace.

In the second task, you will write JavaScript code to access HTML elements using the DOM methods. You will embed the code in the HTML page and run the page in Google Chrome web browser.

Learning Outcomes

After completing this exercise, you will be able to:

• Access HTML elements using DOM methods