JavaScript Document Methods Tutorial

Before we begin let's start with a basic HTML Template.

Create a JavaScript file and include it in the HTML file. For example: method.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic HTML Template</title>
</head>
<body>

    <h1>What is JavaScript</h1>
    <p>JavaScript is a programming language.</p>
    <div class="content">
        <h2 id="article-heading">JavaScript Advantages</h2>
        <ul class="lists">
            <li>Speed</li>
            <li>Ease of Use</li>
            <li>Rich Ecosystem</li>
            <li>Versatility</li>
        </ul>
    </div> 
    

<script src="./methods.js"></script>
</body>
</html>

createElement()

Creates a new element with the given tag name.

// Create a new <div> element.
const newDiv = document.createElement('div');

// Add some text content to the element.
newDiv.textContent = 'This is a new div element.';

// Append the element to the body of the document.
document.body.appendChild(newDiv);

It creates a new HTML <div> element using the document.createElement('div') method and assigns it to the variable newDiv.

It sets the text content of the newly created <div> element to 'This is a new div element.' using newDiv.textContent.

Finally, it appends the newly created <div> element to the body of the HTML document using document.body.appendChild(newDiv).

createTextNode()

Creates a new text node with the given text content.

// Create a new text node with the text "Hello, world!".
const helloWorldTextNode = document.createTextNode('Hello, world!');

// Append the text node to the body of the document.
document.body.appendChild(helloWorldTextNode);

It creates a new text node containing the text "Hello, world!" using the document.createTextNode('Hello, world!') method and assigns it to the variable helloWorldTextNode.

It appends the created text node to the body of the HTML document using document.body.appendChild(helloWorldTextNode).

getElementById()

Returns the element with the given ID.

// Get the element with the ID "article-heading".
const articleHeadingElement = document.getElementById('article-heading');
console.log(articleHeadingElement)

// Change the text content of the element.
articleHeadingElement.textContent = 'New heading text';

It grabs the element on the page with the ID "article-heading" using document.getElementById('article-heading') and stores it in the variable articleHeadingElement.

It shows the articleHeadingElement in the console.

It changes the displayed text of that element to 'New heading text'.

getElementsByClassName()

Returns a list of all elements in the document with the given class name.

// Get a list of all elements in the document with the class name "lists".
const listElements = document.getElementsByClassName('lists');
console.log(listElements);

// Loop through the list of elements and change the text content of each element.
for (const listElement of listElements) {
    listElement.textContent = 'New list item text';
}

It retrieves a collection of all elements in the document with the class name "lists" using document.getElementsByClassName('lists') and stores it in the variable listElements.

It logs the listElements to the console.

It goes through each element in the collection using a loop and updates the displayed text of each element to 'New list item text' with listElement.textContent = 'New list item text'.

getElementsByName()

Returns a list of all elements in the document with the given name.

// Get a list of all elements in the document with the name "name".
const nameElements = document.getElementsByName('name');

// Loop through the list of elements and change the text content of each element.
for (const nameElement of nameElements) {
    nameElement.textContent = 'New name text';
}

It gathers a collection of all elements in the document with the name attribute set to "name" using document.getElementsByName('name') and stores it in the variable nameElements.

It iterates through each element in the collection using a loop and updates the displayed text of each element to 'New name text' with nameElement.textContent = 'New name text'.

querySelector()

Returns the first element in the document that matches the given CSS selector.

// Get the first element in the document that matches the CSS selector `.content`.
const contentElement = document.querySelector('.content');

// Change the background color of the element.
contentElement.style.backgroundColor = 'red';

It fetches the initial element in the document that corresponds to the CSS selector .content using document.querySelector('.content') and assigns it to the variable contentElement.

It modifies the background color of the selected element to 'red' by using contentElement.style.backgroundColor = 'red'.

querySelectorAll()

Returns a list of all elements in the document that match the given

// Get a list of all elements in the document that match the CSS selector `ul.lists > li`.
const listItemElements = document.querySelectorAll('ul.lists > li');

// Loop through the list of elements and change the text color of each element.
for (const listItemElement of listItemElements) {
    listItemElement.style.color = 'blue';
}

It retrieves a collection of all elements in the document that match the CSS selector ul.lists > li using document.querySelectorAll('ul.lists > li') and stores it in the variable listItemElements.

It iterates through each element in the collection using a loop and modifies the text color of each element to 'blue' with listItemElement.style.color = 'blue'.

Previous Next