Introduction to Web APIs, DOM selectors. DOM selectors, as the name suggests, is a way to use Web APIs to select HTML elements. I'm gonna begin by using the selector to retrieve the text content of the H1 element. I will type const headerElement equals document.getElementById passing in an argument of header. Note, that I only have to type the name of the ID, not the CSS selector. The name of the selector is literal. It will get an element by its ID. It will search the document, and find the element with this matching ID, and return that corresponding element object.

So, quick discussion of an edge case. As a rule, ID names are supposed to be unique, what if this webpage has multiple IDs with same name? This selector will return the first element that has this matching ID. Now I wanna retrieve the text content of this element and display it in the console. Console log headerElement.textContent. Text content is a Web API method, that allows you to retrieve the text content of any element. It will also allow you to set the text content of any element.

For this video, I will only be retrieving the text content. I'm gonna go ahead and execute this console log and to the right, there is Cloud Academy lab challenge. I'm gonna expand the HTML panel, to show that this does match. Now, I'm gonna comment out the console log and use a query selector to select the paragraph with the class, text-success. Const pSuccessElement equals document.querySelector passing in an argument of .text-success.

Note the syntax. Query selector requires the CSS selector of the target element. In this case, being a class, the .classname syntax. And just like getElementById, if there are multiple elements with the same value, it will only return the first one on the page. Now, just like before, I'm gonna console log the text content. Console log pSuccessElement.textContent and I will execute this, and the text content does appear on the right.

So what's the difference between these two selectors? GetElementById is limited to IDs. Now there are similar methods in this format, such as, getElementByClassName, and getElementByTagName. They are limited to selecting the elements by what is specified in their method names. Query selector has no such limitation, and can select any element from the CSS selector given.

Now I wanna comment out this console log and go back to the header element. And just to demonstrate the difference I'm gonna change getElementById to query selector. And in order to convert this over to a CSS selector, I'm gonna insert the pound symbol, before the header term. Now I'm gonna uncomment the header element console log and execute it. And the result is the same as earlier. So, either selector will work, either one is acceptable.

Now, what about selecting multiple elements on the page? For example, I have two paragraph elements on the HTML side, so I'm gonna select all of them. I will type const all PElements equals document.querySelectorAll passing in P as an argument. Query selector all will return an array of all matching elements. Since it's an array, in order to access any element within that array, I would have to use that element's index value. And these elements are inserted into the array in order as they are listed on the page.

So in order to get the text content of the first paragraph, I will console log all P elements at the index of zero and then attach .textContent. After executing this console log the text content is displayed to the right. And in order to get the text content of the second paragraph I will change zero to one and execute this console again. And there is the text content for the second paragraph. I have demonstrated how to access text content.

What if I wanted to retrieve the value of an attribute tied to a specific element? The div in the HTML panel has a clause equal to container. I'm gonna select div, by typing, const divElement equals document.querySelector passing in an argument of div. I'm intentionally not using the class for this demonstration. Next, I will type console.log divElement.getAttribute passing in class as an argument. And I will execute this into the right, the value of container is being displayed. The get attribute method will retrieve the value of the corresponding attribute.

So what's a use case for this method? Well, in HTML there are attributes known as data attributes, that can be used to store useful information. For example, an eCommerce site may be using the data attribute to store the product ID of each item listed for retrieval or shopping cart purposes. And that's it. Thanks for watching at Cloud Academy.