Practice querySelector

Size
2,512 Kb
Views
40,480

How do I make an practice queryselector?

Sample HTML to use in class practicing with JavaScript querySelector and different CSS selectors.. What is a practice queryselector? How do you make a practice queryselector? This script and codes were developed by Mobile Application Design-Development on 10 August 2022, Wednesday.

Practice querySelector Previews

Practice querySelector - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Practice querySelector</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <main id="content"> <section class="col one"> <h2>Some Title</h2> <p>lorem ipsum <a href="#">Read More...</a></p> <p>lorem ipsum <a href="#">Read More...</a></p> <hr/> <p>lorem ipsum <a href="#">Read More...</a></p> <p>lorem ipsum <a href="#">Read More...</a></p> <p>lorem ipsum <a href="#">Read More...</a></p> </section> <section class="col two"> <h3>Some Title</h3> <p>lorem ipsum <a href="#">Read More...</a></p> <p>lorem <span>XXX</span> ipsum <a href="#">Read More...</a></p> <p>lorem Bob ipsum <a href="#">Read More...</a></p> <p>lorem ipsum <a href="#">Read More...</a></p> <hr/> <p>lorem ipsum <a href="#">Read More...</a></p> </section> </main>
</body> <script src="js/index.js"></script>
</body>
</html>

Practice querySelector - Script Codes CSS Codes

:root { font-size: calc(3.75px + 6.67px + 1.875px); /* 1vw + 1vh + .5min */
}
body { font: 2rem/1.6 sans-serif;
}
h2, h3{ font-size: 3rem;
}
main{ display:flex;
}
.col{ flex: 1; padding: 1rem 2rem;
}

Practice querySelector - Script Codes JS Codes

/**********************
document.getElementById() - Element
document.getElementsByTagName() - Collection [5] - Element
document.getElementsByClassName() - Collection [1]-Element
document.querySelector() - Element
document.querySelectorAll() - Collection [0] - Element
var headers = document.querySelectorAll("h3");
headers.forEach(function(h){ h.textContent = "updated";
}) //not in older browsers
[].forEach.call(headers, function(h){ h.textContent = "updated";
}) //in all browsers
HTMLElement.firstChild (includes textNodes)
HTMLElement.firstElementChild (only Elements)
HTMLElement.nextSibling
HTMLElement.previousSibling
HTMLElement.nextElementSibling
HTMLElement.previousElementSibling
HTMLElement.parentNode
HTMLElement.childNodes
HTMLElement.children
***************/
//fourth paragraph in the second column
//let section = document.getElementsByTagName("section")[0];
//section = document.getElementsByClassName("col")[1];
//section = document.getElementsByClassName("two")[0];
//section = document.querySelector("section.two");
//section = document.querySelector(".two");
//section = document.querySelector("section:nth-child(2)");
let para = document.querySelector(".two p:nth-of-type(4)");
para.style.backgroundColor = "#bada55";
//para = document.getElementsByTagName("section")[0].getElementsByTagName("p")[3];
//let css4 = document.querySelectorAll(":matches(a, #blue, #green, .two, .big)");
//somewhere inside something with the class "two"
//there is a paragraph with the text "Bob"
var tags = document.querySelectorAll(".two > p");
//[].forEach.call(tags, function(p){
tags.forEach(function(p){ if( p.textContent.indexOf("Bob") > -1){ p.textContent = "FOUND BOB"; } //add a click listener to ALL paragraphs p.addEventListener("click", makeItBob);
});
function makeItBob(ev){ let num = Math.floor(Math.random() * 10) + 1; ev.currentTarget.textContent = num + " Hi! I'm Bob!"; ev.currentTarget.removeEventListener("click", makeItBob);
}
Practice querySelector - Script Codes
Practice querySelector - Script Codes
Home Page Home
Developer Mobile Application Design-Development
Username mad-d
Uploaded August 10, 2022
Rating 3
Size 2,512 Kb
Views 40,480
Do you need developer help for Practice querySelector?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mobile Application Design-Development (mad-d) Script Codes
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!