Skip to content

Instantly share code, notes, and snippets.

@Draketheb4dass
Created December 4, 2019 00:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Draketheb4dass/86df236abb04a6b72bcada838535119f to your computer and use it in GitHub Desktop.
Save Draketheb4dass/86df236abb04a6b72bcada838535119f to your computer and use it in GitHub Desktop.
Dom manipulation attribute selector
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Changing attributes</title>
<style>
p .animal {
color: red;
}
a[href*="Dog"] {
color: purple;
}
</style>
</head>
<body>
<h1 id="heading">All about dogs</h1>
<p>The domestic <span class="animal">dog</span> is known as man's best friend. The <span class="animal">dog</span> was the first domesticated animal and has been widely kept as a working, hunting, and pet companion. According to recent coarse estimates, there are currently between 700 million and one billion <span class="animal">dog</span>s, making them the most abundant predators in the world. <a href="http://en.wikipedia.org/wiki/Dog">Read more on Wikipedia</a>.</p>
<img src="https://www.kasandbox.org/programming-images/animals/dog_sleeping-puppy.png" height="150">
<img src="https://www.kasandbox.org/programming-images/animals/dogs_collies.png" height="150">
<script>
var imageEls = document.getElementsByTagName("img");
for (var i = 0; i < imageEls.length; i++) {
imageEls[i].src = "https://www.kasandbox.org/programming-images/animals/cat.png";
}
var linkEls = document.querySelectorAll("a[href*=\"Dog\"]");
for (var i = 0; i < linkEls.length; i++) {
linkEls[i].href = "http://en.wikipedia.org/wiki/Cat";
}
var headingEl = document.querySelector("#heading");
headingEl.innerHTML = "All about cats";
var nameEls = document.querySelectorAll("p .animal");
console.log(nameEls);
// NodeList
console.log(nameEls[0]);
for (var i = 0; i < nameEls.length; i++) {
nameEls[i].innerHTML = "cat";
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment