Skip to content

dom.md

Latest commit

 

History

History
76 lines (53 loc) · 4.03 KB

dom.md

File metadata and controls

76 lines (53 loc) · 4.03 KB

DOM (Document Object Model) manipulation in JavaScript refers to the process of interacting with the HTML elements and modifying their properties, content, or structure dynamically. It allows you to programmatically access and modify elements on a web page.

Here are some common techniques and methods for DOM manipulation in JavaScript:

  1. Accessing Elements:-- these are methods for any element(mainly document)

    • getElementById(id): Retrieves an element with the specified ID.
    • getElementsByClassName(className): Returns a collection of elements with the specified class name.
    • getElementsByTagName(tagName): Returns a collection of elements with the specified tag name.
    • querySelector(selector): Returns the first element that matches the specified CSS selector.
    • querySelectorAll(selector): Returns a NodeList containing all elements that match the specified CSS selector.

  2. Modifying Element Content:

    • textContent: Sets or retrieves the text content of an element.
    • innerHTML: Sets or retrieves the HTML content of an element.
    • innerText: Sets or retrieves the visible text content of an element, excluding any styling.

  3. Modifying Element Attributes:

    • getAttribute(name): Retrieves the value of the specified attribute.
    • setAttribute(name, value): Sets the value of the specified attribute.
    • removeAttribute(name): Removes the specified attribute from an element.

  4. Modifying Element Styles:

    • style.property: Allows direct manipulation of CSS properties of an element. For example: element.style.color = "red";.

  5. Creating and Modifying Elements:

    • createElement(tagName): Creates a new element with the specified tag name.
    • appendChild(node): Appends a node as the last child of another node.
    • removeChild(node): Removes a child node from its parent.
    • cloneNode(deep): Creates a copy of a node, optionally including its descendants.

  6. Event Handling:

    • addEventListener(event, callback): Attaches an event listener to an element.
    • removeEventListener(event, callback): Removes an event listener from an element.

  7. Modifying CSS Classes:

    • classList.add(className): Adds a CSS class to an element.
    • classList.remove(className): Removes a CSS class from an element.
    • classList.toggle(className): Toggles the presence of a CSS class on an element.
    • classList.contains(className): Checks if an element has a specific CSS class.

  8. Traversing the DOM:

    • parentNode: Accesses the parent node of an element.
    • childNodes: Retrieves a collection of child nodes of an element.
    • nextSibling: Retrieves the next sibling node of an element.
    • previousSibling: Retrieves the previous sibling node of an element.
    • querySelector and querySelectorAll (mentioned earlier) can also be used for traversing the DOM by selecting elements based on their relationship to other elements.

  9. Modifying Element Dimensions and Position:

    • style.width: Sets or retrieves the width of an element.
    • style.height: Sets or retrieves the height of an element.
    • style.margin, style.padding, style.border: Allows manipulation of element margins, paddings, and borders.
    • offsetWidth: Retrieves the width of an element including borders and padding.
    • offsetHeight: Retrieves the height of an element including borders and padding.
    • offsetTop: Retrieves the top position of an element relative to its offset parent.
    • offsetLeft: Retrieves the left position of an element relative to its offset parent.

  10. Modifying Element Visibility:

    • style.display: Sets or retrieves the display style of an element.
    • style.visibility: Sets or retrieves the visibility of an element.
    • style.opacity: Sets or retrieves the opacity of an element.

  11. Manipulating Form Data:

    • Accessing form elements and their values using their IDs or names.
    • element.value: Retrieves or sets the value of form input elements.

These allow you to control the structure, appearance, and behavior of web pages dynamically.