JavaScript HTML Objects

Working with HTML element objects and their properties

🧩 HTML Element Objects

In JavaScript, every HTML element is an object with properties and methods. You can access and modify these properties to control how elements behave and appear. 


// HTML elements are objects with properties
let element = document.getElementById("myElement");
console.log(element.tagName);    // Shows tag name
console.log(element.innerHTML);  // Shows content

Common Element Properties

📝

innerHTML

HTML content inside element 

element.innerHTML = "<b>Bold text</b>";
🔤

innerText

Plain text content only 

element.innerText = "Plain text";
🏷️

className

CSS class names 

element.className = "highlight active";
🎨

style

CSS styling properties 

element.style.color = "red";

🔹 innerHTML vs innerText

Understanding the difference between HTML and text content: 

<p id="demo1">Original content</p>
<p id="demo2">Original content</p>
<button onclick="changeHTML()">Change with innerHTML</button>
<button onclick="changeText()">Change with innerText</button>

<script>
function changeHTML() {
    document.getElementById("demo1").innerHTML = "<strong>Bold HTML</strong>";
}

function changeText() {
    document.getElementById("demo2").innerText = "<strong>Plain Text</strong>";
}
</script>

Try it:

Original content

Original content

🔹 Working with Attributes

Access and modify HTML attributes: 

<img id="myImage" src="image1.jpg" alt="Image 1">
<button onclick="changeAttributes()">Change Attributes</button>

<script>
function changeAttributes() {
    let img = document.getElementById("myImage");
    
    // Get attribute
    console.log(img.getAttribute("src"));
    
    // Set attribute
    img.setAttribute("src", "image2.jpg");
    img.setAttribute("alt", "Image 2");
    
    // Direct property access
    img.title = "This is image 2";
}
</script>

Try it:

Image 1

🔹 CSS Class Manipulation

Add, remove, and toggle CSS classes: 

<p id="textDemo" class="normal">This text can change style</p>
<button onclick="addClass()">Add Class</button>
<button onclick="removeClass()">Remove Class</button>
<button onclick="toggleClass()">Toggle Class</button>

<style>
.normal { color: black; }
.highlight { color: red; font-weight: bold; }
</style>

<script>
function addClass() {
    document.getElementById("textDemo").classList.add("highlight");
}

function removeClass() {
    document.getElementById("textDemo").classList.remove("highlight");
}

function toggleClass() {
    document.getElementById("textDemo").classList.toggle("highlight");
}
</script>

Try it:

This text can change style

🔹 Element Dimensions and Position

Get information about element size and position: 

<div id="box" style="width: 200px; height: 100px; background: lightblue; margin: 20px;">
    Sample Box
</div>
<button onclick="getElementInfo()">Get Element Info</button>
<p id="info"></p>

<script>
function getElementInfo() {
    let box = document.getElementById("box");
    let info = "Width: " + box.offsetWidth + "px<br>";
    info += "Height: " + box.offsetHeight + "px<br>";
    info += "Top position: " + box.offsetTop + "px<br>";
    info += "Left position: " + box.offsetLeft + "px";
    
    document.getElementById("info").innerHTML = info;
}
</script>

Try it:

Sample Box

🔹 Form Element Objects

Form elements have special properties: 

<form id="myForm">
    <input type="text" id="nameField" value="John Doe">
    <input type="checkbox" id="subscribeBox" checked>
    <select id="countrySelect">
        <option value="us">United States</option>
        <option value="uk" selected>United Kingdom</option>
    </select>
</form>
<button onclick="getFormInfo()">Get Form Info</button>

<script>
function getFormInfo() {
    let name = document.getElementById("nameField").value;
    let subscribed = document.getElementById("subscribeBox").checked;
    let country = document.getElementById("countrySelect").value;
    
    alert("Name: " + name + "\nSubscribed: " + subscribed + "\nCountry: " + country);
}
</script>

🔹 Creating New Elements

Create HTML elements dynamically: 

<div id="container"></div>
<button onclick="createElement()">Create Element</button>

<script>
function createElement() {
    // Create new paragraph
    let newParagraph = document.createElement("p");
    newParagraph.innerHTML = "This paragraph was created with JavaScript!";
    newParagraph.style.color = "blue";
    newParagraph.className = "dynamic-content";
    
    // Add to container
    document.getElementById("container").appendChild(newParagraph);
}
</script>

Try it:

🧠 Test Your Knowledge

What's the difference between innerHTML and innerText?