DOM CRUD ਕਾਰਜ
ਡੌਕੂਮੈਂਟ ਆਬਜੈਕਟ ਮਾਡਲ (DOM) ਉਹ ਤਰੀਕਾ ਹੈ ਜਿਸ ਰਾਹੀਂ ਬ੍ਰਾਊਜ਼ਰ HTML ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ। ਇਹ ਹਰ ਐਲੀਮੈਂਟ, ਐਟਰੀਬਿਊਟ ਅਤੇ ਟੈਕਸਟ ਦੇ ਹਿੱਸੇ ਨੂੰ ਇੱਕ ਆਬਜੈਕਟ ਵਿੱਚ ਬਦਲ ਦਿੰਦਾ ਹੈ। 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) ਤੁਸੀਂ ਇਹਨਾਂ ਪ੍ਰਾਪਰਟੀਜ਼ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਮੌਜੂਦਾ ਸਮੱਗਰੀ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹੋ:
- innerText: ਸਿਰਫ਼ ਦਿਖਾਈ ਦੇਣ ਵਾਲੇ ਟੈਕਸਟ ਨੂੰ ਬਦਲਦਾ ਹੈ।
- textContent: ਲੁਕਵੇਂ ਟੈਕਸਟ ਸਮੇਤ ਸਾਰੇ ਟੈਕਸਟ ਨੂੰ ਬਦਲਦਾ ਹੈ।
- innerHTML: ਸਮੱਗਰੀ ਨੂੰ ਬਦਲਦਾ ਹੈ ਅਤੇ ਤੁਹਾਨੂੰ HTML ਟੈਗਸ ਜੋੜਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।
- ਐਟਰੀਬਿਊਟਸ ਨਾਲ ਕੰਮ ਕਰਨਾ (Update) ਐਟਰੀਬਿਊਟਸ ਐਲੀਮੈਂਟਸ ਬਾਰੇ ਵਾਧੂ ਜਾਣਕਾਰੀ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ।
- setAttribute(name, value): ਇੱਕ ਐਟਰੀਬਿਊਟ ਸੈੱਟ ਕਰਦਾ ਹੈ ਜਾਂ ਬਦਲਦਾ ਹੈ।
- getAttribute(name): ਇੱਕ ਐਟਰੀਬਿਊਟ ਦੀ ਵੈਲਯੂ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ।
- removeAttribute(name): ਇੱਕ ਐਟਰੀਬਿਊਟ ਨੂੰ ਡਿਲੀਟ ਕਰਦਾ ਹੈ।
- hasAttribute(name): ਚੈੱਕ ਕਰਦਾ ਹੈ ਕਿ ਕੋਈ ਐਟਰੀਬਿਊਟ ਮੌਜੂਦ ਹੈ ਜਾਂ ਨਹੀਂ।
ਪ੍ਰੋ ਟਿਪ: ਪੁਰਾਣੀਆਂ ਕਲਾਸਾਂ ਨੂੰ ਹਟਾਏ ਬਿਨਾਂ ਕਲਾਸ ਜੋੜਨ ਲਈ classList.add() ਦੀ ਵਰਤੋਂ ਕਰੋ। setAttribute() ਪੂਰੀ ਵੈਲਯੂ ਨੂੰ ਬਦਲ ਦਿੰਦਾ ਹੈ।
- ਐਲੀਮੈਂਟਸ ਨੂੰ ਹਟਾਉਣਾ (Delete) ਪੇਜ ਤੋਂ ਕਿਸੇ ਐਲੀਮੈਂਟ ਨੂੰ ਡਿਲੀਟ ਕਰਨ ਲਈ, ਵਰਤੋ:
- remove()
CRUD ਫਲੋਅ (flow) ਦਾ ਸਾਰ:
- Create:
createElement() - Update:
innerText = "New text" - Add:
appendChild() - Delete:
remove()
ਇਹਨਾਂ ਮੈਥਡਸ ਵਿੱਚ ਮਾਹਰ ਹੋਣ ਨਾਲ ਤੁਸੀਂ ਟੂ-ਡੂ ਲਿਸਟ (to-do lists) ਜਾਂ ਕੈਲਕੂਲੇਟਰ ਵਰਗੀਆਂ ਇੰਟਰਐਕਟਿਵ ਐਪਸ ਬਣਾ ਸਕਦੇ ਹੋ। ਇਹ ਫਰੰਟ-ਐਂਡ ਡਿਵੈਲਪਮੈਂਟ ਲਈ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਹੁਨਰ ਹੈ।
ਸਰੋਤ: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka