[WEEK #6] – 13 DOM Manipulation + Problem Set + Blog Question


Hey guys. This is just another weeks work. This a refresher of work to be honest. We finally get to use Javascript in real websites to change things around. Overall, I got most of the material.

Tutorials


Problem Set

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.


Blog Question


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

Join the Conversation

1 Comment

  1. Very good explanations of querySelector() and querySelectorAll(). The only other thing to note is that the later returns a ‘list’ of values regardless of wether there’s one or hundreds.

Leave a comment

Your email address will not be published. Required fields are marked *

css.php