JavaScript DOM - Basics to give you wings

Comments:

Likes:

Best Division @bestdivision

Published On - 25 Sep 2023 Last Updated - 25 Sep 2023

JavaScript DOM - Basics to give you wings

console.log(document.domain);
console.log(document.URL);
console.log(document.title);
console.log(document.head);
console.log(document.body);
console.log(document.all);
console.log(document.all[5]);
console.log(document.forms);
console.log(document.forms[10]);
console.log(document.links);
console.log(document.images);

//Changing
document.title = 'Changed Title';

var newForm = '<form></form>';
document.forms[0] = newForms;

document.getElementById()

document.getElementsByClassName()

document.getElementsByTagName()

document.document.querySelector()

document.querySelectorAll()

Selecting ParentNodes

var item = document.querySelector('#items');
var parent = item.parentNode;
parent.style.fontSize = "40px";

var grandParent = item.parentNode.parentNode;
//or
var grandParent = parent.parentNode;

Selecting ChildNodes (not a good idea to use) instead use **children**

var item = document.querySelector('#items');
var child = item.childNodes;

Note:- We don't use ChildNodes because it prints all the breaks and spaces we insert in our HTML document about which we don't care.

Selecting Children

var item = document.querySelector('#items');
var children = item.children;
child1 = children[0];
child2 = childrent[1];
child2.style.backgroundColor = 'red';

//In one line
document.querySelector('#items').children[0].style.backgroundColor = 'red';

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It provides a tree-like structure for the content of a document, which can be manipulated using JavaScript.

In JavaScript, the DOM is represented as a hierarchy of objects, with each object representing an element in the document. For example, an **h1** element would be represented as a **Node** object, with properties and methods for manipulating its content and attributes.

Here's a simple example of how to use the DOM in JavaScript:

<!DOCTYPE html>
<html>
<head>
  <title>DOM Example</title>
</head>
<body>
  <h1 id="myHeading">Hello World</h1>
  <button id="myButton">Click Me</button>
  <script>
    // Get a reference to the h1 element
    var heading = document.getElementById("myHeading");

    // Get a reference to the button element
    var button = document.getElementById("myButton");

    // Add a click event listener to the button
    button.addEventListener("click", function() {
      // Change the text of the h1 element
      heading.innerHTML = "Hello DOM";
    });
  </script>
</body>
</html>

In this example, we use the **document.getElementById()** method to get a reference to the **h1** and **button** elements in the document. Then, we add a click event listener to the button using the **addEventListener()** method, which changes the text of the **h1** element when the button is clicked.

Here are some other common tasks that can be performed using the DOM in JavaScript:

Getting an element:

var element = document.getElementById("myId");

Modifying the content of an element:

element.innerHTML = "New content";

Modifying the attributes of an element:

element.setAttribute("attributeName", "attributeValue");

Adding or removing classes:

element.classList.add("newClass");
element.classList.remove("oldClass");

Adding, removing, or modifying styles:

element.style.backgroundColor = "red";
element.style.margin = "0px";

This is just a brief overview of what can be done with the DOM in JavaScript. There's much more to the DOM, and I encourage you to read the official documentation for more information.

Nodes and Elements: In the DOM, each element in a document is represented as a node. There are several different types of nodes, including Element nodes, Text nodes, Comment nodes, and Document nodes, among others. When working with the DOM in JavaScript, you'll often be dealing with Element nodes, which represent elements in the document such as **div**, **p**, **h1**, etc.

Traversing the DOM Tree: The DOM is structured as a tree, with elements being parent or child nodes to other elements. You can traverse the DOM tree to find elements and their relationships. For example, you can use the **parentNode** property to get the parent of a node, or the **children** property to get the children of a node.

Querying the DOM: There are several methods for querying the DOM in JavaScript, including **getElementById()**, **getElementsByTagName()**, and **querySelector()**, among others. These methods allow you to find elements in the document based on their id, tag name, class name, or other criteria.

Creating and Deleting Elements: In addition to manipulating existing elements in the DOM, you can also create new elements and delete existing ones. You can create a new element using the **document.createElement()** method, and add it to the document using the **appendChild()** or **insertBefore()** methods. You can delete an element using the **removeChild()** method.

Event Listeners: One of the key features of the DOM is the ability to attach event listeners to elements, which allow you to respond to events such as clicks, mouse movements, and form submissions. For example, you can use the **addEventListener()** method to attach a click event listener to a button, and perform some action when the button is clicked.

These are just some of the basics of the DOM in JavaScript. There is a lot more to learn, and I encourage you to explore the official documentation and experiment with your own code to gain a deeper understanding of the DOM.

Similar Blogs

0 Comments

@abcd 1 days ago

Aquí los que apoyamos a Los del limit desde sus inicios..

dislike

sdfsdf