DOM CRUD செயல்பாடுகள்

Document Object Model (DOM) என்பது உலாவிகள் (browsers) HTML-ஐ எவ்வாறு பிரதிபலிக்கின்றன என்பதைக் குறிக்கிறது. இது ஒவ்வொரு உறுப்பு (element), பண்பு (attribute) மற்றும் உரைத் துண்டையும் (text piece) ஒரு பொருளாக (object) மாற்றுகிறது. திரையில் நீங்கள் காண்பதை மாற்ற JavaScript இந்த பொருட்களைப் பயன்படுத்துகிறது.

நீங்கள் ஒரு பொத்தானைக் கிளிக் செய்யும் போது, பக்கம் புதுப்பிக்கப்படாமல் (refresh) மாறினால், JavaScript DOM-ஐ மாற்றுகிறது என்று அர்த்தம்.

இந்த முறைகளைப் (methods) பயன்படுத்தி நீங்கள் CRUD (Create, Read, Update, Delete) செயல்பாடுகளைச் செய்யலாம்.

  1. உறுப்புகளை அணுகுதல் (Read) எதையாவது மாற்ற வேண்டுமென்றால், முதலில் அதை நீங்கள் கண்டறிய வேண்டும். இந்த முறைகளைப் பயன்படுத்தவும்:
  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()
  1. உறுப்புகளை உருவாக்குதல் (Create) JavaScript மூலம் புதிய HTML உறுப்புகளை நீங்கள் உருவாக்க முடியும்.
  • createElement("tagName") நினைவகத்தில் (memory) உறுப்பை உருவாக்குகிறது.
  • append() ஒரு பெற்றோர் (parent) உறுப்பின் இறுதியில் உள்ளடக்கத்தைச் சேர்க்கிறது.
  • appendChild() ஒரு தனி நோடை (node) கடைசி குழந்தையாகச் சேர்க்கிறது.
  • prepend() ஒரு பெற்றோர் உறுப்பின் தொடக்கத்தில் உள்ளடக்கத்தைச் சேர்க்கிறது.
  • before() ஒரு குறிப்பிட்ட உறுப்பிற்கு முன்னால் ஒரு உறுப்பைச் சேர்க்கிறது.
  • after() ஒரு குறிப்பிட்ட உறுப்பிற்குப் பின்னால் ஒரு உறுப்பைச் சேர்க்கிறது.
  • insertBefore() ஒரு குறிப்பிட்ட குழந்தைக்கு முன்னால் ஒரு உறுப்பை வைக்கிறது.

குறிப்பு: ஒரு உறுப்பை நீங்கள் பக்கத்தில் சேர்க்கும் வரை அது நினைவகத்திலேயே இருக்கும்.

  1. உறுப்புகளைப் புதுப்பித்தல் (Update) இந்த பண்புகளைப் (properties) பயன்படுத்தி ஏற்கனவே உள்ள உள்ளடக்கத்தை மாற்றலாம்:
  • innerText: கண்ணுக்குத் தெரியும் உரையை மட்டும் மாற்றுகிறது.
  • textContent: மறைக்கப்பட்ட உரை உட்பட அனைத்து உரைகளையும் மாற்றுகிறது.
  • innerHTML: உள்ளடக்கத்தை மாற்றுகிறது மற்றும் HTML டேக்குகளைச் சேர்க்க அனுமதிக்கிறது.
  1. பண்புகளுடன் (Attributes) பணியாற்றுதல் (Update) பண்புகள் (Attributes) உறுப்புகள் பற்றிய கூடுதல் தகவல்களை வழங்குகின்றன.
  • setAttribute(name, value): ஒரு பண்பை அமைக்கிறது அல்லது மாற்றுகிறது.
  • getAttribute(name): ஒரு பண்பின் மதிப்பைத் திரும்பப் பெறுகிறது.
  • removeAttribute(name): ஒரு பண்பை நீக்குகிறது.
  • hasAttribute(name): ஒரு பண்பு உள்ளதா என்பதைச் சரிபார்க்கிறது.

Pro tip: பழைய வகுப்புகளை (classes) நீக்காமல் புதிய வகுப்பைச் சேர்க்க classList.add() ஐப் பயன்படுத்தவும். setAttribute() முழு மதிப்பையும் மாற்றுகிறது.

  1. உறுப்புகளை நீக்குதல் (Delete) பக்கத்திலிருந்து ஒரு உறுப்பை நீக்க இதைப் பயன்படுத்தவும்:
  • remove()

ஒரு CRUD ஓட்டத்தின் (flow) சுருக்கம்:

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

இந்த முறைகளில் தேர்ச்சி பெறுவதன் மூலம், to-do பட்டியல்கள் அல்லது கால்குலேட்டர்கள் போன்ற ஊடாடும் (interactive) செயலிகளை நீங்கள் உருவாக்க முடியும். இது front-end மேம்பாட்டிற்கு (development) ஒரு முக்கியமான திறமையாகும்.

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