Created
March 5, 2020 05:33
-
-
Save colabottles/982a176d7d9a22fc901773463a3d2fed to your computer and use it in GitHub Desktop.
Getting an element in the DOM // source https://jsbin.com/wazesod
This file contains hidden or 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"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>Getting an element in the DOM</title> | |
| <style id="jsbin-css"> | |
| div{ | |
| background: green; | |
| color: white; | |
| margin-bottom: 1rem; | |
| padding: 1rem; | |
| } | |
| .red{ | |
| background: red; | |
| color: black; | |
| text-transform: uppercase; | |
| } | |
| div[data-snack="cashews"]{ | |
| background: purple; | |
| } | |
| .blue{ | |
| background: blue; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div>Look at my div!</div> | |
| <div class="red">Just look at it!</div> | |
| <div data-snack="cashews">Look at all the divs!</div> | |
| <div class="blue">Aren't they great?!</div> | |
| <script id="jsbin-javascript"> | |
| var el = document.querySelector('div'); | |
| var elRed = document.querySelector('.red'); | |
| var elCashews = document.querySelector('[data-snack="cashews"]'); | |
| var elNone = document.querySelector('.blue'); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">div{ | |
| background: green; | |
| color: white; | |
| margin-bottom: 1rem; | |
| padding: 1rem; | |
| } | |
| .red{ | |
| background: red; | |
| color: black; | |
| text-transform: uppercase; | |
| } | |
| div[data-snack="cashews"]{ | |
| background: purple; | |
| } | |
| .blue{ | |
| background: blue; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">var el = document.querySelector('div'); | |
| var elRed = document.querySelector('.red'); | |
| var elCashews = document.querySelector('[data-snack="cashews"]'); | |
| var elNone = document.querySelector('.blue');</script></body> | |
| </html> |
This file contains hidden or 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
| div{ | |
| background: green; | |
| color: white; | |
| margin-bottom: 1rem; | |
| padding: 1rem; | |
| } | |
| .red{ | |
| background: red; | |
| color: black; | |
| text-transform: uppercase; | |
| } | |
| div[data-snack="cashews"]{ | |
| background: purple; | |
| } | |
| .blue{ | |
| background: blue; | |
| } |
This file contains hidden or 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
| var el = document.querySelector('div'); | |
| var elRed = document.querySelector('.red'); | |
| var elCashews = document.querySelector('[data-snack="cashews"]'); | |
| var elNone = document.querySelector('.blue'); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment