WEBVTT

00:00.000 --> 00:07.000
Understanding methods for selecting elements.

00:07.000 --> 00:16.000
In this video, we will understand get element by ID, query selector, understanding the interactivity.

00:16.000 --> 00:23.000
In this video, we will understand how to select and modify element in a website with the help of an interactivity.

00:23.000 --> 00:29.000
Here we are creating a small website, which will display a message,

00:29.000 --> 00:33.000
and after clicking the button, the message will change.

00:33.000 --> 00:43.000
Understanding select and modifying element through the code.

00:43.000 --> 00:53.000
Here, the phrase get element by ID example suggests that this web page is an example of using JavaScript's get element by ID method.

00:53.000 --> 00:58.000
That selects an HTML element by its unique ID attribute.

00:58.000 --> 01:04.000
It is a commonly used method to access and manipulate elements in the document object model.

01:04.000 --> 01:07.000
The other method is query selector.

01:07.000 --> 01:13.000
This method allows you to select the first element that matches a specified CSS selector.

01:13.000 --> 01:19.000
It can be used for IDs, classes, and more complex selectors.

01:19.000 --> 01:26.000
Can you recall? Is on-click an event or a function? Right, it's an event.

01:26.000 --> 01:33.000
Adding JavaScript here.

01:33.000 --> 01:42.000
Document.GetElement by ID and bracket, mainTitle.innerHTML equals welcome to my website.

01:42.000 --> 01:47.000
Updates the text inside the heading one.

01:47.000 --> 01:54.000
Testing the code. We have completed the program. Let's check whether it works. Open the website.

01:54.000 --> 02:01.000
We see the text hello and change title button. Click on the button to see the results.

02:01.000 --> 02:10.000
The text hello is changed to welcome to my page. Our code is successfully executed.

02:10.000 --> 02:17.000
Think creatively and try it with query selector method.