# Week 9 Tuesday: Element Selection and Manipulation --- ## Tuesday Morning Boost --- ## Element Selection and Manipulation --- ### Element Selection and Manipulation Objectives * Compare and contrast NodeList and HTMLCollection * Write a JavaScript statement that selects one or more elements by their attributes or tags * Write JavaScript to add/remove attributes to an HTML element(s) --- * Write JavaScript to get the children elements of a given parent element * Write JavaScript to create/remove an HTML element(s) from the DOM * Append a child HTML element to a parent HTML element using JavaScript --- * Use a string to construct HTML elements with .innerHTML * Compare and contrast .innerHTML and .innerText methods on an HTML element * Write JavaScript to add/remove CSS inline-styling to an HTML element(s) * Manipulate DOM elements using the response of a fetch request --- ### Element Selection and Manipulation Demo --- ### Tasks - Exercise: NodeList vs HTMLCollection (15 minutes) --- ### Tasks - Practice: Element Selection (20 minutes) --- ### Add/Remove Attributes [add/](https://https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute)[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute) ### Inline-Styling with JS [style](https://https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference) --- ### Tasks - Practice: Create/Remove Elements (30 minutes) --- ### Tasks - Element Manipulation Quiz (10 minutes) --- ### Tasks - Element Manipulation Long Practice (2:30 hrs) - Catsagram Day 1 (1:30 hrs)