![\"JavaScript](\"https:\/\/www.dynamicwebtraining.com.au\/blog\/wp-content\/uploads\/2019\/12\/Top-10-Essential-JavaScript-DOM-methods-Feature-1024x536.jpg\")
<\/figure>\n\n\n\n\n\n\n\n
<\/p>\n\n\n\n
Whatever is the reason, these DOM methods are basic and yet essential. You may have to use these methods throughout their careers. Mainly there are just ten important ones as follows:<\/p>\n\n\n\n
\n\n\n\n
JavaScript DOM methods<\/h2>\n\n\n\n1. getElementId<\/h3>\n\n\n\n
getElementId is a method to access any element virtually. It accesses the first element with the specified ID.<\/p>\n\n\n\n
Syntax:<\/strong><\/p>\n\n\n\n It can also be used dynamically as follows:<\/p>\n\n\n\n This method places object which needs to be accessed in a variable called \u201cmyVariable\u201d. myVariable allows your program to access object directly.<\/p>\n\n\n\n Suppose you need to find an id \u201cSY\u201d, you just need to use the above syntax & replace \u201cmy_element\u201d with \u201cSY\u201d. Secondly, you can also apply few additional codes on getElementById as follows:<\/p>\n\n\n\n Here the above code will display in block font with a Hex-red background & blue border. So using myVariable code you can add font & color. A lot of people face trouble using getElementId usually because of silly mistakes. <\/p>\n\n\n\n Consider the following example:<\/p>\n\n\n\n Here it might look correct, but remember, \u201cJavaScript is a case sensitive language.\u201d So \u201cID\u201d won\u2019t work in place of \u201cId.\u201d<\/p>\n\n\n\n Usually, beginners commit this mistake & find methods to be complicated. Meanwhile, code might look a bit messed up because you need to apply an id in your HTML. So this method is robust but may look messy as it encourages you to mess up your markup.<\/p>\n\n\n\n In the previous method, we may have some errors. But this method can eradicate those issues. getElementByTagName allows you to search all the elements with a specified tag name on your page. <\/p>\n\n\n\n Here myVariable is substituted by \u201cmyLinkCollection\u201d. myLinkCollection holds all the elements on the page. Pictorially it is like an array holding elements. Here also you can add few additional features. Following is an example:<\/p>\n\n\n\n The above code isn\u2019t complicated if you know the basics & use of methods. Here, when you collect the link into an array i.e., myLinkCollection, we use for loop to navigate.<\/p>\n\n\n\n Next, if the loop sets a condition if class_Name equal to \u201cstd_class\u201d, there\u2019s a trigger attached to it using \u201conclick.\u201d The trigger is \u201cBackground color.\u201d<\/p>\n\n\n\n If we can use link in getElementById why should we use getElementByTagName? Well, using id allows you to access only one element. Because it can have \u201cid\u201d but not \u201cids.\u201d So for each element, you need to use multiple getId elements. Meanwhile, ByTagName allows you to have multiple links with the same class name. We can set onclick triggers in a precise manner.<\/p>\n\n\n\n Any element on a page including text & whitespaces of a DOM structure is known as \u201cNODE.\u201d Nodes can be between XHTML Tags.<\/p>\n\n\n\n Nodes available in DOM:<\/p>\n\n\n\n Suppose we have following XHTML:<\/p>\n\n\n\n Now if we want to access \u201cProd1\u201d we can do so using 2 ways:<\/p>\n\n\n\n Using ChildNodes:<\/p>\n\n\n\n Using firstChild:<\/p>\n\n\n\n Both codes will display the same results because the same element is accessed. Different browsers may give different outputs.<\/p>\n\n\n\n For example, Firefox\u2019s output would be different than Chrome because it views whitespaces as nodes. Nodes can be interpreted differently. So be selective & carefully while using & test nodes.<\/p>\n\n\n\n As the name goes, it is used to create an element & place it anywhere in the DOM structure. Let\u2019s add an element to the previous example:<\/p>\n\n\n\n Here a new element will be created & added in the DOM structure.<\/p>\n\n\n\n Previously we created element, now we will add two elements to our list of links using appendChild.<\/p>\n\n\n\n Above the code adds anchor tag inside of o remove the effect of appendChild, we can use removeChild. Here, we need to remove the list item because it includes both \u201clist item & newly created anchor.\u201d And, if we didn\u2019t create a new element, it might remove the last list item.<\/p>\n\n\n\n It doesn\u2019t matter whether it was created recently or it existed. Following is a code to remove Child method:<\/p>\n\n\n\n With the getAttribute method, you can access the value of any attribute of an element on a page. Suppose there\u2019s an id with abc attribute having value \u201cBest.\u201d <\/p>\n\n\n\n Now, if we want to retrieve that attribute, we will use getAttribute. <\/p>\n\n\n\n Following is an example:<\/p>\n\n\n\n Now getAttribute will retrieve the value from \u201cabc,\u201d i.e., \u201cBest.\u201d This method is used to target links with specific attributes & values. <\/p>\n\n\n\n A useful method to replace values in the attribute. Assigning a new value to an existing attribute is done using setAttribute. Suppose we have an attribute \u201cabc\u201d containing value \u201cBest.\u201d <\/p>\n\n\n\n Now we want to change the value to \u201cAwesome.\u201d Following is a suitable code:<\/p>\n\n\n\n Here, the value inside the abc attribute has been replaced. This method cannot change attributes; it can only make changes in values of an attribute.<\/p>\n\n\n\n This method is used to access \u201cform\u201d collections of the DOM structure. Usually, every website uses a \u201cdocument.form\u201d syntax. We might have used getElementById or TagName, but for accessing form, this method is the best.<\/p>\n\n\n\n Example:<\/p>\n\n\n\n Let\u2019s find out the \u201cChecked\u201d state:<\/p>\n\n\n\n Here, the result would be \u201cTrue.\u201d But if the same check is done on option2 or 3, we will get \u201cFalse.\u201d<\/p>\n\n\n\n The last & final method is innerHTML, an interesting one. It\u2019s supported on mostly every browser or platform. However, it\u2019s a nonstandard element. <\/p>\n\n\n\n Typically, it is used to access & write content inside XHTML elements. Following is a code to make you understand better.<\/p>\n\n\n\n Now, the element on the page with id name \u201cabc\u201d will have the following content between its tags i.e., \u201cThese are the essential DOM methods in JavaScript.\u201d Using innerHTML, we can read or append text directly without messy texts. <\/p>\n\n\n\n These were Top 10 essential JS DOM methods a programmer should know. I have tried to cover a maximum of them with examples & simple explanation. And, the examples were pretty simple & easy to comprehend.<\/p>\n\n\n\n Whether you are a beginner or intermediate coder, these methods are powerful & useful. Even though there are libraries & platforms which do the needful behind the scenes, you should know these methods. <\/p>\n","protected":false},"excerpt":{"rendered":" As a programmer, whether you are working on a project or building a script from scratch, there are few DOM methods every programmer should know. However, tools like MooTools or jQuery might perform these methods without any user interference (behind the scenes). <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1621],"tags":[],"class_list":["post-1427","post","type-post","status-publish","format-standard","hentry","category-programming"],"yoast_head":"var myVariable = document.getElementById(\u201cmy_squad\u201d);<\/code><\/pre>\n\n\n\n
\n\n\n\nvar myVariable = document.getElementById(mySquad);<\/code><\/pre>\n\n\n\n
\n\n\n\n
\n\n\n\nvar myVariable = document.getElementById(\u201cSY\u201d);\nmyVariable.style.display = \u201cblock\u201d;\nmyVariable.style.backgroundColor = \u201c#f00\u201d;\nmyVariable.style.border = \u201csolid 1 px #00f\u201d;<\/code><\/pre>\n\n\n\n
\n\n\n\n
\n\n\n\nmyVariable = document.getElementByID(\u201cmy_squad\u201d);<\/code><\/pre>\n\n\n\n
\n\n\n\n
\n\n\n\n2. getElementsByTagName:<\/h3>\n\n\n\n
\n\n\n\nvar myLinkcollection = document.getElementsByTagName(\u201cabc\u201d);<\/code><\/pre>\n\n\n\n
\n\n\n\n
\n\n\n\nvar myLinkCollection = document.getElementsByTagName(\u201cabc\u201d);\nfor (i = 0; i < myLinkCollection.length; i++) {\n if (myLinkCollection[i].className == \u201cstd_class\u201d) {\n myLinkCollection[i].onclick = function() {\n this.style.backgroundColor = \u201c#f00\u201d;\n }\n }\n}<\/code><\/pre>\n\n\n\n
\n\n\n\n
\n\n\n\n3. Node:<\/h3>\n\n\n\n
\n
\n\n\n\n<ul id-\u201clist\u201d>\n <li><a href=\u201dprod1.html\u201d class=\u201dlist_one\u201d> Product Number One<\/a><\/li>\n <li><a href=\u201dprod2.html\u201d> Product Number Two<\/a><\/li>\u00a0\n <li><a href=\u201dprod3.html\u201d> Product Number Three<\/a><\/li>\n <li><a href=\u201dprod4.html\u201d> Product Number Four<\/a><\/li>\n<\/ul><\/code><\/pre>\n\n\n\n
\n\n\n\n
\n\n\n\nvar myLinkList = document.getElementsById(\u201clist\u201d)\nvar myFirstProduct = myLinklist.childNodes[0].childNodes[0];\nalert(myFirstLink.className);<\/code><\/pre>\n\n\n\nvar myLinkList = document.getElementsById(\u201clist\u201d)\nvar myFirstProduct = myLinklist.firstChild.firstChild;\nalert(myFirstLink.className);<\/code><\/pre>\n\n\n\n
\n\n\n\n
\n\n\n\n4. createElement:<\/h3>\n\n\n\n
var myNewListItem = document.createElement(\u201cli\u201d)\nvar myNewProd = document.createElement(\u201cprod5\u201d);<\/code><\/pre>\n\n\n\n
\n\n\n\n
\n\n\n\n5. appendChild:<\/h3>\n\n\n\n
\n\n\n\nvar myNewListItem = document.createElement(\u201cli\u201d)\nvar myNewProd = document.createElement(\u201cprod5\u201d);\nvar myLinkList = document.getElementById(\u201cList\u201d)\nmyLinkList.appendChild(myNewListItem);\nmyLinkList.LastChild.appendChild(myNewProd);<\/code><\/pre>\n\n\n\n
\n\n\n\n
element at the endpoint. If we can create or append, then we can remove it too.<\/p>\n\n\n\n
\n\n\n\n6. removeChild:<\/h3>\n\n\n\n
\n\n\n\nvar myLinkList = document.getElementById(\u201clist\u201d)\nvar myRemovedLink = myLinkList.lastChild;\nmyLinkList.removeChild(myRemoveLink);<\/code><\/pre>\n\n\n\n
\n\n\n\n7. getAttribute:<\/h3>\n\n\n\n
\n\n\n\nvar myLinkFive = document.getElementById(\u201cProd_5\u201d);\nvar myLinkAttribute = myLinkFive.getAttribute(\u201cabc\u201d);<\/code><\/pre>\n\n\n\n
\n\n\n\n
\n\n\n\n8. setAttribute:<\/h3>\n\n\n\n
\n\n\n\nVar myLinkFive = document.getElementById(\u201cProd_5);\nmyLinkFive.setAttribute(\u201cabc\u201d, \u201dAwesome\u201d);<\/code><\/pre>\n\n\n\n
\n\n\n\n
\n\n\n\n9. document.forms:<\/h3>\n\n\n\n
\n\n\n\n<form id=\u201dmy_form\u201d method=\u201dpost\u201d action=\u201dabc.html\u201d>\n <input type=\u201dcheckbox\u201d value=\u201done\u201d name=\u201doptions\u201d id=\u201doption1\u201d checked=\u201dchecked\u201d \/>One <\/br>\n <input type=\u201dcheckbox\u201d value=\u201dtwo\u201d name=\u201doptions\u201d id=\u201doption2\u201d \/> Two <\/br>\n <input type=\u201dcheckbox\u201d value=\u201dthree\u201d name=\u201doptions\u201d id=\u201doption3\u201d \/> Three <\/br>\n<\/form><\/code><\/pre>\n\n\n\n
\n\n\n\nvar myCheckBoxOne = document.forms[\u201cmy_form\u201d][\u201coption1\u201d];\nalert(myCheckBoxOne.checked);<\/code><\/pre>\n\n\n\n
\n\n\n\n
\n\n\n\n10. innerHTML:<\/h3>\n\n\n\n
\n\n\n\nVar myContentHolder = document.getElementById(\u201cabc\u201d);\nmyContentHolder.innerHTML = \u201c<p> These are the most essential DOM methods in JavaScript<\/p>\u201d;<\/code><\/pre>\n\n\n\n
\n\n\n\n
\n\n\n\nConclusion:<\/h3>\n\n\n\n