HTML DOM Elements

JavaScript HTML DOM Elements refer to the individual elements or nodes that make up an HTML document, such as headings, paragraphs, images, forms, and more. These elements are represented as objects in the Document Object Model (DOM), which is a programming interface that provides a structured representation of an HTML document.

With JavaScript and the DOM, you can access, manipulate, and dynamically update these elements to create interactive and dynamic web pages.

innerHTML

The innerHTML property is used to access or modify the HTML content within an element. It allows you to retrieve the HTML content as a string or set new HTML content for the element.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript innerHTML Property</h1>
<p id="wlc">Welcome to WebTutor</p>
<p id="demo"></p>

<script>
    let html = document.getElementById("wlc").innerHTML;
    document.getElementById("demo").innerHTML = html;
</script>

</body>
</html>

Preview

innerText

The innerText property is used to access or modify the text content of an element, excluding any HTML tags or markup. It represents only the visible text within the element, ignoring any styling or structural elements.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript innerText Property</h1>
<h2 id="wlc">Welcome to WebTutor</h2>
<p id="demo"></p>

<script>
    let text = document.getElementById("wlc").innerText;
    document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Preview

style

This property allows you to get or set the style of an element. You can use this property to change the color, font, size, and other visual aspects of an element.

Example

<!DOCTYPE html>
<html>
<body>

<h1 id="demo">JavaScript style Property</h1>

<script>
    document.getElementById("demo").style.color = "red";
</script>

</body>
</html>

Preview

classList

This property returns a collection of the class names for an element. You can use this property to add or remove classes from an element.

Example

<!DOCTYPE html>
<html>
<style>
    .red { color: red; }
</style>
<body>

<h1>JavaScript classList Property</h1>
<button onclick="myFunction()">Add</button>
<div id="msg">
    <p>Learn to code for free</p>
</div>

<script>
    function myFunction() {
        let list = document.getElementById("msg").classList;
        list.add("red");
    }
</script>

</body>
</html>

Preview

getAttribute()

This method returns the value of the specified attribute for an element.

Example

<!DOCTYPE html>
<html>
<body>

<h1 id="getAttr" class="red">JavaScript getAttribute() Method</h1>
<p id="demo"></p>

<script>
    let ele = document.getElementById("getAttr");
    let txt = ele.getAttribute("class");
    document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

Preview

setAttribute()

This method sets the value of the specified attribute for an element.

Example

<!DOCTYPE html>
<html>
<style>
    .red { color: red; }
</style>
<body>

<h1 id="demo">JavaScript setAttribute() Method</h1>
<button onclick="myFunction()">Click Me</button>

<script>
    function myFunction() {
        document.getElementById("demo").setAttribute("class", "red");
    }
</script>

</body>
</html>

Preview

appendChild()

This method adds a new child node to an element.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript appendChild() Method</h1>
<ul id="lang">

</ul>

<script>
    function createLang(name) {
        let li = document.createElement('li');
        li.textContent = name;
        return li;
    }
    let lang = document.querySelector('#lang');

    lang.appendChild(createLang('HTML'));
    lang.appendChild(createLang('CSS'));
    lang.appendChild(createLang('JavaScript'));
</script>

</body>
</html>

Preview

removeChild()

This method removes a child node from an element.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript removeChild() Method</h1>
<ul id="lang">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<script>
    let lang = document.getElementById('lang');
    lang.removeChild(lang.lastElementChild);
</script>

</body>
</html>

Preview

addEventListener()

This method attaches an event listener to an element. When the specified event occurs, the function is executed.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript addEventListener()</h1>
<p id="demo"></p>
<button id="Btn">Click me</button>

<script>
    let ele = document.getElementById("Btn");
    ele.addEventListener("click", function() {
        document.getElementById("demo").innerHTML = "Welcome to Webtutor.dev";
    });
</script>

</body>
</html>

Preview

querySelector()

This method returns the first HTML element that matches the specified selector.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript querySelector()</h1>
<p>This is a p element.</p>

<script>
    document.querySelector("p").style.border = "1px solid red";
</script>

</body>
</html>

Preview

DOM Document

DOM Events

HTML DOM Elements

innerHTML

Example

innerText

Example

style

Example

classList

Example

getAttribute()

Example

setAttribute()

Example

appendChild()

Example

removeChild()

Example

addEventListener()

Example

querySelector()

Example

Links

Tutorials

Connect with us