AKA doing fun stuff with JavaScript in your web browser! DOM manipulation refers to interacting with the webpage you are viewing and changing it using JavaScript. This is finally our chance to start doing some interesting things in JS! Hopefully now that you are all experts on the basics of JS(just kidding, you’ll continue practicing the same basics over spring break) you’ll be able to use that foundational knowledge to do more complex and interesting interactions, while still understanding the code you are writing.
The HTML DOM(Document Object Model)
Everything you can see on a webpage is broken down into a series of elements that your browser understands as the DOM. We can use JavaScript to interact with that model and do things like add elements, remove elements, change text, toggle CSS classes, listen for user input(click, scroll, resize, keypress, etc.) and even fetch dynamic content using something called AJAX(Asynchronous JavaScript and XML).
Create a simple HTML/CSS page for you JavaScript sandbox. Complete each of the following tasks that involve interacting with your webpage via JavaScript.
Please don’t blindly copy code from the internet for this exercise. You can complete this tasks using the simple JavaScript discussed in the demos so far.
Inspiration
Here’s a few examples of work that I’ve done that makes heavy use of JavaScript for fun and memorable interactions.
→ A note about including your JavaScript file! When you link to your external JavaScript file, insert it right before your closing <body> tag. This way, the HTML will already be loaded and you’ll avoid issues where it says the element doesn’t exist.
<html>
<body>
...
<scriptsrc="main.js"></script>
</body>
</html>
1. Click button to append content
When you click the button, use the appendChild() function to add new content into some other div to represent the content area. Your code will look something like this:
// If you use a <button> tag you can query the button directly. Otherwise, you can use a CSS class on the element you click, and querySelector that class.
newItem.innerHTML = '<strong>added dynamically via JavaScript!</strong>';
container.appendChild(newItem);
});
Don’t be afraid to get creative with the styling of these prompts. You can also insert images or other elements with JavaScript, not just divs. To add an image, you’d use the following:
Assignment
Inspiration
<html> <body> ... <script src="main.js"></script> </body></html>1. Click button to append content
// If you use a <button> tag you can query the button directly. Otherwise, you can use a CSS class on the element you click, and querySelector that class.var button = document.querySelector('button');var container = document.querySelector('#container');button.addEventListener('click', function(event) { console.log(event, event.target); var newItem = document.createElement('div'); newItem.classList.add('new-content'); newItem.innerHTML = '<strong>added dynamically via JavaScript!</strong>'; container.appendChild(newItem);});var image = document.createElement('img');image.src = 'images/my-image.jpg';document.body.appendChild(image);2. Set the position of the new element randomly