Article Categories

Selected Reading

How do I console.log JavaScript variables as it relates to DOM?

Javascript Web Development Front End Technology Object Oriented Programming

To display variables on console when working with the DOM, you can use console.log() to output element objects, their properties, or values. The document.getElementById() method retrieves DOM elements which can then be logged to examine their properties.

Logging DOM Elements

When you log a DOM element directly, the browser console displays the element object with all its properties:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Console Log DOM Example</title>
</head>
<body>
    <input type="text" id="printTheData" value="My Name is David">
    <p id="textElement">Hello World</p>
    <div id="container">Sample content</div>

    <script>
        // Log the entire element object
        const inputElement = document.getElementById("printTheData");
        console.log("Element object:", inputElement);
        
        // Log specific properties
        console.log("Element value:", inputElement.value);
        console.log("Element ID:", inputElement.id);
        console.log("Element type:", inputElement.type);
    </script>
</body>
</html>

Logging Different Element Properties

You can extract and log various properties of DOM elements:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Properties Example</title>
</head>
<body>
    <input type="text" id="userInput" value="Sample text">
    <p id="paragraph">This is a paragraph</p>
    
    <script>
        const input = document.getElementById("userInput");
        const para = document.getElementById("paragraph");
        
        // Log input properties
        console.log("Input value:", input.value);
        console.log("Input placeholder:", input.placeholder || "No placeholder");
        
        // Log paragraph properties
        console.log("Paragraph text:", para.textContent);
        console.log("Paragraph HTML:", para.innerHTML);
        console.log("Element tag name:", para.tagName);
    </script>
</body>
</html>

Logging Multiple Variables

You can log multiple DOM-related variables in a single console statement:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Variables Example</title>
</head>
<body>
    <input type="text" id="firstName" value="John">
    <input type="text" id="lastName" value="Doe">
    
    <script>
        const first = document.getElementById("firstName").value;
        const last = document.getElementById("lastName").value;
        const fullName = first + " " + last;
        
        // Log multiple variables
        console.log("First Name:", first, "Last Name:", last);
        console.log("Full Name:", fullName);
        
        // Log as an object for better organization
        console.log({
            firstName: first,
            lastName: last,
            fullName: fullName
        });
    </script>
</body>
</html>

Common Use Cases

Purpose	Code Example	Output Type
Log element object	`console.log(element)`	DOM Element object
Log element value	`console.log(element.value)`	String value
Log element text	`console.log(element.textContent)`	Text content
Debug multiple values	`console.log(var1, var2, var3)`	Multiple values

Conclusion

Using console.log() with DOM elements helps debug your JavaScript by displaying element objects, their properties, and values. This approach is essential for understanding how your DOM manipulations affect the page elements.

AmitDiwan

Updated on: 2026-03-15T23:19:00+05:30

164 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next