DOM CRUD ಕಾರ್ಯಾಚರಣೆಗಳು
Document Object Model (DOM) ಎಂಬುದು ಬ್ರೌಸರ್ಗಳು HTML ಅನ್ನು ಪ್ರತಿನಿಧಿಸುವ ವಿಧಾನವಾಗಿದೆ. ಇದು ಪ್ರತಿಯೊಂದು ಎಲಿಮೆಂಟ್ (element), ಅಟ್ರಿಬ್ಯೂಟ್ (attribute) ಮತ್ತು ಪಠ್ಯದ ಭಾಗವನ್ನು ಒಂದು ಆಬ್ಜೆಕ್ಟ್ ಆಗಿ ಪರಿವರ್ತಿಸುತ್ತದೆ. ಸ್ಕ್ರೀನ್ ಮೇಲೆ ನೀವು ನೋಡುವ ವಿಷಯವನ್ನು ಬದಲಾಯಿಸಲು JavaScript ಈ ಆಬ್ಜೆಕ್ಟ್ಗಳನ್ನು ಬಳಸುತ್ತದೆ.
ನೀವು ಒಂದು ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಮತ್ತು ಪೇಜ್ ರಿಫ್ರೆಶ್ ಆಗದೆಯೇ ಅಪ್ಡೇಟ್ ಆದಾಗ, JavaScript DOM ಅನ್ನು ಬದಲಾಯಿಸುತ್ತಿರುತ್ತದೆ.
ಈ ವಿಧಾನಗಳೊಂದಿಗೆ ನೀವು CRUD (Create, Read, Update, Delete) ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ಮಾಡಬಹುದು.
- ಎಲಿಮೆಂಟ್ಗಳನ್ನು ಪ್ರವೇಶಿಸುವುದು (Read) ಯಾವುದನ್ನಾದರೂ ಬದಲಾಯಿಸಲು, ನೀವು ಮೊದಲು ಅದನ್ನು ಹುಡುಕಬೇಕು. ಈ ವಿಧಾನಗಳನ್ನು ಬಳಸಿ:
- getElementById()
- getElementsByClassName()
- getElementsByTagName()
- querySelector()
- querySelectorAll()
- ಎಲಿಮೆಂಟ್ಗಳನ್ನು ರಚಿಸುವುದು (Create) ನೀವು JavaScript ಬಳಸಿ ಹೊಸ HTML ಎಲಿಮೆಂಟ್ಗಳನ್ನು ರಚಿಸಬಹುದು.
createElement("tagName")ಎಲಿಮೆಂಟ್ ಅನ್ನು ಮೆಮೊರಿಯಲ್ಲಿ ರಚಿಸುತ್ತದೆ.append()ಪೇರೆಂಟ್ (parent) ಎಲಿಮೆಂಟ್ನ ಕೊನೆಯಲ್ಲಿ ವಿಷಯವನ್ನು ಸೇರಿಸುತ್ತದೆ.appendChild()ಒಂದು ಸಿಂಗಲ್ ನೋಡ್ ಅನ್ನು ಕೊನೆಯ ಚೈಲ್ಡ್ ಆಗಿ ಸೇರಿಸುತ್ತದೆ.prepend()ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್ನ ಆರಂಭದಲ್ಲಿ ವಿಷಯವನ್ನು ಸೇರಿಸುತ್ತದೆ.before()ಒಂದು ನಿರ್ದಿಷ್ಟ ಐಟಂನ ಮೊದಲು ಎಲಿಮೆಂಟ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ.after()ಒಂದು ನಿರ್ದಿಷ್ಟ ಐಟಂನ ನಂತರ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ.insertBefore()ಒಂದು ನಿರ್ದಿಷ್ಟ ಚೈಲ್ಡ್ ಎಲಿಮೆಂಟ್ನ ಮೊದಲು ಎಲಿಮೆಂಟ್ ಅನ್ನು ಇರಿಸುತ್ತದೆ.
ಗಮನಿಸಿ: ನೀವು ಅದನ್ನು ಪೇಜ್ಗೆ ಸೇರಿಸುವವರೆಗೆ ಎಲಿಮೆಂಟ್ ಮೆಮೊರಿಯಲ್ಲಿ ಇರುತ್ತದೆ.
- ಎಲಿಮೆಂಟ್ಗಳನ್ನು ಅಪ್ಡೇಟ್ ಮಾಡುವುದು (Update) ಈ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು (properties) ಬಳಸಿ ನೀವು ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ವಿಷಯವನ್ನು ಬದಲಾಯಿಸಬಹುದು:
innerText: ಕೇವಲ ಕಾಣಿಸುವ ಪಠ್ಯವನ್ನು ಮಾತ್ರ ಬದಲಾಯಿಸುತ್ತದೆ.textContent: ಅಡಗಿರುವ ಪಠ್ಯ ಸೇರಿದಂತೆ ಎಲ್ಲಾ ಪಠ್ಯವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ.innerHTML: ವಿಷಯವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ ಮತ್ತು HTML ಟ್ಯಾಗ್ಗಳನ್ನು ಸೇರಿಸಲು ಅನುಮತಿಸುತ್ತದೆ.
- ಅಟ್ರಿಬ್ಯೂಟ್ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವುದು (Update) ಅಟ್ರಿಬ್ಯೂಟ್ಗಳು ಎಲಿಮೆಂಟ್ಗಳ ಬಗ್ಗೆ ಹೆಚ್ಚಿನ ಮಾಹಿತಿಯನ್ನು ನೀಡುತ್ತವೆ.
setAttribute(name, value): ಅಟ್ರಿಬ್ಯೂಟ್ ಅನ್ನು ಸೆಟ್ ಮಾಡುತ್ತದೆ ಅಥವಾ ಬದಲಾಯಿಸುತ್ತದೆ.getAttribute(name): ಅಟ್ರಿಬ್ಯೂಟ್ ಮೌಲ್ಯವನ್ನು ಪಡೆಯುತ್ತದೆ.removeAttribute(name): ಅಟ್ರಿಬ್ಯೂಟ್ ಅನ್ನು ಡಿಲೀಟ್ ಮಾಡುತ್ತದೆ.hasAttribute(name): ಅಟ್ರಿಬ್ಯೂಟ್ ಅಸ್ತಿತ್ವದಲ್ಲಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ.
ಪ್ರೊ ಟಿಪ್ (Pro tip): ಹಳೆಯ ಕ್ಲಾಸ್ಗಳನ್ನು ತೆಗೆದುಹಾಕದೆ ಹೊಸ ಕ್ಲಾಸ್ ಸೇರಿಸಲು classList.add() ಬಳಸಿ. setAttribute() ಇಡೀ ಮೌಲ್ಯವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ.
- ಎಲಿಮೆಂಟ್ಗಳನ್ನು ತೆಗೆದುಹಾಕುವುದು (Delete) ಪೇಜ್ನಿಂದ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಡಿಲೀಟ್ ಮಾಡಲು ಇದನ್ನು ಬಳಸಿ:
remove()
CRUD ಫ್ಲೋನ ಸಾರಾಂಶ:
- Create:
createElement() - Update:
innerText = "New text" - Add:
appendChild() - Delete:
remove()
ಈ ವಿಧಾನಗಳಲ್ಲಿ ಪರಿಣತಿಯನ್ನು ಪಡೆಯುವುದರಿಂದ ನೀವು ಟು-ಡೂ ಲಿಸ್ಟ್ಗಳು (to-do lists) ಅಥವಾ ಕ್ಯಾಲ್ಕುಲೇಟರ್ಗಳಂತಹ ಇಂಟರಾಕ್ಟಿವ್ ಆಪ್ಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು. ಇದು ಫ್ರಂಟ್-ಎಂಡ್ ಡೆವಲಪ್ಮೆಂಟ್ (front-end development) ಗಾಗಿ ಅತ್ಯಗತ್ಯ ಕೌಶಲ್ಯವಾಗಿದೆ.
ಮೂಲ (Source): https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka