Document Object Module DOM Get and Set Value Methods tutorial in JavaScript

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM Get Set Value Methods JavaScript</title>
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <div id="wrapper">
        <div id="header" class="abc" style="border:1px solid #ff0000;" onClick="xyz()">
            <h1>Hello World</h1>
        </div>
        <div id="menu">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">About Us</a></li>
                <li><a href="">Gallery</a></li>
                <li><a href="">Contact Us</a></li>
            </ul>
        </div>
        <div id="content">
            <h2>Sub Heading</h2>
            <img src="images/Web_Designing.jpg" width="200px" class="content-image" alt="">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, veniam eius architecto ullam
                cupiditate quam aspernatur quis facilis tempora vel! Aspernatur, consequatur, laborum, explicabo
                consequuntur minima beatae perferendis impedit accusantium ex animi odit quisquam sint pariatur minus
                amet ullam reprehenderit rerum inventore sed officiis voluptas? Dolore, perferendis, minus eum debitis
                vero ipsam tempora voluptate nam ut autem itaque provident consequatur nobis quia libero! Magni,
                molestiae, laborum architecto natus inventore facere quis pariatur quia quos quasi quo dicta dolores.
                Deleniti, facere, fugit sed minus ducimus ut modi voluptatum eaque praesentium saepe aperiam nam quidem
                laboriosam assumenda voluptate vitae inventore et quibusdam!</p>
            <ul class="list">
                <li>Lorem ipsum dolor sit amet.</li>
                <li>sit amet consectetur adipisicing elit.</li>
                <li>architecto maxime quam eligendi,</li>
                <li>quia eius cumque officia,</li>
                <li>ipsam aliquam veniam perferendis vitae</li>
            </ul>
            <p class="list">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, repellat.</p>
        </div>
        <div id="sidebar">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">About Us</a></li>
                <li><a href="">Gallery</a></li>
                <li><a href="">Contact Us</a></li>
            </ul>
        </div>
        <div id="footer">
            helloworld@copyright 2024.
        </div>
    </div>
    <script src="js/dom-main-two.js"></script>
</body>

</html>



Below File is css/main.css File
* {
    box-sizing: border-box;
}

body {
    font: 18px/24px arial;
}

#wrapper {
    border: 1px solid black;
    width: 1000px;
    background: #ffffff;
    margin: 0 auto;
}

#header {
    min-height: 100px;
    font-family: arial;
    border-bottom: 1px solid black;
    background: #ff0000;
}

#header h1 {
    padding: 30px 0 0 20px;
    margin: 0;
    color: #ffffff;
}

#menu {
    border-bottom: 1px solid black;
    background: #9370d8;
}

#menu ul {
    margin: 0;
    padding: 0;
}

#menu li {
    display: inline-block;
}

#menu li a {
    display: block;
    padding: 10px 13px;
    text-decoration: none;
    color: #ffffff;
}

#content {
    width: 795px;
    min-height: 500px;
    padding: 15px;
    float: left;
    box-sizing: border-box;
    position: relative;
}

#content h2 {
    font-family: arial;
}

.content-image {
    float: left;
    margin: 0 15px 10px 0;
}

#sidebar {
    width: 200px;
    min-height: 500px;
    float: right;
    border-left: 1px solid black;
    background: #e0d6f6;
}

#sidebar a {
    text-decoration: none;
    color: black;
}

#footer {
    padding: 5px 10px;
    text-align: right;
    font-size: 14px;
    clear: both;
    border-top: 1px solid black;
    background: #ff0000;
    color: #ffffff;
}

@import "mediatest.css" screen and (max-width: 1020px);

@media screen and (max-width:810px) {
    #wrapper {
        width: 500px;
    }

    #content {
        width: 65%;
    }

    #sidebar {
        width: 34%;
    }
}

@media screen and (max-width:510px) {
    #wrapper {
        width: auto;
    }

    #content {
        width: 100%;
        float: none;
    }

    #sidebar {
        width: 100%;
        float: none;
    }

    #header h1 {
        padding: 30px 0 0 0;
        text-align: center;
    }
}




Below File is js/dom-main-two.js File
var element;
//innerText will give whole text content inside tags without HTML
element = document.getElementById("header").innerText;
element = document.getElementById("content").innerText;
//innerHTML will give whole text content with HTML tags
element = document.getElementById("content").innerHTML;
element = document.getElementById("header").innerHTML;

element = document.getElementById("header").getAttribute("id");
element = document.getElementById("header").getAttribute("class");
element = document.getElementById("header").getAttribute("style");
element = document.getElementById("header").getAttribute("onClick");

element = document.getElementById("header").getAttributeNode("id");
element = document.getElementById("header").getAttributeNode("class");
element = document.getElementById("header").getAttributeNode("style");
element = document.getElementById("header").getAttributeNode("onClick");

element = document.getElementById("header").getAttributeNode("id").value;

element = document.getElementById("header").attributes;
element = document.getElementById("header").attributes[0];
element = document.getElementById("header").attributes[1];
element = document.getElementById("header").attributes[2];
element = document.getElementById("header").attributes[3];

element = document.getElementById("header").attributes[1].value;

element = document.getElementById("header").attributes[1].name;
element = document.getElementById("header").attributes[2].name;
element = document.getElementById("header").attributes[3].name;
console.log(element);

//Set Methods as shown below :
document.getElementById("header").innerHTML = "<h1>Wow</h1>";
element = document.getElementById("header").innerHTML;
console.log(element);

document.getElementById("header").setAttribute("class", "xyz");
document.getElementById("header").setAttribute("style", "border:10px dotted #ffff00");
element = document.getElementById("header").getAttribute("class");
console.log(element);

document.getElementById("header").removeAttribute("style");
console.log(element);

document.getElementById("header").removeAttribute("class");
console.log(element);