DOM CRUD ಕಾರ್ಯಾಚರಣೆಗಳು
Document Object Model (DOM) ಎಂಬುದು ನಿಮ್ಮ HTML ಗಾಗಿ ಒಂದು ಮರದ ರಚನೆಯಾಗಿದೆ (tree structure). ಪೇಜಿನ ಪ್ರತಿಯೊಂದು ಎಲಿಮೆಂಟ್ (element), ಅಟ್ರಿಬ್ಯೂಟ್ (attribute) ಮತ್ತು ಪಠ್ಯದ ಭಾಗವನ್ನು ಪ್ರವೇಶಿಸಲು ಮತ್ತು ಬದಲಾಯಿಸಲು JavaScript ಇದನ್ನು ಬಳಸುತ್ತದೆ.
ನೀವು ಒಂದು ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಪೇಜ್ ರಿಫ್ರೆಶ್ ಆಗದೆಯೇ ಅಪ್ಡೇಟ್ ಆಗುವುದನ್ನು ನೀವು ನೋಡಿದರೆ, ಅದು DOM ಮ್ಯಾನಿಪ್ಯುಲೇಶನ್ (manipulation) ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿದೆ ಎಂದರ್ಥ.
CRUD (Create, Read, Update, Delete) ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ಮಾಡುವ ವಿಧಾನ ಇಲ್ಲಿದೆ.
- Read: ಎಲಿಮೆಂಟ್ಗಳನ್ನು ಪ್ರವೇಶಿಸುವುದು (Accessing Elements) ನಿಮ್ಮ ಪೇಜಿನಲ್ಲಿ ಎಲಿಮೆಂಟ್ಗಳನ್ನು ಹುಡುಕಲು ಈ ವಿಧಾನಗಳನ್ನು ಬಳಸಿ:
- getElementById()
- getElementsByClassName()
- getElementsByTagName()
- querySelector()
- querySelectorAll()
- Create: ಹೊಸ ಎಲಿಮೆಂಟ್ಗಳನ್ನು ರಚಿಸುವುದು (Making New Elements) ನೀವು JavaScript ಬಳಸಿ ಹೊಸ HTML ಎಲಿಮೆಂಟ್ಗಳನ್ನು ರಚಿಸಬಹುದು.
- createElement(): ಮೆಮೊರಿಯಲ್ಲಿ ಹೊಸ ಟ್ಯಾಗ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ.
- append(): ಪೇರೆಂಟ್ (parent) ಎಲಿಮೆಂಟ್ನ ಕೊನೆಯಲ್ಲಿ ವಿಷಯವನ್ನು ಸೇರಿಸುತ್ತದೆ.
- appendChild(): ಒಂದು ಸಿಂಗಲ್ ನೋಡ್ ಅನ್ನು ಕೊನೆಯ ಚೈಲ್ಡ್ ಆಗಿ ಸೇರಿಸುತ್ತದೆ.
- prepend(): ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್ನ ಆರಂಭದಲ್ಲಿ ವಿಷಯವನ್ನು ಸೇರಿಸುತ್ತದೆ.
- before(): ನಿರ್ದಿಷ್ಟ ಟಾರ್ಗೆಟ್ಗಿಂತ ಮೊದಲು ಎಲಿಮೆಂಟ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ.
- after(): ನಿರ್ದಿಷ್ಟ ಟಾರ್ಗೆಟ್ಗಿಂತ ನಂತರ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ.
- insertBefore(): ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಚೈಲ್ಡ್ ಎಲಿಮೆಂಟ್ನ ಮೊದಲು ಹೊಸ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಇರಿಸುತ್ತದೆ.
- Update: ವಿಷಯವನ್ನು ಬದಲಾಯಿಸುವುದು (Changing Content) ಬಳಕೆದಾರರು ಪರದೆಯ ಮೇಲೆ ನೋಡುವ ವಿಷಯವನ್ನು ಮಾರ್ಪಡಿಸಿ:
- innerText: ಕೇವಲ ಕಾಣಿಸುವ ಪಠ್ಯವನ್ನು ಮಾತ್ರ ಅಪ್ಡೇಟ್ ಮಾಡುತ್ತದೆ.
- textContent: ಅಡಗಿರುವ ಪಠ್ಯ ಸೇರಿದಂತೆ ಎಲ್ಲಾ ಪಠ್ಯವನ್ನು ಅಪ್ಡೇಟ್ ಮಾಡುತ್ತದೆ.
- innerHTML: ವಿಷಯವನ್ನು ಅಪ್ಡೇಟ್ ಮಾಡುತ್ತದೆ ಮತ್ತು HTML ಟ್ಯಾಗ್ಗಳನ್ನು ಸೇರಿಸಲು ಅನುಮತಿಸುತ್ತದೆ.
- Attributes: ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು (Managing Properties) ಅಟ್ರಿಬ್ಯೂಟ್ಗಳು ನಿಮ್ಮ ಟ್ಯಾಗ್ಗಳಿಗೆ ಹೆಚ್ಚಿನ ಮಾಹಿತಿಯನ್ನು ಸೇರಿಸುತ್ತವೆ.
- setAttribute(): ಅಟ್ರಿಬ್ಯೂಟ್ಗೆ ಹೊಸ ಮೌಲ್ಯವನ್ನು ನಿಗದಿಪಡಿಸುತ್ತದೆ. ಇದು ಹಳೆಯ ಮೌಲ್ಯವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ.
- getAttribute(): ಪ್ರಸ್ತುತ ಮೌಲ್ಯವನ್ನು ಪಡೆಯುತ್ತದೆ.
- removeAttribute(): ಅಟ್ರಿಬ್ಯೂಟ್ ಅನ್ನು ಅಳಿಸುತ್ತದೆ.
- hasAttribute(): ಅಟ್ರಿಬ್ಯೂಟ್ ಅಸ್ತಿತ್ವದಲ್ಲಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ.
Pro tip: ನಿಮ್ಮ ಪ್ರಸ್ತುತ ಕ್ಲಾಸ್ಗಳನ್ನು ಅಳಿಸದೆ ಹೊಸ ಕ್ಲಾಸ್ ಸೇರಿಸಲು classList.add() ಬಳಸಿ. ಕಸ್ಟಮ್ ಅಟ್ರಿಬ್ಯೂಟ್ಗಳಿಗಾಗಿ setAttribute() ಬಳಸಿ.
- Delete: ಎಲಿಮೆಂಟ್ಗಳನ್ನು ತೆಗೆದುಹಾಕುವುದು (Removing Elements) ಪೇಜಿನಿಂದ ಎಲಿಮೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲು ಇದನ್ನು ಬಳಸಿ:
- remove()
CRUD ಹರಿವಿನ (Flow) ಸಾರಾಂಶ:
- Create:
document.createElement("p") - Update:
p.innerText = "Hello" - Read:
document.getElementById("p") - Delete:
p.remove()
ಈ ವಿಧಾನಗಳಲ್ಲಿ ಪರಿಣತಿ ಪಡೆಯುವುದರಿಂದ ನೀವು ಟು-ಡೂ ಲಿಸ್ಟ್ಗಳು (to-do lists), ಕ್ಯಾಲ್ಕುಲೇಟರ್ಗಳು ಮತ್ತು ಫಾರ್ಮ್ ವ್ಯಾಲಿಡೇಟರ್ಗಳಂತಹ (form validators) ಇಂಟರಾಕ್ಟಿವ್ ಟೂಲ್ಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು. ಇದು ಆಧುನಿಕ ವೆಬ್ ಫ್ರೇಮ್ವರ್ಕ್ಗಳನ್ನು ಕಲಿಯುವಲ್ಲಿ ಒಂದು ಪ್ರಮುಖ ಹಂತವಾಗಿದೆ.
Source: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka
Optional learning community: https://t.me/GyaanSetuAi