JavaScript
JavaScript/
JavaScript DOM
JavaScript DOM
JavaScript DOM

JavaScript DOM

Image
https://i.ytimg.com/vi/5fb2aPlgoys/maxresdefault.jpg
The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the structure of a document as a tree of objects, with each object (or "node") in the tree representing an element or a piece of text within the document.
JavaScript is commonly used to interact with the DOM, allowing you to dynamically change the content and layout of a web page.
Here are some common tasks you can perform with the DOM in JavaScript:
  • Accessing elements: You can use document.getElementById() to access an element by its ID, document.getElementsByTagName() to access all elements with a specific tag, and document.querySelector() to access an element that matches a CSS selector.
  • Changing elements: Once you have access to an element, you can change its content using the innerHTML property, change its styling using the style property, and add or remove classes using the classList property.
  • Traversing the tree: The DOM tree is hierarchical, so you can move up and down the tree using properties like parentNode, previousSibling, and nextSibling.
  • Creating new elements: You can create new elements using the document.createElement() method and add them to the page using the appendChild() method.
Here is a sample of Js DOM code:
//Accessing an element by ID
var myHeading = document.getElementById("myHeading");

//Changing the content of an element
myHeading.innerHTML = "Hello, World!";

// Changing the style of an element
myHeading.style.color = "red";

// Adding a class to an element
myHeading.classList.add("special");

// Creating a new element
var newParagraph = document.createElement("p");

// Adding content to the new element
newParagraph.innerHTML = "This is a new paragraph.";

// Adding the new element to the page
document.body.appendChild(newParagraph);
The DOM provides a wide range of functionalities for manipulating HTML and XML documents. Here are some of the main functionalities:
  1. Accessing elements: You can use document.getElementById() to access an element by its ID, document.getElementsByTagName() to access all elements with a specific tag, document.getElementsByClassName() to access all elements with a specific class, and document.querySelector() and document.querySelectorAll() to access elements that match a CSS selector.
  1. Changing elements: Once you have access to an element, you can change its content using the innerHTML property, change its styling using the style property, and add or remove classes using the classList property. You can also add and remove attributes using setAttribute(), getAttribute() and removeAttribute() methods.
  1. Traversing the tree: The DOM tree is hierarchical, so you can move up and down the tree using properties like parentNode, previousSibling, and nextSibling. You can also traverse through child nodes using childNodes, firstChild, and lastChild properties.
  1. Creating new elements: You can create new elements using the document.createElement() method and add them to the page using the appendChild() or insertBefore() methods.
  1. Manipulating events: DOM allows you to attach and remove event listeners to elements, like click, hover, keypress, etc. addEventListener() and removeEventListener() methods are used to attach and remove events.
  1. Working with forms: DOM provides several methods and properties to work with form elements, like getElementById(), getElementsByTagName(), getElementsByName(), value, checked, defaultValue, defaultChecked, and so on.
  1. Document properties: Some of the commonly used properties are document.title(to change the title of the document), document.body(to access the body element of the document), document.URL (to get the current URL of the document), document.referrer (to get the URL of the document that loaded the current document).
  1. Document methods: Some of the commonly used methods are document.write()(to write text or HTML to the document), document.open()(to open a new document), document.close() (to close the document), document.getElementsByName()(to get all elements that have a specified name)
  1. Managing forms: The DOM provides several methods for working with form elements, such as form.submit() to submit a form, form.reset() to reset a form, and form.elements to access all of the form's elements as a collection. You can also use form.checkValidity() to check if the form is valid, and form.reportValidity() to show validation messages.
  1. Manipulating nodes: You can use the DOM to manipulate the structure of a document by adding, removing, and moving nodes. The appendChild() method can be used to add a new node to the end of a parent node's children, while the insertBefore() method can be used to insert a node before a specific child node. The removeChild() method can be used to remove a node from its parent, and replaceChild() method can be used to replace a child node.
  1. Getting information about nodes: The DOM provides several properties and methods for getting information about nodes, such as node.nodeName which returns the name of the node, node.nodeType which returns the type of the node, node.parentNode which returns the parent node of the current node and node.childNodes returns a collection of the child nodes of the current node.
  1. document.forms: This property allows you to access all the forms in a document. You can use the document.forms property to access the forms by their index, e.g., document.forms[0] to access the first form, document.forms[1] to access the second form, etc.
  1. document.images: This property allows you to access all the images in a document. You can use the document.images property to access the images by their index, e.g., document.images[0] to access the first image, document.images[1] to access the second image, etc.
  1. document.links: This property allows you to access all the links in a document. You can use the document.links property to access the links by their index, e.g., document.links[0] to access the first link, document.links[1] to access the second link, etc.
  1. document.head: This property allows you to access the <head> element of the document. You can use this property to add or modify meta tags, scripts and styles.
  1. document.cookie: This property allows you to read and write cookies. You can use this property to set, read, and delete cookies.
  1. document.readyState: This property indicates the current state of the DOM. It can have one of the following values: "loading", "interactive", "complete". This can be useful if you need to perform an action once the page has fully loaded.
  1. document.lastModified: This property returns the date and time that the document was last modified. This can be useful if you want to display the last modified date on a webpage.
  1. document.onload and document.onunload: These events allow you to execute JavaScript code when the page is loading or unloading. You can use the onload event to perform initialization tasks, and the onunload event to perform cleanup tasks.
  1. Node.cloneNode(): This method creates a duplicate of a node and returns the cloned node. You can use this method to create a copy of an element, which you can then manipulate and insert into the DOM.
  1. Node.replaceChild(): This method replaces a child node with a new node. You can use this method to update an element within the DOM, without having to remove and reinsert the element.
  1. Node.removeChild(): This method removes a child node from the DOM. You can use this method to remove an element from the DOM, or to clear the contents of an element.
 
Built with Potion.so