HTML DOM Document

The JavaScript DOM document is the root node of the HTML or XML document object model. It represents the entire HTML or XML document as an object, which can be manipulated using JavaScript.

The document object provides a number of properties and methods that allow web developers to access and manipulate various aspects of the document, such as the document's title, URL, and various HTML elements.

For example, the document.getElementById() method can be used to retrieve an element in the HTML document by its unique ID, while the document.getElementsByTagName() method can be used to retrieve a collection of elements in the HTML document with a specified tag name.

Other methods and properties of the document object can be used to dynamically create, modify, and delete HTML elements, manipulate the styles and content of elements, and respond to user interactions and events on the page.

getElementById()

This method returns the HTML element with the specified id attribute.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript getElementById()</h1>
<p id="demo"></p>

<script>
    document.getElementById("demo").innerHTML = "Webtutor.dev";
</script>

</body>
</html>

getElementsByTagName()

This method returns a collection of all HTML elements with the specified tag name.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript getElementsByTagName()</h1>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<p id="demo"></p>

<script>
    let lang = document.getElementsByTagName("li");
    document.getElementById("demo").innerHTML = lang[1].innerHTML;
</script>

</body>
</html>

createElement()

This method creates a new HTML element with the specified tag name.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript createElement()</h1>

<script>
    let ele = document.createElement("p");
    ele.innerText = "Create New Element";

    document.body.appendChild(ele);
</script>

</body>
</html>

createTextNode()

The createTextNode() method is used to create a new text node in the HTML DOM. It creates a new text node with the specified text as its content, and returns the newly created text node.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript createTextNode()</h1>

<script>
    let txtNode = document.createTextNode("Welcome to Webtutor.dev");
    document.body.appendChild(txtNode);
</script>

</body>
</html>

write()

The document.write() method is used to write content directly into the HTML document at the time it is being parsed.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript write()</h1>

<script>
    document.write("Hello World!");
</script>

</body>
</html>

addEventListener()

The addEventListener() method is used to attach an event listener to an HTML element. It allows you to specify a function (known as an event handler) that will be executed when a particular event occurs on the element.

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>

removeEventListener()

The removeEventListener() method is a built-in function in JavaScript that is used to remove an event listener that was previously added to an HTML element using the addEventListener() method.

This method is used when you no longer want the event listener to be triggered for that element. This can be useful when you want to prevent memory leaks or if you want to remove event listeners that are no longer needed.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript removeEventListener()</h1>
<button onclick="removeHandler()">Remove</button>
<p id="demo"></p>

<script>
    document.addEventListener("mousemove", myFunction);

    function myFunction() {
        document.getElementById("demo").innerHTML = Math.random();
    }

    function removeHandler() {
        document.removeEventListener("mousemove", myFunction);
    }
</script>

</body>
</html>

open()

The open() method is used to open a new browser window or tab, and the document.write() method is used to write HTML content to the new document.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript open()</h1>
<button onclick="myFunction()">Click me</button>

<script>
    function myFunction() {
        document.open();
        document.write("<h1>Webtutor.dev</h1>");
        document.close();
    }
</script>

</body>
</html>

close()

Once you have finished writing content to the new document, you can use the close() method to close the document and display it in the new window or tab.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript close()</h1>
<button onclick="myFunction()">Click me</button>

<script>
    function myFunction() {
        let myWindow = window.open();
        myWindow.document.open();
        myWindow.document.write("<h1>Welcome to Webtutor.dev</h1>");
        myWindow.document.close();
    }
</script>

</body>
</html>

createAttribute()

The createAttribute() method is used to create a new attribute node with the specified name. This method is part of the Document interface of the DOM (Document Object Model), which represents the HTML or XML document in the browser.

Example

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

<h1>JavaScript createAttribute()</h1>
<button onclick="myFunction()">Click Me</button>

<script>
    function myFunction() {
        let attr = document.createAttribute("class");
        attr.value = "red";
        document.getElementsByTagName("h1")[0].setAttributeNode(attr);
    }
</script>

</body>
</html>

getElementsByClassName()

The getElementsByClassName() method is a built-in function that is used to select and retrieve a list of HTML elements that have a specific class name. It returns a live HTMLCollection object, which is a collection of all the elements in the current document that match the specified class name.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript getElementsByClassName()</h1>
<div class="name">Aida Bugg</div>
<div class="name">Olive Yew</div>

<script>
    let coll = document.getElementsByClassName("name");
    coll[0].innerHTML = "Webtutor.dev";
</script>

</body>
</html>

getElementsByName()

The getElementsByName() method is used to select and retrieve a list of HTML elements that have a specific name attribute. It returns a live NodeList object, which is a collection of all the elements in the current document that match the specified name attribute.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript getElementsByName()</h1>
<input name="name" type="text" value="Peter">
<p id="demo"></p>

<script>
    let ele = document.getElementsByName("name");
    document.getElementById("demo").innerHTML = ele[0].tagName;
</script>

</body>
</html>

querySelector()

The querySelector() method is used to select and retrieve the first element within the current document that matches a specified CSS selector. It returns a reference to the selected element, or null if no matching element is found.

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>

querySelectorAll()

The querySelectorAll() method is used to select and retrieve all elements within the current document that match a specified CSS selector. It returns a NodeList object, which is a collection of all the elements in the current document that match the specified selector.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript querySelectorAll()</h1>
<ul>
    <li class="lang">HTML</li>
    <li>CSS</li>
    <li class="lang">JavaScript</li>
</ul>

<script>
    let list = document.querySelectorAll(".lang");
    for (let i = 0; i < list.length; i++) {
        list[i].style.backgroundColor = "green";
    }
</script>

</body>
</html>

Title

It is a property of the document object that represents the title of the current HTML document.

Example

<!DOCTYPE html>
<html>
<title>My title</title>
<body>

<h1>JavaScript title Property</h1>
<p id="demo"></p>

<script>
    document.getElementById("demo").innerHTML = document.title;
</script>

</body>
</html>

Body

The body property is a property of the document object that represents the <body> element of an HTML document. It provides access to the content within the <body> tags of the document.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript body Property</h1>
<p id="demo"></p>

<script>
    let myBody = document.body.innerHTML;
    document.getElementById("demo").innerHTML = myBody;
</script>

</body>
</html>

Cookie

The document.cookie property is used to read and write cookies associated with the current document.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript cookie Property</h1>
<p id="demo"></p>

<script>
    let Cook = document.cookie;
    document.getElementById("demo").innerHTML = Cook;
</script>

</body>
</html>

URL

The document.URL property returns the entire URL of the current page, including the protocol, domain, port number (if specified), path, and any query parameters. This property can be used to read or change the URL of the current page, which can be useful for various tasks such as redirecting the user to a different page or updating the URL in the address bar.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript URL Property</h1>
<p id="demo"></p>

<script>
    let url = document.URL;
    document.getElementById("demo").innerHTML = url;
</script>

</body>
</html>

DOM Methods

DOM Elements