Intro to DOM

This week was fun, getting into the whole notion of manipulating web pages. But the thing that sucks is that when you manipulate a web page the things you have changed is not permanent. Everything goes away and you no longer see your design or “hacks” 🙁

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 for your answer; include sample HTML and JS selectors.

querySelector() is when you select the first element that matches a given CSS style selector.

//select by ID
<li id ="hightlight> List Item 1 </li>
let tag =document.querySelector("#highlight")

querySelectorAll()is when you return a list of elements that matches a given CSS-style selector.

//select by class
<li class ="bold"> List Item 2 </li>
<li class ="bold"> List Item 3 </li>
let tags =document.querySelectorAll(".bold")

The website I used for this problem set is vsauce.

Just copy and paste in the console, I did not too much but I changed some things and you will see:

const videoThumbnail = document.querySelectorAll("img.video-thumbnail")

videoThumbnail[0]
//<img alt class=​"video-thumbnail" ng-src=​"https:​/​/​i.ytimg.com/​vi/​j94VUp6NZEg/​hqdefault.jpg" src=​"https:​/​/​i.ytimg.com/​vi/​j94VUp6NZEg/​hqdefault.jpg">​

//change of images
videoThumbnail[0].setAttribute("src", "https://parade.com/wp-content/uploads/2018/03/golden-puppy-life-national-geographic-ftr.jpg")

for(let i=0; i < videoThumbnail.length; i++)
{videoThumbnail[i].setAttribute("src", "https://parade.com/wp-content/uploads/2018/03/golden-puppy-life-national-geographic-ftr.jpg")
}

//change a tags
const aTags = document.querySelectorAll("a")
aTags[0]
//<a href=​"https:​/​/​www.youtube.com/​dingsauce">​ding!​</a>​

aTags[0].textContent =("bye")
//"bye"

for(let i=0; i < 4; i++)
{aTags[i].textContent=("bye")
}

//change p tags
const pTags = document.querySelectorAll("p")

pTags[0].textContent = ("How are you today? I really don't care LOL: dictum lorem id, lacinia orci. Morbi tempus sem velit, vitae dictum ligula condimentum in. Sed convallis eros nisl, non volutpat felis scelerisque quis.")

for(let i=0; i < pTags.length; i++)
{pTags[i].textContent=("How are you today? I really don't care LOL: dictum lorem id, lacinia orci. Morbi tempus sem velit, vitae dictum ligula condimentum in. Sed convallis eros nisl, non volutpat felis scelerisque quis.")
}
"How are you today? I really don't care LOL but do you understand :Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget velit placerat, dictum lorem id, lacinia orci. Morbi tempus sem velit, vitae dictum ligula condimentum in. Sed convallis eros nisl, non volutpat felis scelerisque quis."

//change authors

iter = 1;
const authorName = document.querySelectorAll("span.ng-binding");

for(let i = 0; i < authorName.length; i++){ 
    authorName[i].textContent = "UNANIMOUSLY" + iter++;
}

//buttons
const buttons = document.querySelectorAll(".btn");
for(let i = 0; i < buttons.length; i++){
    buttons[i].textContent = "get off my site";
}

Exercises for this week:

demo.html/demo.js

exercise.html/exercise.js

selectors.html/selectors.js

This is the problem set:

webpage-hack.html/webpage-hack.js

Join the Conversation

1 Comment

Leave a comment

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

css.php