In this chapter, you'll find out how to change the contents of HTML elements using the innerHTML property. Then you'll find out how to get and change the attribute values of HTML elements. But first, let's start with how to find HTML elements.

Finding and Changing HTML Elements

By now, you have three methods from the last chapter, and they're :

• Get elements by id;

• Get elements by tag name;

• Get elements by class name.

In this chapter, you'll learn two more methods:

• Get elements by CSS selectors;

• Get elements by HTML object collections.

Let's turn into coding examples to see how they operate:

HTML Elements by id

In this coding example, you'll find the <h2> tag by id and change its contents.

HTML Elements by Tag Name

In this coding example, you'll find all the <h2> tags by tag name and display the first element's content on a fresh <p> tag with the id 'demo'.

HTML Elements by Class Name

There are HTML elements with class attributes. So the below program grabs them and displays one of their content in a fresh <p> tag with the id 'demo'.

HTML Elements by CSS Selectors

In this example, first, we'll find the paragraphs under <div> element with id 'main-content' using document.querySelectorAll method. Then we'll change the text of the first paragraph.

HTML object collections

In a web page or an application, there can be a collection of HTML elements, such as forms which houses a group of form controls. In the example below, we grab the value attribute of all the form elements.