DOM CRUD ਕਾਰਜ
Document Object Model (DOM) ਤੁਹਾਡੇ HTML ਲਈ ਇੱਕ ਟ੍ਰੀ (tree) ਸਟ੍ਰਕਚਰ ਹੈ। JavaScript ਇਸਦੀ ਵਰਤੋਂ ਪੇਜ ਦੇ ਹਰ ਐਲੀਮੈਂਟ (element), ਐਟਰੀਬਿਊਟ (attribute) ਅਤੇ ਟੈਕਸਟ ਨੂੰ ਐਕਸੈਸ ਕਰਨ ਅਤੇ ਬਦਲਣ ਲਈ ਕਰਦਾ ਹੈ।
ਜਦੋਂ ਤੁਸੀਂ ਕਿਸੇ ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਦੇ ਹੋ ਅਤੇ ਪੇਜ ਬਿਨਾਂ ਰਿਫ੍ਰੈਸ਼ ਕੀਤੇ ਅਪਡੇਟ ਹੋ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ DOM ਮੈਨੀਪੂਲੇਸ਼ਨ (manipulation) ਨੂੰ ਕੰਮ ਕਰਦੇ ਹੋਏ ਦੇਖਦੇ ਹੋ।
ਇੱਥੇ ਦੱਸਿਆ ਗਿਆ ਹੈ ਕਿ ਤੁਸੀਂ CRUD (Create, Read, Update, Delete) ਕਾਰਜ ਕਿਵੇਂ ਕਰ ਸਕਦੇ ਹੋ।
- Read: ਐਲੀਮੈਂਟਸ ਨੂੰ ਐਕਸੈਸ ਕਰਨਾ (Accessing Elements) ਆਪਣੇ ਪੇਜ 'ਤੇ ਐਲੀਮੈਂਟਸ ਲੱਭਣ ਲਈ ਇਹਨਾਂ ਮੈਥਡਸ (methods) ਦੀ ਵਰਤੋਂ ਕਰੋ:
- getElementById()
- getElementsByClassName()
- getElementsByTagName()
- querySelector()
- querySelectorAll()
- Create: ਨਵੇਂ ਐਲੀਮੈਂਟਸ ਬਣਾਉਣਾ (Making New Elements) ਤੁਸੀਂ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਨਵੇਂ HTML ਐਲੀਮੈਂਟਸ ਬਣਾ ਸਕਦੇ ਹੋ।
- createElement(): ਮੈਮੋਰੀ ਵਿੱਚ ਇੱਕ ਨਵਾਂ ਟੈਗ ਬਣਾਉਂਦਾ ਹੈ।
- append(): ਪੇਰੈਂਟ (parent) ਦੇ ਅੰਤ ਵਿੱਚ ਕੰਟੈਂਟ ਜੋੜਦਾ ਹੈ।
- appendChild(): ਇੱਕ ਸਿੰਗਲ ਨੋਡ ਨੂੰ ਆਖਰੀ ਚਾਈਲਡ ਵਜੋਂ ਜੋੜਦਾ ਹੈ।
- prepend(): ਪੇਰੈਂਟ (parent) ਦੀ ਸ਼ੁਰੂਆਤ ਵਿੱਚ ਕੰਟੈਂਟ ਜੋੜਦਾ ਹੈ।
- 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), ਕੈਲਕੂਲੇਟਰ ਅਤੇ ਫਾਰਮ ਵੈਲੀਡੇਟਰ ਵਰਗੇ ਇੰਟਰਐਕਟਿਵ ਟੂਲ ਬਣਾ ਸਕਦੇ ਹੋ। ਇਹ ਆਧੁਨਿਕ ਵੈੱਬ ਫਰੇਮਵਰਕਸ ਸਿੱਖਣ ਵੱਲ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਕਦਮ ਹੈ।
Source: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka
Optional learning community: https://t.me/GyaanSetuAi