In the previous exercise, we accessed the webpage elements with the document keyword!
What if we wanted to select a specific element? The DOM interface allows us to access a specific element with CSS selectors. CSS selectors define the elements to which a set of CSS rules apply, but we can also use these same selectors to access DOM elements with our script! Selectors can include the name of the tag, a class, or an ID.
The .querySelector() method allows us to specify a CSS selector and then returns the first element that matches that selector. The following code would return the first paragraph in the document.
You can also use other CSS selectors such as an element’s . class or its # ID.
Another option, if you want to access elements directly by their id, you can use the aptly named .getElementByID() function:
The example chains so that it selects the element with an ID of ‘bio’ and set its .innerHTML to the text ‘The description’.
Instructions
Call the .querySelector() method to select the tag of h1 from the DOM.
Access that element’s .innerHTML property to change the h1 title to ‘Most popular TV show searches in 2016’.
Use the .getElementById method to access the element with an id of "fourth".
Access that element’s .innerHTML to replace the content in the fourth item in the list to read “Fourth element”.