1 / 12

Mastering DOM Navigation and Manipulation

Learn to navigate and manipulate the DOM like a pro! Find nodes, change elements, add new content, and create interactive experiences. Dive into practical examples and step-by-step guides. Start enhancing your web development skills today!

hymank
Download Presentation

Mastering DOM Navigation and Manipulation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 6: Working with the DOM

  2. So Far, We have been talking about How to find nodes on the page.

  3. Methods that we can Use to Find elements/Objects on the page All of these start with document.

  4. Methods that we can Use to navigate through the dom var e = document.getElementById(“hello”);. • e.firstChild • e.firstElementChild • e.nextSibling • This includes a space. • e.nextElementSibling • I’ll demonstrate this through the practice coming up. firstChild parent

  5. So, For example 1, if I want to get the information from this boxwhat would I need to type in the script? Pull Up the page through chrome, and using the console/webpage, lets see if you can get the information to show up.

  6. My Solution

  7. For example 2: I want to change Ryan’s card to a different personHow to go about that? (Just in the script) From: to:

  8. The Steps would be First Child • Query for the parent element • Navigate to the firstChild, • change the nodeValue or the inner HTML. OR 1. query for the element on the page. 2. query for the inner elements that you are wanting to change. 3. Using the array of elements, call the property of the element you want to change.

  9. So now that we can get elements found on the page, now let’s add to the elements! • The steps are: • Create a variable to hold a placeholder for the new element to be added to. Through get element by id or etc. • var placeholder = document.querySelector(“holder”); • Create a new element, and pass in the name of the element you wish to create. • var newElement = document.createElement(“elementName”); • Set the attribute to the element that you created (IE class or ID, or both) • newElement.setAttribute(“class”,”nameOfClass”); • newElement.setAttribute(“id”,”nameOfId”);

  10. Steps Continued. • Add any inner HTML, or text through the innerHTML element. • newElement.innerHTML = “text here”; • Append the element onto the other elements on the page. • placeholder.appendChild(newElement); • If you need to nest elements inside of each other, then append to the new element that you are creating.

  11. Now, Onto the 3rd Example • We want to add a new person to our address book. When we click “add” • We want to create a new card, with the information typed into the boxes. • Add the Properties filled in information in the right spot, with the attached classes to the fields. • And clear the text boxes after adding a person into the address book.

  12. Lab For Today • Shopping List: • You will have the structure of the page • AddItem(), takes the information in the text Boxes, and pushes the information onto the table • updateCost(): Update the boxes for Sub Total, Sales Tax, and Amount Due. • ClearAll(): Resets the shopping list to being empty, and updating the values back to default. • More details are in canvas.

More Related