Created
December 4, 2019 00:12
-
-
Save Draketheb4dass/86df236abb04a6b72bcada838535119f to your computer and use it in GitHub Desktop.
Dom manipulation attribute selector
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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