List of JavaScript DOM (Document Object Model) Methods

By Harshit Kumar | 2023-11-14

10 min read ◦ javascript

JavaScript Array Image

Welcome to the world of JavaScript DOM (Document Object Model) methods, powerful tools that empower you to interact with and manipulate web documents.

In this article, we will explore a comprehensive list of DOM methods that enable you to access, modify, and change the content and structure of web pages. Whether you're a web developer, aspiring to become one, or simply curious about how the web works behind the scenes, this guide will give you the knowledge and skills to navigate the DOM and enhance your web development knowledge.

DOM Manipulation

01. getElementById()

The getElementById() method in JavaScript is a fundamental DOM (Document Object Model) method used to retrieve a reference to an HTML element on a web page based on its unique ID attribute. It's one of the simplest and most commonly used DOM methods, and it plays a crucial role in web development.

Finding an Element by ID

const element = document.getElementById("elementID");

Explanation:

document: This refers to the document object, which represents the entire web page.
getElementById("elementID"): This method is called on the document object. It takes a single argument, which is a string that specifies the ID of the HTML element you want to retrieve.
element: The result of getElementById() is a reference to the HTML element with the specified ID. You can use the element variable to access and manipulate the selected element.

Changing the Content of an Element

//html file

<!DOCTYPE html>
<html>
  <body>
    <p id="demo">This is some text.</p>
  </body>
</html>

// javascript file
const element = document.getElementById("demo");
element.innerHTML = "This text is changed.";

In this example, we have an HTML paragraph (<p>) element with the ID demo. We use getElementById("demo") to select the element, and then we change its content using the innerHTML property.

Things To Remember

The ID attribute of an HTML element should be unique within a web page. This uniqueness ensures that getElementById() reliably selects the desired element.
If there is no element with the specified ID, getElementById() returns null. So, it's a good practice to check if the result is not null before further manipulation.
We can use getElementById() to access a wide range of HTML elements, including headings, buttons, forms, and more. It's a versatile method for interacting with web content dynamically.

02. getElementsByClassName()

The getElementsByClassName() method in JavaScript is a DOM (Document Object Model) method used to retrieve a collection of HTML elements that have a specified class name. This method is helpful when you want to work with multiple elements that share the same class.

Finding Elements by Class Name

const elements = document.getElementsByClassName("className");

Explanation

getElementsByClassName("className"): This method is called on the document object. It takes one argument, which is a string representing the class name you want to search for.

Changing the Style of Elements with the Same Class

// html file

