From the course: HTML, CSS, and JavaScript: Building the Web
Unlock the full course today
Join today to access over 24,800 courses taught by industry experts.
Working with the Document Object Model (DOM)
From the course: HTML, CSS, and JavaScript: Building the Web
Working with the Document Object Model (DOM)
- [Instructor] Today, I have a special topic for you. Today, we're going to learn about manipulating the DOM using JavaScript. The DOM or Document Object Model represents the structure of our webpage as a tree of objects. JavaScript allows us to interact with the DOM, making our webpages dynamic and interactive. In this lesson, we'll use JavaScript to select our plant elements by their Id, so we can make them draggable. Recall in our HTML chapter that we gave all of our elements, these Id attributes. Those are going to come into play now. So let's get into it. Here in our script.js file, we'll be using the document.getElementbyId method to select our plant elements. Let's add our line of code and talk about it. What document.getElementbId does is it looks for an element with a matching Id in the parentheses. This method returns the HTML element with the specified Id. Let's repeat this process for plant two. What I've done here is copied line five, pasted it below and updated the plant…