Dom Set and Get Methods in javascript

 <!DOCTYPE html>

<html>

    <head>

        <title>Dom Set and Get Methods</title>

    </head>

    <body>

        <h1 id="heading">Dom Set and Get Methods</h1>

        <input id="first_name" class="abc efg" name="first_name" value="Adnan" placeholder="Enter First Name..." style="border: 3px solid" onclick="xyz()" />

        <script>

            // How to get the attribute of elements

            // innerHTML: To get the inner html of the element

            // innerText: To get the inner text of the element

            var element  = document.head.innerHTML;

            console.log('Taget DOM Element :'+ element);

            var el  = document.getElementById('heading').innerText;

            console.log('Taget DOM Element :'+ el);

            // getAttribute : basicaly it return us the value of attribute

            // attribute could be id,class,placeholder onclick src etc.

            var ele;

            ele = document.getElementById("first_name").getAttribute("class");

            console.log('Target attribute of DOM Element :'+ ele);

            ele = document.getElementById("first_name").getAttribute("id");

            console.log('Target attribute of DOM Element :'+ ele);

            ele = document.getElementById("first_name").getAttribute("style");

            console.log('Target attribute of DOM Element :'+ ele);

            ele = document.getElementById("first_name").getAttribute("placeholder");

            console.log('Target attribute of DOM Element :'+ ele);

            ele = document.getElementById("first_name").getAttribute("onclick");

            console.log('Target attribute of DOM Element :'+ ele);

           

            // getAttributeNode : It will return us property name with its value e.g onclick="xyz"

            console.log('Target attributeNode of DOM Element');

            ele = document.getElementById("first_name").getAttributeNode("style");

            console.log(ele.value);

            console.log(ele.nodeValue);

            // Attributes : It will return all the attributes inside the purticular element in the form of array.

            ele = document.getElementById("first_name").attributes;

            console.log(ele);

            // if i want to get the perticular object value.

            ele = document.getElementById("first_name").attributes[2];

            console.log(ele); // name = "first_name"

            // To get the vlaue of object attribute.

            ele = document.getElementById("first_name").attributes[3].value;

            console.log(ele); // first_name

            // How to set attributes value of elements.

            // we can change

            /*

            1 innerText

            2 innerHTML

            3 setAttribute

            4 Attribute

            5 removeAttribute

            */

            ele = document.getElementById("heading").innerHTML = "<h2> Setting innerHTML value </h2>"

            // set Attribute value

            /*

            i change  class name here

            */

            ele = document.getElementById("first_name").setAttribute('class','newclass');

            ele = document.getElementById("first_name").getAttribute("class");

            console.log(ele);

            // let change the background color of body tag

            ele = document.body.setAttribute('style','background-color:pink');

            // change value using attribute method

            document.getElementById("first_name").attributes[1].value = "fgh";

            ele = document.getElementById("first_name").getAttribute("class");

           

            console.log(ele);

            // removeAttribute

            ele = document.getElementById("first_name").removeAttribute("class");

            console.log(document.body);

        </script>

    </body>

</html>