<!DOCTYPE html>
<html>
  <head>
    <style>
      .highlight {
        color: red;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <p class="highlight">This is an important message.</p>
    <p>This is a regular message.</p>
    <p class="highlight">Another important message.</p>
  </body>
</html>

//javascript file

const elements = document.getElementsByClassName("highlight");
for (let i = 0; i < elements.length; i++) {
  elements[i].style.backgroundColor = "yellow";
}

In this example, we have two <p> elements with the class highlight. We use getElementsByClassName("highlight") to select these elements. Then, we loop through the collection and change their backgroundColor to yellow.

Things To Remember

getElementsByClassName() returns a live HTMLCollection, which means any changes made to the selected elements will be reflected in the collection, and vice versa.
We can use other properties and methods to interact with the selected elements. For example, We can access their textContent, innerHTML, or add event listeners to them.
If no elements have the specified class, the result is an empty collection. Be sure to check the collection's length to avoid errors.
The same class can be applied to multiple elements on a web page, making getElementsByClassName() useful for working with groups of elements that share a common styling or behavior.

03. getElementsByTagName()

The getElementsByTagName() method in JavaScript is a fundamental DOM (Document Object Model) method used to retrieve a collection of HTML elements based on their tag names. It allows you to select and manipulate all elements with a specific tag name on a web page.

Finding Elements by Tag Name

const elements = document.getElementsByTagName("tagName");

Explanation

getElementsByTagName("tagName"): This method is called on the document object. It takes one argument, which is a string representing the tag name you want to search for.

Changing the Style of All Paragraphs

// html file

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p>This is a blue paragraph.</p>
    <p>This is another blue paragraph.</p>
    <p>This is a third blue paragraph.</p>
  </body>
</html>

// javascript file

const paragraphs = document.getElementsByTagName("p");

for (let i = 0; i < paragraphs.length; i++) {
  paragraphs[i].style.fontWeight = "bold";
}

In this example, we have three <p> elements. We use getElementsByTagName("p") to select all the paragraphs and then loop through the collection to change their fontWeight property to "bold".

Things To Remember

getElementsByTagName() returns a live HTMLCollection, which means any changes made to the selected elements will be reflected in the collection, and vice versa.
We can use other properties and methods to interact with the selected elements. For example, We can access their textContent, innerHTML, or add event listeners to them.
This method is particularly useful when we want to apply a consistent style or behavior to a group of elements with the same tag name.
Keep in mind that some tag names, like "body" or "head," are unique within a document, so using getElementsByTagName() for these tags might return a single-element collection or cause unexpected behavior.

04. querySelector()

The querySelector() method in JavaScript is a powerful DOM (Document Object Model) method used to select and retrieve a reference to the first HTML element that matches a specified CSS selector. It allows us to find and manipulate elements based on a wide range of criteria, such as class, ID, or element type.

Finding the First Matching Element

const element = document.querySelector("selector");

Explanation

querySelector("selector"): This method is called on the document object. It takes one argument, which is a string representing a CSS selector that specifies the criteria for the element We want to select.

Changing the Style of the First Paragraph with a Class

// html file

<!DOCTYPE html>
<html>
  <head>
    <style>
      .highlight {
        color: red;
      }
    </style>
  </head>
  <body>
    <p class="highlight">This is a red paragraph.</p>
    <p>This is a regular paragraph.</p>
  </body>
</html>

// javascript file
const element = document.querySelector(".highlight");

element.style.fontWeight = "bold";

In this example, we have two <p> elements. We use querySelector(".highlight") to select the first paragraph with the class "highlight", and then we change its fontWeight to "bold."

Things To Remember

querySelector() returns a reference to the first element that matches the selector. If no elements match the selector, the result is null.
The CSS selector you provide can be as specific or general as needed. You can use classes, IDs, element types, attribute values, and more to precisely target elements on a web page.
querySelector() is versatile and can be used for a wide range of tasks, including finding elements for styling, content manipulation, or event handling.
While querySelector() returns only the first matching element, there's a related method, querySelectorAll(), that returns a collection of all matching elements.

05. querySelectorAll()

The querySelectorAll() method in JavaScript is a versatile DOM (Document Object Model) method used to select and retrieve a collection of HTML elements that match a specified CSS selector. It allows us to find and manipulate multiple elements based on a wide range of criteria, such as class, ID, or element type.

Finding All Matching Elements

const elements = document.querySelectorAll("selector");

Explanation

querySelectorAll("selector"): This method is called on the document object. It takes one argument, which is a string representing a CSS selector that specifies the criteria for the elements you want to select.

Changing the Style of All Paragraphs with a Class

// html file

<!DOCTYPE html>
<html>
  <head>
    <style>
      .highlight {
        color: red;
      }
    </style>
  </head>
  <body>
    <p class="highlight">This is a red paragraph.</p>
    <p class="highlight">This is another red paragraph.</p>
    <p>This is a regular paragraph.</p>
  </body>
</html>

// javascript file
const elements = document.querySelectorAll(".highlight");

elements.forEach((element) => {
  element.style.fontWeight = "bold";
});

In this example, we have three <p> elements. We use querySelectorAll(".highlight") to select all paragraphs with the class "highlight", and then we loop through the collection to change their fontWeight to "bold."

Things To Remember

querySelectorAll() returns a non-live NodeList, which means that changes made to the selected elements do not affect the NodeList, and vice versa.
We can use other properties and methods to interact with the selected elements. For example, you can access their textContent, innerHTML, or add event listeners to them.
The CSS selector We provide can be as specific or general as needed, allowing you to target elements precisely.
While querySelectorAll() is useful for selecting multiple elements, querySelector() is related and returns only the first matching element.

06. createElement()

The createElement() method in JavaScript is a DOM (Document Object Model) method used to create a new HTML element. This method is essential when we want to dynamically generate and insert elements into a web page.

Creating a New HTML Element

const element = document.createElement("tagName");

Explanation

createElement("tagName"): This method is called on the document object. It takes one argument, which is a string representing the HTML tag name of the element you want to create.

Creating a New Paragraph Element

const paragraph = document.createElement("p");

paragraph.textContent = "This is a dynamically created paragraph.";

In this example, we create a new <p> element using createElement("p") and assign it to the paragraph variable. We then set the textContent property of the paragraph to specify its content.

Things To Remember

createElement() creates a new element but does not insert it into the DOM. We need to use other DOM manipulation methods, such as appendChild() or insertBefore(), to place the element into the document.
We can set attributes for the newly created element using methods like setAttribute(). For example, to set the id attribute, we can use element.setAttribute("id", "myId").
The created element is initially empty, but we can modify its content using properties like textContent, innerHTML, or other DOM manipulation methods.
createElement() is commonly used for building dynamic web content, such as generating new elements in response to user interactions or when creating complex user interfaces.

07. appendChild()

The appendChild() method in JavaScript is a fundamental DOM (Document Object Model) method used to add an HTML element to the end of another element as its child. This method is crucial for dynamically constructing the structure of a web page and arranging elements within it.

Adding an Element as a Child

parentElement.appendChild(childElement);

Explanation

parentElement: This is a reference to the HTML element to which we want to add a child element. It can be an existing HTML element in the document.
appendChild(childElement): This method is called on the parentElement. It takes one argument, which is a reference to the HTML element you want to append as a child.

Adding a Paragraph to a Div

const parentDiv = document.getElementById("container");

const newParagraph = document.createElement("p");

newParagraph.textContent = "This paragraph is a child of the div.";

parentDiv.appendChild(newParagraph);

In this example, we first select an existing <div> element with the ID "container" using getElementById(). Then, we create a new <p> element and set its content. Finally, we use appendChild() to add the paragraph as a child of the <div>.

Things To Remember

appendChild() is used to add a child element to the end of the parent element's list of children. If the parent already has child elements, the new child will be placed after the last existing child.
The appended child becomes part of the DOM, and any changes made to the child or the parent element will be reflected in the document.
We can use this method to construct complex web page structures, add new content based on user interactions, or organize content dynamically.
We can use appendChild() to add various types of elements as children, including text nodes, other HTML elements, or even elements We've created using createElement().

08. removeChild()

The removeChild() method in JavaScript is a DOM (Document Object Model) method used to remove a specified child element from its parent. This method is crucial for dynamic web page manipulation, allowing you to remove unwanted elements or reorganize the structure of a web page.

Removing a Child Element

parentElement.removeChild(childElement);

Explanation

parentElement: This is a reference to the HTML element that contains the child element you want to remove. It can be an existing HTML element in the document.
removeChild(childElement): This method is called on the parentElement. It takes one argument, which is a reference to the HTML element you want to remove.

Removing a Paragraph from a Div

const parentDiv = document.getElementById("container");

const paragraphToRemove = document.getElementById("myParagraph");

parentDiv.removeChild(paragraphToRemove);

In this example, we first select an existing <div> element with the ID "container" using getElementById(). Then, we select a specific paragraph with the ID "myParagraph". Finally, we use removeChild() to remove the selected paragraph from the <div>.

Things To Remember

removeChild() is used to remove a specific child element from its parent, effectively detaching it from the DOM. This method is a powerful way to manage the content of a web page dynamically.
The removed child element remains a valid DOM object and can be reinserted into the document using other methods like appendChild() or insertBefore().
We should ensure that the child element being removed is indeed a child of the specified parent. Attempting to remove a child from a parent it doesn't belong to will result in an error.
This method is commonly used in interactive web applications where elements need to be added or removed based on user actions or other dynamic events.

09. setAttribute()

The setAttribute() method in JavaScript is a DOM (Document Object Model) method used to set the value of an attribute on an HTML element. It allows us to dynamically add, modify, or remove attributes from elements in a web page.

Setting or Modifying an Attribute

element.setAttribute(attributeName, attributeValue);

Explanation

element: This is a reference to the HTML element on which you want to set or modify an attribute. It can be an existing HTML element in the document.
setAttribute(attributeName, attributeValue): This method is called on the element. It takes two arguments: - attributeName: A string representing the name of the attribute you want to set or modify. - attributeValue: A string representing the value you want to assign to the attribute.

Setting the src Attribute of an Image

const imageElement = document.getElementById("myImage");

imageElement.setAttribute("src", "new-image.jpg");

In this example, we first select an existing <img> element with the ID "myImage" using getElementById(). Then, we use setAttribute() to change the src attribute of the image to "new-image.jpg."

** Things To Remember**

setAttribute() is a versatile method that can be used to set or modify various attributes on HTML elements, such as id, class, href, src, alt, and many others.
We can also use setAttribute() to create new attributes if they don't already exist on the element. This allows us to add custom data attributes, which can be useful for storing extra information on an element.
If the specified attribute already exists on the element, setAttribute() will modify its value. If the attribute doesn't exist, it will be created.
To remove an attribute from an element, you can use removeAttribute(attributeName).
Dynamic attribute manipulation is a common practice in web development, especially when building interactive web applications or updating elements based on user interactions.

10. removeAttribute()

The removeAttribute() method in JavaScript is a DOM (Document Object Model) method used to remove a specified attribute from an HTML element. This method is essential for dynamically modifying the attributes of elements in a web page by removing unwanted attributes.

Removing an Attribute

element.removeAttribute(attributeName);

Explanation

element: This is a reference to the HTML element from which you want to remove an attribute. It can be an existing HTML element in the document.
removeAttribute(attributeName): This method is called on the element. It takes one argument attributeName.

Removing the alt Attribute from an Image

const imageElement = document.getElementById("myImage");

imageElement.removeAttribute("alt");

In this example, we first select an existing <img> element with the ID "myImage" using getElementById(). Then, we use removeAttribute() to remove the alt attribute from the image.

Things to Remember

removeAttribute() is used to remove a specified attribute from an element, effectively eliminating it from the element's HTML representation in the DOM.
This method is particularly useful when you need to change the behavior or presentation of an element by altering its attributes, such as toggling the visibility of an image's alt text or modifying links.
Ensure that the attribute you're attempting to remove exists on the element. If the attribute doesn't exist, the method has no effect.
The removed attribute can always be added back to the element later using the setAttribute() method.

11. innerHTML

The innerHTML property in JavaScript is used to access or set the HTML content within an element. It provides a way to manipulate the content of an HTML element, including both its text and nested HTML elements.

Accessing and Setting Inner HTML

// Accessing the innerHTML

const element = document.getElementById("myElement");
const htmlContent = element.innerHTML;

This code selects an HTML element with the ID "myElement" using getElementById() and retrieves the HTML content within that element. The htmlContent variable will hold the inner HTML as a string.

// Setting the innerHTML

const element = document.getElementById("myElement");
element.innerHTML = "<p>This is a new paragraph.</p>";

In this code, the inner HTML of the element is replaced with a new HTML content, which includes a <p> element. The element's previous content, if any, is completely replaced.

Explanation

innerHTML gives a way to access and manipulate the content of an HTML element, including text and nested elements.
When used to get the content, it returns a string representing the HTML content of the element, which includes any nested elements, text, and formatting.
When used to set the content, it replaces the existing content of the element with the specified HTML string.

Things To Remember

Using innerHTML to set HTML content can be powerful but should be used with caution, especially when dealing with user-generated data. It can expose our web application to cross-site scripting (XSS) vulnerabilities if not properly sanitized.
Modifying the innerHTML of an element can result in the re-rendering of the entire element and its descendants. This can be less efficient than other methods for making specific changes to an element's content.

Event Handling

01. addEventListener()

The addEventListener() method in JavaScript is used to attach an event handler function to an HTML element. This function is executed when a specific event, such as a click, mouseover, or keypress, occurs on the element. addEventListener() is a fundamental tool for creating interactive and responsive web applications.

Attaching an Event Listener

element.addEventListener(eventType, eventHandler);

Explanation

element: This is a reference to the HTML element to which you want to attach an event listener. It can be an existing HTML element in the document.
addEventListener(eventType, eventHandler): This method is called on the element. It takes two arguments:
- eventType: A string representing the type of event you want to listen for (e.g., "click," "mouseover," "keydown," etc.).
- eventHandler: A reference to the function that will be executed when the specified event occurs on the element.

Adding a Click Event Listener

const button = document.getElementById("myButton");

function handleClick() {
  alert("Button clicked!");
}

button.addEventListener("click", handleClick);

In this example, we first select an existing button element with the ID "myButton" using getElementById(). We then define a function named handleClick that displays an alert when the button is clicked. Finally, we use addEventListener() to attach the click event listener, specifying "click" as the event type and handleClick as the event handler.

Things To Remember

The event type passed to addEventListener() should be a string that corresponds to a specific event type, such as "click," "mouseover," "keydown," or any other valid DOM event.
The event handler is a JavaScript function that defines the behavior to execute when the event occurs. It can be an existing function or an anonymous function defined inline.
Multiple event listeners can be attached to the same element, allowing us to respond to various events.
We can remove an event listener using the removeEventListener() method, passing the same event type and event handler function.
Event listeners are commonly used to respond to user interactions, manage form submissions, create animations, or trigger other actions in response to events.

02. removeEventListener()

The removeEventListener() method in JavaScript is used to remove an event listener that was previously attached to an HTML element using the addEventListener() method. This is crucial for managing and controlling event handlers in a web page, especially when you want to stop responding to specific events.

Removing an Event Listener

element.removeEventListener(eventType, eventHandler);

Explanation The removeEventListener() explanation is also same as addEventListener() method.

Removing a Click Event Listener

const button = document.getElementById("myButton");

function handleClick() {
  alert("Button clicked!");
}

button.addEventListener("click", handleClick);

// Later in the code or in response to some condition:
button.removeEventListener("click", handleClick);

In this example, we first select an existing button element with the ID "myButton" using getElementById(). We attach a click event listener using addEventListener() with the event type "click" and the handleClick function. Later in the code, we remove the event listener using removeEventListener() with the same event type and the same event handler function.

03. event.stopPropagation()

The event.stopPropagation() method in JavaScript is used to prevent the propagation of an event through the DOM (Document Object Model). When an event occurs on an element, it typically "bubbles up" through the hierarchy of ancestor elements, triggering any event listeners attached to those elements. stopPropagation() allows us to halt this propagation, preventing further execution of event handlers on parent elements.

Stopping Event Propagation

event.stopPropagation();

Using `stopPropagation()`

const parentElement = document.getElementById("parent");
const childElement = document.getElementById("child");

function parentClickHandler(event) {
  alert("Parent element clicked");
}

function childClickHandler(event) {
  alert("Child element clicked");
  event.stopPropagation(); // Prevents the click event from propagating further
}

parentElement.addEventListener("click", parentClickHandler);
childElement.addEventListener("click", childClickHandler);

In this example, we have a parent and a child element. When the child element is clicked, it triggers the childClickHandler, which displays an alert message. The key point is that event.stopPropagation() is called within the childClickHandler, preventing the event from propagating further to the parent element. As a result, the "Parent element clicked" alert will not be displayed.

Things To Remember

Event propagation is categorized into two phases: capturing phase and bubbling phase. By default, events bubble up from the target element to the document root, triggering any event listeners along the way.
stopPropagation() only prevents the event from propagating further during the current phase (e.g., during the bubbling phase). It does not affect the capture phase or future events of the same type on the element.
stopPropagation() can be useful when we want to stop an event from affecting elements higher up in the DOM hierarchy, for example, to prevent a button click from accidentally triggering a form submission.
Be careful when using stopPropagation() because it can lead to unexpected behavior if not used appropriately. In some cases, it might be more appropriate to cancel the event altogether using event.preventDefault().

04. event.preventDefault()

The event.preventDefault() method in JavaScript is used to prevent the default behavior of an event from occurring. When an event occurs on an HTML element, it may have a default action associated with it. preventDefault() allows us to stop that default action, ensuring that your own custom behavior is executed instead.

Preventing the Default Behavior

event.preventDefault();

Above event is a reference to the event object representing the event that we want to prevent the default behavior of. It is typically provided as a parameter to an event listener function.

Using preventDefault()

const linkElement = document.getElementById("myLink");

function clickHandler(event) {
  event.preventDefault(); // Prevents the default behavior of the click event
  alert("Link clicked, but the default behavior is prevented");
}

linkElement.addEventListener("click", clickHandler);

In this example, we have an anchor (<a>) element with the ID "myLink." When the link is clicked, it triggers the clickHandler function. Inside the handler, event.preventDefault() is called, which stops the default behavior of navigating to a new page when clicking a link. Instead, it displays an alert.

Things To Remember

Different events have different default behaviors. For example, clicking on a link navigates to a new page, submitting a form sends data to the server, and pressing the "Enter" key in a form field submits the form.
preventDefault() is often used to implement custom behaviors that should replace or enhance the default behavior, such as client-side form validation or interactive components.
Be cautious when using preventDefault(), as it can alter the expected behavior of web elements. It should be used thoughtfully to provide a better user experience, not to disrupt it.
It's important to remember that preventDefault() only stops the default behavior associated with the event. It does not stop the event from propagating through the DOM. If you want to prevent both the default behavior and further event propagation, we can use event.stopPropagation() in combination with preventDefault().

05. event.target

In JavaScript, event.target is a property of the event object that represents the DOM element on which the event was originally triggered. This property allows us to access the specific element that initiated the event. Understanding event.target is essential for various event-driven programming tasks, such as handling user interactions, form submissions, or element-specific actions.

Accessing the Event Target Element

element.addEventListener("eventType", function (event) {
  const targetElement = event.target;
  // Now we can work with targetElement
});

Using `event.target`

const buttonElement = document.getElementById("myButton");

buttonElement.addEventListener("click", function (event) {
  const targetElement = event.target;
  targetElement.style.backgroundColor = "red";
  console.log("Clicked element's tag name: " + targetElement.tagName);

  // please try it yourself also
});

In this example, we select a button element with the ID "myButton" and attach a click event listener to it. When the button is clicked, the event handler function is called, and event.target refers to the button element. We change the button's background color and log its tag name to the console.

Things To Remember

event.target is particularly useful when we have multiple elements with the same event listener, and we need to determine which specific element triggered the event. It helps identify the context of the event.
This property allows you to access and manipulate the properties, attributes, or content of the element that triggered the event. For example, you can change the style, update text, or access custom data attributes.
When working with forms, event.target is often used to access form elements and their values to perform client-side form validation or data submission.
Keep in mind that, depending on the event type and the specific event object, event.target may refer to different types of DOM elements, including the actual element where the event originated and its descendants (e.g., when dealing with nested elements).

Traversing and Selecting Elements

01. parentNode

In JavaScript, the parentNode property is a property of DOM (Document Object Model) nodes and represents the immediate parent node of a given DOM node. It allows us to navigate and manipulate the structure of the DOM by accessing an element's direct parent. Understanding the parentNode property is essential for traversing and modifying the hierarchy of DOM elements.

Accessing the Parent Node

const childNode = document.getElementById("childElement");

const parentNode = childNode.parentNode;

Explanation

childNode: This is a reference to the DOM node for which we want to access the parent node. It could be an element, text node, comment, etc.
childNode.parentNode: This property is accessed on the childNode, and it returns the immediate parent node of the childNode.

Using `parentNode`

html file

<div id="parentElement">
  <p id="childElement">This is a child paragraph.</p>
</div>

javascript code

const childNode = document.getElementById("childElement");

const parentNode = childNode.parentNode;

console.log(parentNode.id); // "parentElement"

In this example, we have a parent <div> element containing a child <p> element. We use getElementById() to select the child <p> element with the ID "childElement." Then, we access its parent node using parentNode, which refers to the parent <div> element. We log the parent element's ID to the console.

Things to remember

The parentNode property is useful for traversing and manipulating the DOM structure. We can access and modify properties, attributes, or even replace the parent node with a different node.
Keep in mind that not all nodes have a parent node. For example, the root of the document (usually <html>) does not have a parent, and attempting to access parentNode on such a node will return null.
For more specific traversal needs, we can also consider other DOM navigation properties like childNodes, nextSibling, and previousSibling.
In modern JavaScript, we can use methods like closest() and parentElement to traverse the DOM in a more convenient and less error-prone way. These methods handle edge cases more gracefully than manual traversal.

02. childNodes

In JavaScript, the childNodes property is a property of DOM (Document Object Model) nodes, which represents a collection of all child nodes that are direct descendants of a given DOM node. These child nodes include elements, text nodes, comments, and other node types contained within the parent node.

Accessing Child Nodes

const parentElement = document.getElementById("parentElement");

const childNodes = parentElement.childNodes;

Using `childNodes`

html file

<div id="parentElement">
  <p>This is a child paragraph.</p>
  <div>Another child element.</div>
  Some text node.
</div>

// javascript code

const parentElement = document.getElementById("parentElement");

const childNodes = parentElement.childNodes;

for (let i = 0; i < childNodes.length; i++) {
  console.log(childNodes[i].nodeName);
}

// try it yourself also

In this example, we have a parent <div> element with various child nodes, including a child <p> element, a child <div> element, and a text node. We use getElementById() to select the parent <div> element. We then access its child nodes using childNodes and loop through the collection to log the node names to the console.

Things to remember

The childNodes property returns a collection (NodeList) that includes all types of child nodes within the parent element. This includes elements, text nodes, comments, and more.
It's important to note that whitespace between elements, such as line breaks and spaces, is also considered text nodes. These text nodes can affect the length and content of the childNodes collection.
In modern JavaScript, children and firstElementChild properties provide more convenient access to only the element child nodes, excluding text nodes and comments.

03. nextSibling

In JavaScript, the nextSibling property is used to access the next sibling node of a given DOM (Document Object Model) node. A sibling node is a node that shares the same parent node and is at the same level within the DOM hierarchy. The nextSibling property allows us to traverse the DOM tree, moving from one sibling to the next, and access information about those nodes.

Accessing the Next Sibling Node

const currentNode = document.getElementById("currentNode");

const nextSibling = currentNode.nextSibling;

Using `nextSibling`

html file

<div id="parentElement">
  <p>First paragraph.</p>
  <div>Second paragraph.</div>
  <span>Third paragraph.</span>
</div>

javascript code

const secondParagraph = document.getElementById("parentElement").children[1];

const nextSibling = secondParagraph.nextSibling;

console.log(nextSibling.nodeName); // "DIV"

In this example, we have a parent <div> element containing several child elements. We use getElementById() to select the second child element (a <div> element), and we access its next sibling node using nextSibling. The next sibling is a <span> element, which we log to the console.

Things to remember

The nextSibling property is often used for traversal in the DOM tree when we need to move from one sibling node to the next. It allows us to navigate the structure of the DOM.
Keep in mind that nextSibling returns the next sibling node regardless of its type (element, text node, comment, etc.). We may want to check the nodeType property of the sibling node to determine its type and take appropriate action.
When working with text nodes, be aware that they can include whitespace characters (e.g., spaces and line breaks), and these characters are considered text nodes. If you're only interested in element nodes, consider using nextElementSibling for more focused navigation.

04. previousSibling

In JavaScript, the previousSibling property is used to access the previous sibling node of a given DOM (Document Object Model) node. A sibling node is a node that shares the same parent node and is at the same level within the DOM hierarchy.

Accessing the Previous Sibling Node

const currentNode = document.getElementById("currentNode");

const previousSibling = currentNode.previousSibling;

Using `previousSibling`

html file

<div id="parentElement">
  <p>First paragraph.</p>
  <div>Second paragraph.</div>
  <span>Third paragraph.</span>
</div>

javascript file

const secondParagraph = document.getElementById("parentElement").children[1];
const previousSibling = secondParagraph.previousSibling;

console.log(previousSibling.nodeName); // "P"

In this example, we have a parent <div> element containing several child elements. We use getElementById() to select the second child element (a <div> element), and we access its previous sibling node using previousSibling. The previous sibling is a <p> element, which we log to the console.

Style and CSS

01. style

In Javascript, the style property is a JavaScript object that allows us to manipulate the inline CSS (Cascading Style Sheets) of HTML elements. It provides a programmatic way to access and modify the style and appearance of elements on a web page. The style property is a fundamental tool for dynamically updating the visual aspects of web content.

Accessing and Modifying Element Styles

const element = document.getElementById("myElement");

element.style.propertyName = "value";

Explanation

element: This is a reference to the HTML element for which we want to access or modify the inline styles. It is typically obtained through methods like getElementById(), querySelector(), or other DOM manipulation techniques.
element.style: This property provides access to the inline styles of the element. It is an object that contains style properties as its keys (e.g., element.style.color, element.style.fontSize).
propertyName: This represents the name of the CSS property we want to modify. For example, color, fontSize, backgroundColor, etc.
value: This is the value we want to set for the specified CSS property. It can be a color, size, margin, padding, or any other valid CSS value.

Using the `style` Property

<div id="myElement">This is a styled element.</div>

const element = document.getElementById("myElement");

element.style.color = "blue";

element.style.fontSize = "18px";

element.style.backgroundColor = "lightgray";

In this example, we have a <div> element with the ID "myElement." We use getElementById() to select the element, and we access its style property to modify its inline styles. We change the text color, font size, and background color of the element.

Things to remember

The style property is limited to modifying inline styles. It will not affect styles defined in external stylesheets or styles applied through CSS classes.
Use camelCase notation for property names in JavaScript, such as fontSize instead of font-size.
We can also get the current style of an element by reading the property. For example, element.style.color retrieves the current color of the element.

02. getComputedStyle()

In Javascript, the getComputedStyle() function is used to retrieve the computed style of an HTML element. It provides access to the final computed values of all CSS properties applied to an element, including those inherited from stylesheets and styles defined inline or via JavaScript. This function is useful when we need to obtain the effective styles of an element after all style rules have been applied.

Retrieving Computed Styles

const element = document.getElementById("myElement");

const styles = window.getComputedStyle(element);

window.getComputedStyle(element): This function is called on the window object to access the computed styles of the specified element. It returns a CSSStyleDeclaration object, which contains the computed styles as properties and values.

Using `getComputedStyle()`

<div id="myElement" style="color: blue; font-size: 18px;">
  This is a styled element.
</div>

const element = document.getElementById("myElement");
const styles = window.getComputedStyle(element);

console.log(styles.color); // "rgb(0, 0, 255)"
console.log(styles.fontSize); // "18px"

In this example, we have a <div> element with the ID "myElement." It has inline styles for color and font size. We use getElementById() to select the element, and we call window.getComputedStyle(element) to obtain the computed styles. We then access specific style properties like color and fontSize.

Things to remember

getComputedStyle() returns a CSSStyleDeclaration object that behaves like an associative array, where we can access style properties and their values. The property names are in camelCase format (e.g., fontSize), similar to the style property.
The computed styles include values inherited from parent elements, styles defined in external stylesheets, styles applied via CSS classes, inline styles, and styles modified via JavaScript. It represents the effective styles that will be applied to the element.
When a style property is defined as a shorthand property (e.g., font or border), getComputedStyle() returns the computed values of all individual sub-properties.
The values returned by getComputedStyle() are in their final computed form, not necessarily in the format in which they were authored (e.g., colors may be represented as RGB values).
getComputedStyle() is read-only; it cannot be used to set or modify styles. To change styles, we should use the style property or the setProperty() method for inline styles, or manipulate CSS classes.

Element Properties

01. textContent

In Javascript, the textContent property is used to access and modify the text content of an HTML element. It provides a way to retrieve the text within an element, including all its child elements, as a single string. This property is useful for reading and updating the text content of HTML elements through JavaScript.

Accessing and Modifying Text Content

const element = document.getElementById("myElement");

const text = element.textContent; // Get text content

element.textContent = "New text content"; // Set text content

element.textContent: This property is accessed on the element, and it returns the text content of the element as a single string. If we want to set the text content, you can assign a new string to this property.

Using the `textContent` Property

<div id="myElement">
  This is some <strong>bold</strong> and <em>italic</em> text.
</div>

const element = document.getElementById("myElement");

const text = element.textContent; // "This is some bold and italic text."

In this example, we have a <div> element with the ID "myElement," containing text and nested <strong> and <em> elements. We use getElementById() to select the element, and we access its textContent property to retrieve the combined text content.

Things to remember

The textContent property returns a string that represents the combined text content of the element and all its descendants, including text nodes within child elements. It does not include the HTML markup or tags.
When setting the textContent property, it replaces the existing text content with the new string. Any child elements or HTML markup within the element are removed.
Unlike the innerText property, which considers the element's visibility and style when determining the text content, textContent reflects the actual content of the element in the DOM, whether it's visible or hidden.
When updating the textContent, be cautious about potential security risks like Cross-Site Scripting (XSS) attacks. Make sure to sanitize or escape user-generated content to prevent script injection.

02. value

In Javascript, the value property is commonly associated with HTML form elements, such as input fields, textareas, and select boxes. It allows us to access and manipulate the current value entered by a user or selected by a user in these form elements. The value property is a crucial part of working with form data and user input in web applications.

Accessing and Modifying Form Element Values

const inputElement = document.getElementById("myInput");
const inputValue = inputElement.value; // Get the current value

inputElement.value = "New value"; // Set a new value

Explanation

inputElement.value: This property is accessed on the inputElement, and it returns the current value entered by the user (for input fields) or selected by the user (for select boxes).
When setting the value property, we can assign a new string or value to it. This new value will replace the current content in the form element.

Using the `value` Property

<input id="myInput" type="text" value="Initial Value"/>
```śś
```jsxśś
const inputElement = document.getElementById("myInput");śś
const inputValue = inputElement.value; // "Initial Value"śś

inputElement.value = "New Value"; // Set a new valueśś

In this example, we have an <input> element with the ID "myInput," initially set to "Initial Value." We use getElementById() to select the input field, and we access its value property to read and update the input's value.

Things to remember

The value property is primarily used for working with user input in HTML forms. It is most commonly used with input elements (e.g., text, password, email), textareas, and select boxes (dropdown lists).
When accessing the value property, it returns the current value entered by the user or selected by the user. For text-based input fields, this represents the text entered by the user. For select boxes, it represents the selected option's value.
When setting the value property, we can update the content of the form element. For example, we can clear the input field, set an initial value, or dynamically update the content based on user interactions or other data.
For checkbox and radio input elements, we can use the checked property to determine whether the input is selected (checked) or not.
When working with select boxes, we can access the selected option's value using the value property of the <select> element or the value property of the selected <option> element.

03. checked

In Javascript, the checked property is associated with HTML input elements, specifically checkboxes and radio buttons. It is used to determine whether an input element is selected or checked by the user. The checked property is essential for working with form data, especially when you need to handle user choices or selections.

Checking the Selection State

const checkboxElement = document.getElementById("myCheckbox");

const isChecked = checkboxElement.checked; // Check the selection state

Explanation

checkboxElement.checked: This property is accessed on the checkboxElement, and it returns a boolean value (true or false) that indicates whether the checkbox or radio button is selected (checked) or not.

Using the checked Property

<input id="myCheckbox" type="checkbox" checked />

const checkboxElement = document.getElementById("myCheckbox");

const isChecked = checkboxElement.checked; // true

In this example, we have an <input> element with the ID "myCheckbox" of type "checkbox," and it is initially checked. We use getElementById() to select the checkbox element, and we access its checked property to check whether it is selected (checked).

Things to remember

The checked property is primarily used with checkbox and radio input elements. It helps determine whether the user has selected an option or not. For checkboxes, it indicates whether the checkbox is checked (selected). For radio buttons, it indicates which radio button option is selected among a group.
When accessing the checked property, it returns true if the input element is checked and false if it is not checked.
We can use the checked property in conditional statements to perform actions or validations based on user selections. For example, we can check if a user has selected specific options before processing a form submission.

DOM Traversal and Manipulation

01. cloneNode()

The cloneNode() method is a JavaScript method used in web developement to create a clone or copy of an HTML element. This method allows us to duplicate an element, including all of its attributes and child nodes.

The newly created clone can be inserted into the document, manipulated, or used for various purposes without affecting the original element. cloneNode() is a commonly used method when we need to dynamically generate and manipulate HTML content in our web applications.

Cloning an HTML Element

const originalElement = document.getElementById("originalElement");

const clone = originalElement.cloneNode(true);

Explanation

originalElement: This is a reference to the HTML element that we want to clone. We can obtain the element using various DOM manipulation techniques, such as getElementById(), querySelector(), or other methods.
originalElement.cloneNode(deep): This method is called on the originalElement, and it creates a copy (clone) of the element. The deep parameter is a boolean value that specifies whether to clone the element's child nodes (true) or not (false). If deep is true, the clone will include all child nodes (including nested elements and their content). If deep is false, the clone will include only the element itself without its children.
The clone variable now holds the cloned HTML element, which can be inserted into the document or manipulated as needed.

Using the `cloneNode()` Method

// html file

<div id="originalElement">
  <p>This is the original element.</p>
</div>

// javascript file

const originalElement = document.getElementById("originalElement");

const clone = originalElement.cloneNode(true);

document.body.appendChild(clone);

In this example, we have a <div> element with the ID "originalElement" that contains a <p> element as a child. We use getElementById() to select the original element, and we call cloneNode(true) to create a deep clone that includes the child elements. We then append the clone to the <body> of the document.

Things to remember

The cloneNode() method is a powerful tool for creating copies of HTML elements, allowing us to generate dynamic content, create templates, or duplicate complex structures in our web applications.
When using cloneNode(), we can choose to clone the entire element with its child nodes (deep clone) or just the element itself. The deep clone option is useful when we want to replicate the complete structure, including nested elements and their content.
The cloneNode() method is typically used in conjunction with other DOM manipulation methods for inserting, modifying, and managing dynamically generated content.
When cloning elements, be mindful of potential performance implications, especially when dealing with large structures. Cloning deeply nested structures with many child nodes can impact performance.

02. insertBefore()

The insertBefore() method is a JavaScript method used in web development to insert a new HTML element into a specific position within a parent element. This method provides fine-grained control over where the new element should be placed relative to existing child elements of the parent. It's commonly used to dynamically add elements to a web page or manipulate the order of elements within a container.

Inserting a New Element

// html file

<div id="parentContainer">
  <div>First Child</div>
  <div id="referenceElement">Second Child</div>
  <div>Third Child</div>
</div>

// javascript file
const parentElement = document.getElementById("parentContainer");

const newElement = document.createElement("div"); // Create a new element

newElement.textContent = "New Content"; // Set content for the new element

const referenceElement = document.getElementById("referenceElement"); // Reference element

parentElement.insertBefore(newElement, referenceElement); // Insert the new element

Explanation

parentElement: This is a reference to the parent HTML element where we want to insert the new element. We can obtain the parent element using various DOM manipulation techniques, such as getElementById(), querySelector(), or other methods.
newElement: This is a newly created HTML element that we want to insert into the parent. In the example above, we create a new <div> element and set its content using the textContent property.
referenceElement: This is a reference to an existing child element of the parentElement. The newElement will be inserted immediately before this reference element.
parentElement.insertBefore(newElement, referenceElement): This is the insertBefore() method call. It inserts the newElement into the parentElement just before the referenceElement.

03. replaceChild()

The replaceChild() method is a JavaScript method to replace an existing child element with a new HTML element within a parent element. This method provides a way to swap out one element for another while maintaining the parent element's structure. It is particularly useful when we need to dynamically update the content of a web page or make changes to the structure of a document.

Replacing an Existing Element

// html file

<div id="parentContainer">
  <div>First Child</div>
  <div id="oldElement">Old Content</div>
  <div>Third Child</div>
</div>

// javascript file

const parentElement = document.getElementById("parentContainer");

const newElement = document.createElement("div");

newElement.textContent = "New Content";

const oldElement = document.getElementById("oldElement");

parentElement.replaceChild(newElement, oldElement);

In this example, we have a <div> element with the ID "parentContainer," which contains three child elements. We create a new <div> element, set its content, and use the replaceChild() method to replace the element with the ID "oldElement" with the new element.

04. remove()

The remove() method is a JavaScript method to remove an HTML element from the Document Object Model (DOM). It provides a simple and efficient way to delete an element, along with all of its child elements, from the web page. This method is commonly used to remove elements dynamically based on user interactions, changes in data, or other conditions.

Removing an HTML Element

// html file

<div id="elementToRemove">
  <p>Content to Remove</p>
</div>

// javascript file

const elementToRemove = document.getElementById("elementToRemove");

elementToRemove.remove();

In this example, we have a <div> element with the ID "elementToRemove," which contains a child <p> element. We use getElementById() to select the element, and we call the remove() method to remove it and all of its child elements from the DOM.

When using the remove() method, the element and all of its descendants, including child elements and their content, are completely removed from the DOM.

05. getBoundingClientRect()

The getBoundingClientRect() method is a JavaScript method used in web development to retrieve the dimensions and position of an element on a web page. It returns a DOMRect object that contains information about the element's size, position, and the space it occupies in the viewport.

This method is particularly useful for obtaining details about an element's location and dimensions, which can be essential for tasks such as collision detection, creating custom tooltips, and implementing various interactive features.

Obtaining Element Dimensions and Position

// html file
<div
  id="targetElement"
  style="position: absolute; left: 100px; top: 50px; width: 200px; height: 150px; background-color: #f0f0f0;"
></div>

// javascript file

const element = document.getElementById("targetElement");
const rect = element.getBoundingClientRect();

console.log("x:", rect.x); // The horizontal coordinate (left) of the element's top-left corner relative to the viewport.
console.log("y:", rect.y); // The vertical coordinate (top) of the element's top-left corner relative to the viewport.
console.log("width:", rect.width); // The width of the element.
console.log("height:", rect.height); // The height of the element.

In this example, we have a <div> element with the ID "targetElement," and its position and dimensions are set through inline styles. We use getElementById() to select the element, and we call the getBoundingClientRect() method to retrieve the dimensions and position information.

Things to remember

The getBoundingClientRect() method is a valuable tool for various web development tasks, including detecting element collisions, implementing drag-and-drop functionality, and creating custom tooltips.
The DOMRect object returned by the method is a read-only object. It reflects the current position and dimensions of the element at the time of the method call.
The coordinates provided by the x and y properties are relative to the top-left corner of the viewport.
The getBoundingClientRect() method provides a way to determine the visible area of an element within the viewport, which can be helpful for making decisions based on an element's position, such as whether it's visible or partially hidden.

Working with Forms

01. submit()

The submit() method is a JavaScript method used to programmatically submit an HTML form to the server. This method is typically used in web development when we want to trigger the submission of a form without requiring user interaction, such as clicking a submit button. It's commonly used in scenarios where we need to submit a form as a result of a specific event or action, like validating form data or processing form submissions through JavaScript.

Using the `submit()` Method

// html file

<form id="myForm" action="/submit" method="POST">
  <input type="text" name="username" placeholder="Username" required />
  <input type="password" name="password" placeholder="Password" required />
  <button type="submit">Submit</button>
</form>

// javascript file

const form = document.getElementById("myForm");
form.submit();

In this example, we have an HTML form with the ID "myForm" that contains input fields for a username and password. When we use JavaScript to select the form element and call the submit() method, it simulates the user clicking the submit button, initiating the form submission.

Things to remember

When using submit(), the form will be submitted to the server with the action specified in the form's action attribute and the HTTP method specified in the method attribute. In the example, the form is submitted to "/submit" using the POST method.
The submit() method triggers the form's submit event, allowing us to attach event handlers to the form to perform actions before or after the submission. This can be useful for tasks like data validation or handling form submission responses.

02. reset()

The reset() method is a JavaScript method used to reset an HTML form to its initial state, clearing the user's input and reverting the form's elements to their default values. This method is typically used in web development when we want to allow users to clear their form input or programmatically reset a form to its original state, typically in response to a user action or event.

Using the reset() Method

// html file

<form id="myForm">
  <input type="text" name="name" value="John Doe" />
  <input type="email" name="email" value="john@example.com" />
  <button type="reset">Reset</button>
</form>

// javascript file

const form = document.getElementById("myForm");
form.reset();

In this example, we have an HTML form with the ID "myForm" that contains input fields for a name and an email address. When we use JavaScript to select the form element and call the reset() method, it resets the input fields to their default values, which are provided in the form's HTML.

03. elements[]

The elements[] property is a JavaScript property used to access the form elements within an HTML form. It provides a collection of all the form controls (such as input fields, buttons, and select lists) contained within a given form.

This property is useful for accessing, manipulating, or validating the values of form elements in a web page, especially when we need to work with multiple form controls.

Using the elements[] Property

// html file

<form id="myForm">
  <input type="text" name="username" value="John Doe" />
  <input type="email" name="email" value="john@example.com" />
  <button type="submit">Submit</button>
</form>

// javascript file

const form = document.getElementById("myForm");
const formElements = form.elements;

const usernameInput = formElements.username;
const emailInput = formElements["email"];

In this example, we have an HTML form with the ID "myForm" that contains input fields for a username and an email address. We use JavaScript to select the form element and access the form elements collection. We then access specific form controls within the collection by name or using brackets and the form control's name.

formElements.username and formElements["email"]: These are examples of how to access specific form elements within the collection. We can access form controls by their name attribute, which is set on each form control. In the example, "username" and "email" are the names of input fields within the form.

04. focus()

The focus() method is a JavaScript method used to programmatically give focus to an HTML element, typically an interactive element like an input field, button, or link. When an element receives focus, it becomes the active element that can accept user input or interaction.

Using the `focus()` Method

// html file

<input id="myInput" type="text" placeholder="Type here"/>
<button id="myButton">Click Me</button>

// javascript file

const inputElement = document.getElementById("myInput");
const buttonElement = document.getElementById("myButton");

inputElement.focus();

buttonElement.addEventListener("click", () => {
  inputElement.focus();
});

In this example, we have an HTML input field with the ID "myInput" and a button with the ID "myButton." When the page loads, we use JavaScript to give focus to the input element using the focus() method. Additionally, when the button is clicked, we also give focus back to the input element to allow the user to continue typing.

05. blur()

The blur() method is a JavaScript method used to programmatically remove focus from an HTML element, typically an interactive element like an input field, button, or link. When an element loses focus, it is no longer the active element and cannot accept user input or interaction.

Using the `blur()` Method

// html file

<input id="myInput" type="text" placeholder="Type here"/>
<button id="myButton">Click Me</button>

// javascript file

const inputElement = document.getElementById("myInput");
const buttonElement = document.getElementById("myButton");

inputElement.addEventListener("focus", () => {
  setTimeout(() => {
    inputElement.blur();
  }, 2000);
});

buttonElement.addEventListener("click", () => {
  inputElement.focus();
});

In this example, we have an HTML input field with the ID "myInput" and a button with the ID "myButton." When the input field receives focus, an event listener is set up to remove focus using the blur() method after a 2-second delay. Additionally, when the button is clicked, we use the focus() method to give focus back to the input field.

Conclusion

In conclusion, the world of web development is powered by the dynamic and interactive nature of the Document Object Model (DOM). Understanding and harnessing the capabilities of JavaScript DOM methods is essential for creating responsive, user-friendly, and feature-rich web applications. In this comprehensive guide, we've explored various DOM methods, from selecting elements to manipulating and transforming the web page.

We've learned how to access elements by various criteria, whether by ID, class, or tag name, and how to manipulate their attributes and content with ease. We've delved into the world of event handling, adding interactivity to our web pages, and making them come alive with user-driven actions. Additionally, we've examined techniques for styling and positioning elements, providing the finishing touches to our web designs.

Just Keep Practicing

Share this article:

Facebook Twitter LinkedIn Instagram

DOM Manipulation

01. getElementById()

Finding an Element by ID

Changing the Content of an Element

02. getElementsByClassName()

Finding Elements by Class Name

Changing the Style of Elements with the Same Class

03. getElementsByTagName()

Finding Elements by Tag Name

Changing the Style of All Paragraphs

04. querySelector()

Finding the First Matching Element

Changing the Style of the First Paragraph with a Class

05. querySelectorAll()

Finding All Matching Elements

Changing the Style of All Paragraphs with a Class

06. createElement()

Creating a New HTML Element

Creating a New Paragraph Element

07. appendChild()

Adding an Element as a Child

Adding a Paragraph to a Div

08. removeChild()

Removing a Child Element

Removing a Paragraph from a Div

09. setAttribute()

Setting or Modifying an Attribute

Setting the src Attribute of an Image

10. removeAttribute()

Removing an Attribute

Removing the alt Attribute from an Image

11. innerHTML

Accessing and Setting Inner HTML

Event Handling

01. addEventListener()

Attaching an Event Listener

Adding a Click Event Listener

02. removeEventListener()

Removing an Event Listener

Removing a Click Event Listener

03. event.stopPropagation()

Stopping Event Propagation

Using stopPropagation()

04. event.preventDefault()

Preventing the Default Behavior

Using preventDefault()

05. event.target

Accessing the Event Target Element

Using event.target

Traversing and Selecting Elements

01. parentNode

Accessing the Parent Node

Using parentNode

02. childNodes

Accessing Child Nodes

Using childNodes

03. nextSibling

Accessing the Next Sibling Node

Using nextSibling

04. previousSibling

Accessing the Previous Sibling Node

Using previousSibling

Style and CSS

01. style

Accessing and Modifying Element Styles

Using the style Property

02. getComputedStyle()

Retrieving Computed Styles

Using getComputedStyle()

Element Properties

01. textContent

Accessing and Modifying Text Content

Using the textContent Property

02. value

Accessing and Modifying Form Element Values

Using the value Property

03. checked

Checking the Selection State

Using the checked Property

DOM Traversal and Manipulation

Using `stopPropagation()`

Using `event.target`

Using `parentNode`

Using `childNodes`

Using `nextSibling`

Using `previousSibling`

Using the `style` Property

Using `getComputedStyle()`

Using the `textContent` Property

Using the `value` Property

Using the `cloneNode()` Method

Using the `submit()` Method

Using the `focus()` Method

Using the `blur()` Method