DOM Manipulation with TypeScript

سرفصل های دوره

Modern JavaScript frameworks like Angular, React, or Vue.js use DOM manipulation to change the loaded HTML document. This course will teach you how to use DOM manipulation with TypeScript to select, create, and remove HTML elements in a web page.

1. Course Overview

1. Course Overview

2. Understanding DOM Manipulation

1. Introduction

2. What Is DOM Manipulation

3. What You Will Learn in This Course

4. Set up Your Environment

5. Explore and Run the Project

6. Manipulate the DOM

7. Summary

3. Exploring the DOM Data Types

1. Introduction

2. Know the Document Interface

3. Understand the Node Interface

4. Walk the DOM Tree

5. Use the TreeWalker Interface

6. Work with HTML Elements

7. Know How TypeScript Maps Elements

8. Use ChildNodes and Children

9. Summary

4. Selecting Elements

1. Introduction

2. Grab an Element by Its Id

3. Get Elements by Tag Name

4. Get Elements by Class Name

5. Grab an Element by a CSS Selector

6. Get Multiple Elements by a CSS Selector

7. Query from a Child Element

8. Summary

5. Creating and Removing Elements

1. Introduction

2. Grab the Elements

3. Add an Event Listener

4. Create and Append an Element

5. Build a Hierarchy of Elements

6. Remove an Element

7. Refactor the Code

8. Grab the Parent Element

9. Add a Keyup Event Listener

10. Use Prepend Instead of Append

11. Summary

6. Manipulating Elements

1. Introduction

2. Use TextContent and InnerText

3. Work with InnerHTML

4. Swap Content with InnerHTML

5. Build Components

6. Use the Components

7. Summary

7. Working with Styles

1. Introduction

2. Set Inline Styles

3. Refactor the Code

4. Set a CSS Class via SetAttribute

5. Set a CSS Class via ClassName

6. The Problem with These Approaches

7. Set a CSS Class via ClassList

8. Toggle a CSS Class via ClassList

9. Summary

45,900 تومان

خرید اشتراک افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: PluralSight