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.