Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

8.2 Manipulating HTML Elements

In this lesson we’ll take a look at the basic APIs for working with HTML elements and their attributes, working with elements that we have previously selected.

Syntax

  • id
  • className
  • classList
  • tagName
  • nodeType
  • innerHTML
  • outerHTML
  • textContent
  • setAttribute
  • removeAttribute
  • hasAttribute

1.Introduction
2 lessons, 07:42

1.1
Introduction
02:12

1.2
Setup
05:30

2.Language Fundamentals
8 lessons, 1:00:53

2.1
Variables
06:33

2.2
Data Types
11:28

2.3
Arithmetic, Assignment, and Comparison Operators
10:24

2.4
Unary, Logical, Comma, and Spread Operators
09:02

2.5
Operator Precedence
03:50

2.6
Reserved Words
04:17

2.7
Strict Mode
04:34

2.8
Functions
10:45

3.Data Structures
5 lessons, 22:52

3.1
Arrays
04:29

3.2
Objects
04:30

3.3
Sets
04:57

3.4
Maps
04:21

3.5
Weak Maps and Weak Sets
04:35

4.Controlling Program Execution
7 lessons, 37:06

4.1
Conditionals
07:49

4.2
Switch Statements
04:41

4.3
The For Loop
06:39

4.4
The `for .. in` Loop
05:17

4.5
The `for .. of` Loop
04:02

4.6
Iterators
05:03

4.7
While Loops
03:35

5.Using JavaScript
13 lessons, 1:44:36

5.1
Working With Strings
09:32

5.2
Template Literals
05:46

5.3
Working With Numbers
06:57

5.4
Working With Arrays
12:53

5.5
Iterating and Transforming Arrays
07:33

5.6
Working With the Object Type
13:55

5.7
Object Literal Extensions
06:45

5.8
Working With Object Instances
06:45

5.9
Getters and Setters
05:00

5.10
Custom Objects
11:28

5.11
The `Math` API
04:54

5.12
Working With Dates and Times
08:10

5.13
The `Array` Constructor
04:58

6.Functions
8 lessons, 56:07

6.1
The `this` Object
06:15

6.2
Working With Functions
10:11

6.3
Scope
07:37

6.4
Arrow Functions
06:59

6.5
Generator Functions
08:13

6.6
Closures
05:00

6.7
Prototypes
06:26

6.8
Default and Rest Parameters
05:26

7.Miscellaneous
6 lessons, 52:39

7.1
Destructuring Assignments
08:09

7.2
AJAX
08:30

7.3
Regular Expressions
10:51

7.4
More About Regular Expressions
08:38

7.5
Classes
06:48

7.6
ES Modules
09:43

8.Working With the DOM
6 lessons, 37:39

8.1
Selecting HTML Elements
05:02

8.2
Manipulating HTML Elements
07:40

8.3
DOM Traversal
05:25

8.4
Adding and Removing Elements
04:45

8.5
Creating Elements and Other Nodes
04:39

8.6
DOM Events
10:08

9.Web APIs
4 lessons, 17:41

9.1
The Selector API
03:03

9.2
Geolocation
05:29

9.3
Web Storage
05:24

9.4
Web Workers
03:45

10.Asynchronous JavaScript
5 lessons, 26:23

10.1
Promises
09:52

10.2
Promise Chaining
05:11

10.3
The async Keyword
03:21

10.4
The await Keyword
04:04

10.5
More About async and await
03:55

11.Conclusion
1 lesson, 00:43

11.1
Conclusion
00:43


8.2 Manipulating HTML Elements

Hi folks, in the last lesson, we took a look at some of the different methods of the document objects that we can use to select elements from the page. Once we've selected an element from the page, we'll generally want to do something with it. We could remove it from the page or change it's text content maybe. In this lesson, let's look at some of the methods we have available for manipulating HTML elements once they've been selected from the page. Elements are represented by objects which have different properties that we can inspect. And different methods we can invoke depending on the type of element that we've selected. Let's take a look at some of the properties that elements have. Elements may have an id property. In the last lesson, we added a heading. Now we used the document.getElementById method to select that heading, but let's ignore that for a second and just see how we can inspect that element’s id once we've selected it. We can just inspect the id property and if the element has an id, this is where we'll find it. We can also change the element id if we wish. And if we look at it in the DOM Explorer, we should see that it has the new heading that we just specified. We can get or set the class attributes of an element in a similar way. But we need to use className rather than just class, because in JavaScript class means a programmatic class rather than a className. Now our heading doesn't have a class. So trying to inspect its className property is useless. As well as a className property, which contains the entire className and if there are multiple classNames which are separated by space. The className would just contain all of them as a single string. There is also the class list property and that allows us a much richer way to work with the classNames of an element. So first of all, let's add some classes to our heading. And we can see that our heading now has two classes, we've just added them, class1 and class2. So now let's look at the class list property. We can also use this to add new classNames, we just need to add them one at a time. So we add new classes using the add method of the class list object. And we can see that the third class has now been added. If we want to remove a class, we use the remove method of the class list object. And we simply specify the name of the class that we'd like to remove. If we want to see whether an element has a particular class, we use the contains method. And we better wrap a console.log around that or we'll see nothing in the console. And we can see that it returns true, it does have that class. If we're unsure about what type of element we're working with, we can use the tagName property to find out. We can see that it's a H1, and one point to note is element names are always upper case when returned by the tagName property. We can also manipulate either the HTML or text content of an element and there are several properties that we can use for this depending on the situation. If we want to replace the HTML content of an element and give it a new DOM structure with new child elements, we can use the innerHTML property. And we can see that our heading element has some new text, and if we inspect it in the Elements panel, we see that it contains the new span elements. There's also an outerHTML property, which includes not just the content of the specified elements, but the element itself. And now we can see that we've entirely replaced our H1 with a H2. These properties can be used to both get or set the content. And you should also note that these properties can be a security risk if the HTML being inserted is being received from an untrusted source. If we only want to change the text content of an element, we can use the text content property instead of innerHTML There are many other properties available with HTML elements, which are used to work with an element size or its position on the page. But let's move on now to look at some of the methods that we can use with elements. Working with an elements attributes can be useful and is a very common scenario. Most of the element methods that we'll use revolve around this. If we want to add a new attribute or update an existing attribute on the elements, we can use the setAttribute method. So this method takes two arguments, the first is the attribute that we like to set and the second is the value that we'd like to give it. In this case, we can see that our heading now has the content editable attribute, and that means we should be able to edit it. It certainly looks like we can. We may want to remove one of the attributes of an element. In this case, we use the removeAttribute method. This method only takes a single argument and that is the attribute that we'd like to remove. Now we can see that the heading no longer has the content editable attribute. So in this lesson, we looked at some of the different properties and methods that we can use when we're working with HTML elements. We saw how we can get or set an element's id or classNames and we saw that we can use either the className property or the classList object to interact with and change an element's classes. We also saw that we can check the type of element that we're working with using the tagName property. And that we can use the innerHTML outerHTML or textContent properties to change and element or an element's contents. Lastly, we looked at some different methods that we can use to get or set attributes. We looked at the setAttribute method in order to add or update an attribute. And we looked at the removeAttribute method that we should use to remove an attribute that we no longer want to be on the element. In the next lesson, we'll look at DOM traversal. Thanks for watching.

Back to the top
View on GitHub