JavaScript DOM Manipulation Methods Explained

追加: 2026-05-31

[00:00:00]there are a lot of methods present in browsers document to manipulate the content of the dom but here what i've done is i've created a list of eight methods that we are going to use most of the time those methods include creating element adding element to the dom removing element adding classes and attributes etc we'll go one by one to each of these elements to know them so let's start with the first set of three get attribute set attribute and has attribute so this is the html of the page we'll go ahead select one of the element that is div of class info to select that will use query selector and store that in a variable called div first property is set attribute set attribute is used to add some new attribute to any of the element like in rdiv what if we want to add a new attribute that is id so we can go ahead and say div dot set attribute set attribute takes two parameter the first one is the name of the attribute and the second one is the value of the attribute so here we can see there is only class info but now there is an id with the value of test i have created some css classes like list image border and heading we will be using that for adding some properties say what if i want to add new attribute to h1 class so let's select the element and we can set attribute of class with heading when we do that we can see the style of the page has changed let's go on to the next method that is gate attribute hit attribute help us in getting the value of any attribute i want to see the value of class attribute so i can see the value of class attribute is heading similarly we have div div has to attribute class and id we can go ahead and say div dot get attribute and i want to get class so we'll see we can see info similarly if we do id we'll see test so using the get attribute method we can get the value of any html elements attribute like class or id let's move on to the next method that is has attribute so has attribute is used for testing whether that exists on that element or not i want to see whether class attribute exists on h1 or not and the return is true similarly what if i check does id exist on h1 not at all but let's see so it returns as false it means it doesn't exist so let's move on to the next set of element where we will learn to create new elements and append it to dom so let's learn about the first one called create element what if i want to add a new list here so to do that we'll have to create a li element so we'll go ahead and say document dot create element create element method takes the name of the element that is li and creates that element for us so we can see it has created that element it looks like it is an html but as we have already talked about it like every html in dom is an object so if we go ahead and say type of it will give us object so when we do this we get this element but this element doesn't have any property that will be visible here to add values to li we need to store it somewhere so i'll go ahead and store it in a variable called li now in life we can add properties like inner text and the value is query selector so if we compare from here to here we can see by doing this we are adding some extra information to li similarly we can go ahead and say li dot class name list now if you check li we'll see li has a inner text of query selector and a class of list what if i want to append this right here just after bom to do that we need to select the parent element so for selecting ul we'll do document.query selector ul and store it in a variable ul so now we have ul to append our li that we created here in into our dom we will use a new method called append so we'll say parent that is evil go ahead and append a element that i'm passing so the element i'm passing is li when we press enter we'll see just after bomb you can see new list called query selector and we have a class of list that styles that so not only that say for example we need to add multiple elements so we can go ahead and create multiple elements we'll create li 2 and li 3.

[00:05:08]in li 2 we'll add query selector on as inner text and li3 will add create element and now if we look at li2 and li3 we can see one has query selector all and other has create element we'll push this into dom by using the method append so here append needs the parent element that is ul dot append and here we can pass two element that is li 2 comma li 3 so now i will see we'll see query selector all and create element got added here there is another very similar method called prepend so prepend what it does like append adds in the last but prepend will add in the start so let's just test it we'll say ul dot prepend li2 so if we do that we'll see it got added in the start so here we can see just before the h2 element it got added right here because we said ul prepend the element that i am passing that is li 2 on top prepend adds the element as a first child element and append adds it as the last child element so that is the difference between them let's go ahead and see the next method that is remove so with name we can understand that remove will be used for removing some element say what if i want to remove this element so we'll say document that query selector this is the first li and we'll store it in variable called rm now what we can do is like we can just go ahead and say rm dot remove that's all as soon as you do that you'll see it is gone similarly if we do that again now if we do query selector again it will select the first li now which one is the first li platform is the first line now so if we do this and say dot remove what will happen is that element is gone if we keep doing that it will keep removing the first li element and we can see it is removing the element let's talk about the last method that is class list so what if you want to add class one way to add class to any element was using set attribute there is another way also like we can go ahead and say h1 we have this class if we want to add a new class to it we can just go ahead and say h1 dot class name is equal to heading 2 and what will happen now if we check h1 is like the heading is gone now because we replace that value with heading two so these are some of the limitation when it comes to using class property we'll learn a whole new way of adding classes to any element and that is called class list so we can go ahead and say class list and class list has bunch of methods like add heading what will happen is the heading class will get added let's see the element and here we can see we have heading 2 and heading so it's not like when we are adding a new class it is removing the older one so that is one of the benefit like what if now i want to remove a heading 2 because it's of no use so for that there is another method classlist.remove which class do you want to remove so heading 2 and when we press enter we can see now h1 doesn't include that class now the only class of h1 right now is heading now if we do that again like what if we want to remove heading so we'll say heading and it will remove that class from h1 now it will also remove heading class from h1 there are some situation in which you want to add only if that class doesn't exist and you want to remove if the class exist also known as toggle say right now in h1 there is no class it's just the property of class is there but the value is empty what if i want to add heading so i'll just go ahead and say h1 dot class list dot add heading and it will add the class what if i go ahead and say h1 classlist.toggle and in toggle will pass heading and what we'll see is like if the class exists it will remove but now if we do that again because now class doesn't exist so what it will do it will add so it will remove when it exists it will add when it doesn't exist so we learnt about three methods like toggle add and remove in class list to play around with adding removing and toggling classes on any element these are some of the method that can help us manipulate the dom in much more effective ways