I chose Walmart because it looked the most understandable. I can easily understand the HTML layout of the page compared to other websites like New York Times. Overall this problem was really fun to do. I enjoy using DOM manipulations.
Describe how the querySelector() and querySelectorAll() methods work. What is the difference between the values returned for each method? Use an example code snippet to support your answer; include sample HTML and JS selectors.
querySelector() is a newer method that has not existed for a while,which makes our lives easier. We can basically use it instead of using getElementByID, getElementByTagName, getElementByClassName. What is basically does is take the CSS Style selector (CSS Style selectors is any selector we would use in CSS Document). It returns the first element that matches a given CSS Style Selector. It only returns the first element.
<body> <h1>Welcome to MY DOM Demo</h1> <h1>This is a second H1</h1> </body> let tag = document.querySelector("h1"); //Returns the first h1 which is Welcome to my DOM Demo
querySelectorAll() is the alternative to querySelector(). It works exactly the same but it returns all matching elements instead of only one.
<body> <h1>Welcome to MY DOM Demo</h1> <h1>This is a second H1</h1> </body> let tag = document.querySelectorAll("h1"); //Returns both the h1 tags above