DOM CRUD Operations

The Document Object Model (DOM) is how browsers represent HTML. It turns every element, attribute, and text piece into an object. JavaScript uses these objects to change what you see on a screen.

When you click a button and a page updates without refreshing, JavaScript is changing the DOM.

You can perform CRUD (Create, Read, Update, Delete) operations with these methods.

  1. Accessing Elements (Read) To change something, you must first find it. Use these methods:
  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()
  1. Creating Elements (Create) You can generate new HTML elements using JavaScript.
  • createElement("tagName") creates the element in memory.
  • append() adds content to the end of a parent.
  • appendChild() adds a single node as the last child.
  • prepend() adds content to the start of a parent.
  • before() inserts an element before a specific item.
  • after() inserts an element after a specific item.
  • insertBefore() places an element before a specific child.

Note: An element stays in memory until you add it to the page.

  1. Updating Elements (Update) You can change existing content using these properties:
  • innerText: Changes only visible text.
  • textContent: Changes all text, including hidden text.
  • innerHTML: Changes content and allows you to add HTML tags.
  1. Working with Attributes (Update) Attributes provide extra info about elements.
  • setAttribute(name, value): Sets or replaces an attribute.
  • getAttribute(name): Retrieves an attribute value.
  • removeAttribute(name): Deletes an attribute.
  • hasAttribute(name): Checks if an attribute exists.

Pro tip: Use classList.add() to add a class without removing old ones. setAttribute() replaces the entire value.

  1. Removing Elements (Delete) To delete an element from the page, use:
  • remove()

Summary of a CRUD flow:

  • Create: createElement()
  • Update: innerText = "New text"
  • Add: appendChild()
  • Delete: remove()

Mastering these methods allows you to build interactive apps like to-do lists or calculators. This is a vital skill for front-end development.

Source: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka

Operacje CRUD w DOM

Document Object Model (DOM) to sposób, w jaki przeglądarki reprezentują HTML. Przekształca on każdy element, atrybut i fragment tekstu w obiekt. JavaScript wykorzystuje te obiekty, aby zmieniać to, co widzisz na ekranie.

Gdy klikasz przycisk, a strona aktualizuje się bez odświeżania, JavaScript zmienia DOM.

Możesz wykonywać operacje CRUD (Create, Read, Update, Delete – Tworzenie, Odczyt, Aktualizacja, Usuwanie) za pomocą tych metod.

  1. Uzyskiwanie dostępu do elementów (Read) Aby coś zmienić, musisz to najpierw znaleźć. Użyj tych metod:
  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()
  1. Tworzenie elementów (Create) Możesz generować nowe elementy HTML za pomocą JavaScript.
  • createElement("tagName") tworzy element w pamięci.
  • append() dodaje zawartość na końcu elementu nadrzędnego.
  • appendChild() dodaje pojedynczy węzeł jako ostatnie dziecko.
  • prepend() dodaje zawartość na początku elementu nadrzędnego.
  • before() wstawia element przed konkretnym elementem.
  • after() wstawia element po konkretnym elemencie.
  • insertBefore() umieszcza element przed konkretnym dzieckiem.

Uwaga: Element pozostaje w pamięci, dopóki nie dodasz go do strony.

  1. Aktualizacja elementów (Update) Możesz zmieniać istniejącą zawartość za pomocą tych właściwości:
  • innerText: Zmienia tylko widoczny tekst.
  • textContent: Zmienia cały tekst, w tym tekst ukryty.
  • innerHTML: Zmienia zawartość i pozwala na dodawanie znaczników HTML.
  1. Praca z atrybutami (Update) Atrybuty dostarczają dodatkowych informacji o elementach.
  • setAttribute(name, value): Ustawia lub zastępuje atrybut.
  • getAttribute(name): Pobiera wartość atrybutu.
  • removeAttribute(name): Usuwa atrybut.
  • hasAttribute(name): Sprawdza, czy atrybut istnieje.

Pro tip: Użyj classList.add() aby dodać klasę bez usuwania poprzednich. setAttribute() zastępuje całą wartość.

  1. Usuwanie elementów (Delete) Aby usunąć element ze strony, użyj:
  • remove()

Podsumowanie przepływu CRUD:

  • Create: createElement()
  • Update: innerText = "Nowy tekst"
  • Add: appendChild()
  • Delete: remove()

Opanowanie tych metod pozwala na budowanie interaktywnych aplikacji, takich jak listy zadań czy kalkulatory. Jest to kluczowa umiejętność w rozwoju front-end.

Źródło: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka