DOM — HTML থেকে জীবন্ত গাছ: খোঁজা, পড়া আর বদলানো

১ · HTML লেখা থেকে জীবন্ত গাছ — DOM আসলে কী

মডিউল ৫ পর্যন্ত আমাদের বেশিরভাগ কোড চলেছে console-এ — হিসাব করেছে, ডেটা এনেছে, ফল লিখেছে। কিন্তু JavaScript জন্মেছিল একটি কাজের জন্য: ওয়েবপাতাকে জীবন্ত করা। “কার্টে যোগ করুন” চাপলে কোণের সংখ্যা ১ বাড়বে, পণ্য শেষ হলে নামের ওপর দাগ পড়বে, খোঁজার শব্দটি হলুদ হবে। এই মডিউলে আমরা ব্রাউজারের ভেতরে ঢুকব, আর প্রথম প্রশ্নটি সবচেয়ে মৌলিক: JavaScript পাতার সাথে কথা বলে কোন পথে?

পর্ব ০২-এ এর উত্তরের একটি ঝলক দেখেছেন। ব্রাউজার HTML ফাইলটি লেখা হিসেবে রেখে দেয় না। ফাইলের বাইট পড়ে, ট্যাগ চেনে, আর প্রতিটি ট্যাগ ও প্রতিটি লেখার টুকরোকে মেমরিতে একটি object বানায়। কে কার ভেতরে, সেই অনুযায়ী object-গুলো একটি গাছে সাজানো হয়। এই গাছের নাম Document Object Model — সংক্ষেপে DOM. নামটিই সংজ্ঞা: ডকুমেন্টকে (পাতাকে) object দিয়ে প্রকাশ করার একটি নকশা (model).

প্রতিটি বিন্দু একটি node — আর node-এর ধরন আছে

গাছের প্রতিটি বিন্দুকে বলে node. সব node এক রকম নয়; প্রত্যেকের একটি nodeType সংখ্যা আছে। দৈনন্দিন কাজে চার ধরন চিনলেই চলে:

তৃতীয় সারিটি নতুনদের সবচেয়ে বেশি অবাক করে। আপনি HTML সুন্দর করে সাজাতে প্রতিটি <li> নতুন লাইনে, দুই ঘর ভেতরে লেখেন। ব্রাউজারের কাছে সেই নতুন লাইন আর ফাঁকা ঘরও লেখা — তাই সেগুলোও একটি করে text node হয়ে গাছে ঢোকে। পর্দায় এগুলো চোখে পড়ে না (CSS সাধারণত পরপর ফাঁকা জায়গা এক করে দেখায়), কিন্তু JavaScript-এর কাছে এগুলো আসল node. নিচের ছোট একটি কার্ট-তালিকা ধাপে ধাপে গাছ হয়ে উঠতে দেখুন:

1<ul id="cart">2  <li>চা</li>3  <!-- অফার -->4  <li class="hot">শিঙাড়া</li>5</ul>

ul#cart   nodeType 1 (element)

ul#cart
├─ #text "\n  "   nodeType 3
└─ li ─ #text "চা"

ul#cart
├─ #text "\n  "
├─ li ─ #text "চা"
├─ #text "\n  "
└─ #comment " অফার "   nodeType 8

ul#cart
├─ #text "\n  "
├─ li ─ #text "চা"
├─ #text "\n  "
├─ #comment " অফার "
├─ #text "\n  "
├─ li.hot ─ #text "শিঙাড়া"
└─ #text "\n"

ul.childNodes.length       → 7  (সব node)
ul.children.length         → 2  (শুধু element)
ul.firstChild              → #text "\n  "
ul.firstElementChild       → li ("চা")
li.nextElementSibling      → li.hot
li.hot.parentElement       → ul#cart

তিনটি আলাদা জিনিস: HTML ফাইল, DOM আর DevTools

“View Page Source” (Ctrl+U) দেখায় সার্ভার থেকে আসা আসল HTML লেখা — যা কখনো বদলায় না। DevTools-এর Elements ট্যাব দেখায় এই মুহূর্তের DOM — JavaScript যা যোগ বা বদল করেছে, সবসহ। আর এই দুইয়ের মধ্যে প্রথম পার্থক্য তৈরি হয় JavaScript চলার আগেই: ব্রাউজার ভুল বা অসম্পূর্ণ HTML নিজে মেরামত করে। যেমন <table><tr>… লিখলে DOM-এ মাঝখানে একটি <tbody> বসে যায় — ফলে table > tr selector কিছুই খুঁজে পায় না। <p>-এর ভেতরে <div> লিখলে parser আগেই <p> বন্ধ করে দেয়। তাই নিয়মটি মনে রাখুন: JavaScript যা দেখে, তা DevTools-এর Elements ট্যাব — Page Source নয়।

document — গাছের মাথা আর প্রবেশপথ

ব্রাউজার প্রতিটি পাতার জন্য একটি document object দেয় — একটি global variable, যা গাছের শিকড়। document.documentElement হলো <html>, document.head আর document.body নামেই পাওয়া যায়, document.title পাতার শিরোনাম। মনে রাখুন, DOM JavaScript ভাষার অংশ নয় — এটি ব্রাউজারের দেওয়া একটি Web API. তাই Node.js-এ document নেই; সার্ভারে HTML পড়তে হলে jsdom-এর মতো library লাগে।

২ · element খোঁজা — id, CSS selector, closest আর matches

কিছু বদলানোর আগে সেটিকে খুঁজে পেতে হবে। পুরোনো আর নতুন মিলিয়ে কয়েকটি উপায় আছে, তবে আজকের কোডে তিনটিই প্রায় সব কাজ সারে:

querySelector আর querySelectorAll যেকোনো CSS selector বোঝে — #id, .class, [data-id="3"], ul > li:first-child, এমনকি :has(). তাই CSS জানলে খোঁজার নতুন ভাষা শিখতে হয় না। দুটি ব্যবহারিক বিষয় খেয়াল করুন। প্রথমত, এগুলো যেকোনো element-এর ওপর ডাকা যায় — card.querySelector('.price') শুধু ওই কার্ডের ভেতরে খোঁজে, পুরো পাতায় নয়; এতে ভুল element ধরার ঝুঁকি কমে, খোঁজাও দ্রুত হয়। দ্বিতীয়ত, না পেলে null আসে — তাই document.querySelector('#badge').textContent = 3 লাইনটি id-তে বানান ভুল থাকলে TypeError দেবে। যেখানে element না থাকাও স্বাভাবিক, সেখানে ?. (পর্ব ০৮) বা একটি if ব্যবহার করুন।

querySelectorAll যা দেয়, সেটি একটি NodeList — array নয়, কিন্তু length, index, forEach আছে আর for…of চলে। map বা filter চাইলে [...list] বা Array.from(list) করে নিন (পর্ব ১৫, ১৭)।

closest আর matches — ওপরের দিকে খোঁজা আর পরীক্ষা করা

el.closest('.card') element থেকে শুরু করে ওপরের দিকে (নিজে, তারপর parent, তারপর তার parent…) প্রথম যেটি selector মেলে, সেটি দেয়; না পেলে null. একটি কার্ডের ভেতরের বোতাম চাপা হলে “কোন কার্ড?” জানার এটিই সবচেয়ে পরিষ্কার উপায় — পর্ব ৩৮-এর event delegation-এর ভিত্তিও এটি। el.matches('.sold-out') শুধু হ্যাঁ/না বলে: এই element কি selector-টি মেলে? দুটোই একই CSS selector-এর ভাষায় কথা বলে।

৩ · live আর static তালিকা, আর গাছে চলাফেরা

টেবিলের শেষ কলামটি নিরীহ দেখায়, কিন্তু এর পেছনে DOM-এর সবচেয়ে বিখ্যাত বাগগুলোর একটি লুকিয়ে আছে। querySelectorAll যে তালিকা দেয়, সেটি ডাকার মুহূর্তের একটি ছবি — পরে DOM বদলালেও তালিকা বদলায় না। কিন্তু getElementsByClassName আর getElementsByTagName যে HTMLCollection দেয়, সেটি live: প্রতিবার পড়ার সময় গাছ থেকে নতুন করে হিসাব হয়। এখন ধরুন, একটি ফিল্টার সব পণ্য থেকে item class সরাতে চায়:

1const live = document.getElementsByClassName('item');2for (let i = 0; i < live.length; i++) {3  live[i].classList.remove('item');4}5// ঠিক: const snap = document.querySelectorAll('.item');6//       for (const el of snap) el.classList.remove('item');

গাছে চলাফেরা — parent, children আর sibling

একটি element হাতে থাকলে তার আশেপাশে যাওয়াকে বলে DOM traversal. element-কেন্দ্রিক property-গুলো মনে রাখুন: parentElement (বাবা-মা), children (সন্তানেরা, live HTMLCollection), firstElementChild/lastElementChild, আর nextElementSibling/previousElementSibling (ভাই-বোন)। এদের “Element”-হীন যমজ (childNodes, firstChild, nextSibling) text আর comment node-ও গোনে — ধাপ ১-এর স্টেপারে দেখেছেন, সেখানে প্রথম সন্তানই ছিল ফাঁকা জায়গার একটি text node. পুরোনো টিউটোরিয়াল বা AI-এর কোডে el.firstChild.textContent দেখলে সতর্ক হোন — HTML-এ একটি নতুন লাইন যোগ হলেই এটি ভেঙে যায়।

এবার সব এক জায়গায় চালিয়ে দেখুন। নিচের কোড চালালে ওপরে তিনটি পণ্যের তালিকা আর একটি ইনপুট বক্স দেখা যাবে; কোডটি node গোনে, গাছে চলাফেরা করে, live তালিকার ফাঁদটি নিজের চোখে দেখায়, আর শেষে attribute ও property-র পার্থক্যের একটি ঝলক দেয় (অংশ ৫-এ বিস্তারিত):

const ul = document.getElementById('products');
console.log('childNodes:', ul.childNodes.length, '| children:', ul.children.length);
const first = ul.firstChild;                            // প্রথম node — কোনো li নয়!
console.log('firstChild:', first.nodeType, JSON.stringify(first.textContent));
const second = ul.firstElementChild.nextElementSibling;
console.log(second.textContent, second.dataset.price, second.closest('ul').id, second.matches('.item'));

const live = document.getElementsByClassName('item');   // live HTMLCollection
const snap = document.querySelectorAll('.item');        // static NodeList
for (let i = 0; i < live.length; i++) live[i].classList.remove('item');
console.log('ভুল loop-এর পরে live:', live.length, '| snap:', snap.length);
for (const li of snap) li.classList.add('item');        // স্থির ছবি ধরে চললে নিরাপদ
console.log('ঠিক loop-এর পরে live:', live.length);

const qty = document.querySelector('#qty');
qty.value = '3';                                        // যেন ব্যবহারকারী 3 লিখলেন
console.log('property:', qty.value, '| attribute:', qty.getAttribute('value'));

৪ · লেখা পড়া ও বদলানো — textContent, innerText আর innerHTML

element-এর ভেতরের জিনিস বদলানোর তিনটি জনপ্রিয় property আছে। নাম কাছাকাছি, কিন্তু আচরণ — আর ঝুঁকি — একেবারে আলাদা।

শেষ কার্ডের সতর্কবার্তাটি কেন এত জোরালো, ধাপে ধাপে দেখুন। ধরুন একটি পণ্যের রিভিউ বক্সে কেউ নাম হিসেবে লিখলেন <img src=x onerror=…> (“…”-এর জায়গায় কোনো কোড)। আপনার কোড সেই নাম পাতায় দেখায়:

const name = '<img src=x onerror=…>';   // রিভিউ ফর্ম, URL, API — যেকোনো জায়গা

box.innerHTML = `<p>${name}</p>`;   // ✘
DOM: p
     └─ img  src="x"  onerror="…"   ← আসল element!

ব্রাউজার "x" ছবি নামাতে চায় → ব্যর্থ → error event
→ onerror-এর লেখা কোড হিসেবে চলে
  আপনার পাতার সব ক্ষমতা নিয়ে: DOM, ব্যবহারকারীর session, API কল

p.textContent = name;   // ✔
DOM: p
     └─ #text "<img src=x onerror=…>"
পর্দায় হুবহু লেখাটি দেখা যায়; কোনো element নেই, কিছু চলে না

১. লেখা দেখাতে: textContent, createElement + append
২. সত্যিই HTML দরকার (যেমন rich text): আগে sanitize
   (DOMPurify, বা যেখানে সমর্থিত — setHTML / Sanitizer API)
৩. সাথে CSP — পর্ব ৪৩

একটি বাস্তব উদাহরণ: খোঁজার শব্দটি ফলাফলে হলুদ করে দেখানো। সহজ (আর ভুল) পথ হলো name.replace(q, `<mark>${q}</mark>`) করে innerHTML-এ বসানো — তাহলে পণ্যের নাম আর খোঁজার শব্দ, দুটোই HTML হিসেবে পড়া হয়, অথচ শব্দটি ব্যবহারকারী টাইপ করেছেন। নিরাপদ পথ: নামটিকে তিন টুকরো করুন — মিলের আগে, মিল, মিলের পরে — আর প্রথম ও শেষ টুকরো text হিসেবে, মাঝেরটি একটি <mark> element-এর textContent হিসেবে বসান। অংশ ৬-এর কোডে ঠিক এটিই করা হয়েছে।

৫ · attribute বনাম property, dataset, classList আর style

HTML-এর attribute আর object-এর property — দুটি আলাদা জগৎ

HTML-এ লেখা <input id="qty" value="1">-এর value="1" হলো একটি attribute — markup-এর অংশ, সবসময় string. Parser যখন এখান থেকে element object বানায়, তখন object-এ DOM property তৈরি হয় — যেমন input.value, input.id, input.checked. বেশিরভাগ ক্ষেত্রে দুটি একে অপরকে প্রতিফলিত করে: el.id = 'x' করলে attribute-ও বদলায়। কিন্তু কিছু ক্ষেত্রে নয়, আর সবচেয়ে গুরুত্বপূর্ণ ব্যতিক্রম ফর্মের ঘর:

• value attribute = শুরুর (default) মান। getAttribute('value') আর input.defaultValue এটি দেয়।
• value property = এই মুহূর্তের মান। ব্যবহারকারী টাইপ করলে বা কোড input.value = '3' লিখলে শুধু এটি বদলায় — ওপরের কোডের শেষ লাইন ঠিক এটিই দেখিয়েছে। ফর্ম reset করলে property আবার attribute-এর মানে ফেরে।
• টাইপও আলাদা হতে পারে। checkbox.checked একটি boolean, কিন্তু attribute checked-এর শুধু থাকা-না-থাকা আছে। a.href property পূর্ণ URL দেয় (https://…/cart), getAttribute('href') দেয় যা লেখা ছিল (/cart).

নিয়মটি সরল: অবস্থা পড়তে-লিখতে property, markup-এ যা লেখা বা নিজের বানানো attribute-এ getAttribute/setAttribute. ফর্মের পুরো গল্প পর্ব ৩৯-এ।

dataset — নিজের ডেটা element-এ বেঁধে রাখা

HTML নিজের তথ্য রাখার জন্য data- দিয়ে শুরু হওয়া attribute অনুমোদন করে: <li data-id="7" data-unit-price="450">. JavaScript-এ এগুলো পাওয়া যায় el.dataset দিয়ে — li.dataset.id, আর হাইফেন-নাম camelCase হয়ে li.dataset.unitPrice. মান সবসময় string; হিসাবের আগে Number() করুন। কোন বোতাম কোন পণ্যের, কোন সারি কোন id-এর — এমন ছোট পরিচয় রাখার জন্য dataset আদর্শ। তবে পুরো অ্যাপের state DOM-এ রাখবেন না; state থাকুক JavaScript-এর data-তে, DOM শুধু তার প্রতিচ্ছবি (পর্ব ২১-এর “পাতা = f(state)”).

classList বনাম style — চেহারা বদলানোর দুই পথ

একটি পণ্য স্টক শেষ হলে ধূসর আর কাটা দাগসহ দেখাতে চান। দুই উপায়:

// ✘ inline style: চেহারার নিয়ম JavaScript-এ ছড়িয়ে পড়ে
li.style.opacity = '0.5';
li.style.textDecoration = 'line-through';

// ✔ class: চেহারা CSS-এ, JavaScript শুধু অবস্থা জানায়
li.classList.toggle('sold-out', product.stock === 0);   // শর্ত সত্য হলে যোগ, মিথ্যা হলে বাদ

classList-এর চারটি method মুখস্থ রাখুন: add, remove, toggle (দ্বিতীয় argument দিলে জোর করে যোগ বা বাদ), আর contains. class-এর পথ ভালো কেন? চেহারার সব নিয়ম এক জায়গায় (CSS ফাইলে) থাকে, ডিজাইনার JavaScript না ছুঁয়েই রং বদলাতে পারেন, dark mode বা media query স্বাভাবিকভাবে কাজ করে, আর .sold-out নামটি নিজেই বলে দেয় অবস্থাটি কী। inline style-এর জায়গা আছে শুধু সত্যিকারের গতিশীল মানে — একটি progress bar-এর width: 37%, বা টেনে আনা জিনিসের অবস্থান। সেখানেও CSS custom property ভালো বিকল্প: bar.style.setProperty('--done', '37%'), আর বাকি নিয়ম CSS-এ।

৬ · নতুন element বানানো, বসানো আর data থেকে তালিকা আঁকা

তৈরি আর বসানোর টুলবক্স

document.createElement('li') একটি নতুন element বানায় — কিন্তু এটি তখনো গাছের বাইরে, পর্দায় নেই। গাছে বসানোর আধুনিক method-গুলো একটি নির্দিষ্ট element-এর সাপেক্ষে কাজ করে, আর সবগুলো একসাথে একাধিক node বা string নেয় (string গেলে সেটি text node হয় — HTML নয়):

পুরোনো কোডে appendChild, insertBefore, removeChild দেখবেন — এগুলো একবারে একটিমাত্র node নেয় আর string নেয় না; নতুন কোডে ওপরের method-গুলোই পরিষ্কার। একটি সূক্ষ্ম নিয়ম: একটি node গাছে একবারই থাকতে পারে। ইতিমধ্যে গাছে থাকা node-কে append করলে সেটি কপি হয় না, সরে যায়।

কপি দরকার হলে node.cloneNode(true) — true মানে পুরো শাখাসহ (deep) কপি। খেয়াল রাখুন, addEventListener দিয়ে লাগানো listener কপি হয় না, আর id থাকলে সেটিও কপি হয় — একই id দুবার থাকলে পাতা অবৈধ হয়ে যায়।

insertAdjacentHTML(position, html) চার জায়গার একটিতে ('beforebegin', 'afterbegin', 'beforeend', 'afterend') HTML string বসায়। innerHTML += …-এর চেয়ে এটি ভালো, কারণ বিদ্যমান সন্তানদের মুছে নতুন করে বানায় না (+= পুরো ভেতরটা আবার parse করে, পুরোনো listener আর ইনপুটের লেখা হারায়)। কিন্তু এটিও HTML parse করে — তাই innerHTML-এর সব নিরাপত্তা-সতর্কতা এখানেও খাটে।

<template> — বারবার আসা markup-এর ছাঁচ

একটি নোটিশ বোর্ডের প্রতিটি নোটিশে শিরোনাম, তারিখ আর একটি “পড়েছি” বোতাম আছে। প্রতিবার createElement দিয়ে পাঁচটি element বানানো ক্লান্তিকর, আর innerHTML-এর string-এ ব্যবহারকারীর লেখা ঢোকানো বিপজ্জনক। মাঝামাঝি সমাধান <template>:

<template id="notice-tpl">
  <article class="notice">
    <h3 class="title"></h3>
    <time class="date"></time>
    <button type="button">পড়েছি</button>
  </article>
</template>

<template>-এর ভেতরের জিনিস ব্রাউজার parse করে, কিন্তু পর্দায় দেখায় না, ভেতরের ছবি নামায় না, script চালায় না — একটি নিষ্ক্রিয় ছাঁচ। tpl.content একটি DocumentFragment; প্রতিটি নোটিশের জন্য tpl.content.firstElementChild.cloneNode(true) করে কপি নিন, তারপর querySelector('.title').textContent = notice.title দিয়ে ফাঁকা ঘরগুলো ভরুন। Markup থাকল HTML-এ (যেখানে তা পড়া সহজ), ব্যবহারকারীর ডেটা গেল textContent দিয়ে (যেখানে তা নিরাপদ) — দুই দিকেরই সুবিধা।

DocumentFragment — অনেক node একবারে

DocumentFragment হলো একটি হালকা, গাছের বাইরের পাত্র। এতে ১০০টি <li> জমিয়ে তারপর একবার list.append(frag) করলে fragment নিজে গাছে ঢোকে না — তার সব সন্তান একসাথে সরে যায়, আর fragment খালি হয়ে যায়। এতে live DOM-এ একটিমাত্র পরিবর্তন হয়। (আধুনিক ব্রাউজারে এর গতি-সুবিধা কতটা, তা নিয়ে একটি সূক্ষ্ম সত্য আছে — অংশ ৭-এ।)

data থেকে তালিকা — পর্ব ২১-এর render নকশা, এবার পূর্ণ রূপে

পর্ব ২১-এর খরচের খাতায় নিয়ম ছিল “পাতা = f(state)” — data বদলালে পুরো তালিকা নতুন করে আঁকা। এবার সেই নকশায় এই পর্বের সব টুল এক জায়গায়: template থেকে কপি, dataset-এ id, textContent-এ নাম আর দাম, স্টক শেষ হলে class আর disabled বোতাম, খোঁজার শব্দে নিরাপদ <mark>, fragment-এ জমিয়ে একবারে বসানো, আর কার্টের ব্যাজে সংখ্যা। চালানোর পরে ওপরের পাতায় “কার্টে যোগ” বোতামগুলো নিজে চেপে দেখুন — ব্যাজ বাড়বে:

const products = [
  { id: 1, name: 'জামদানি শাড়ি', price: 4500, stock: 3 },
  { id: 2, name: 'খাদি পাঞ্জাবি', price: 1800, stock: 0 },
  { id: 3, name: 'নকশি কাঁথা', price: 3200, stock: 5 },
];
const [list, badge, row] = ['#list', '#badge', '#row'].map((s) => document.querySelector(s));
function withMark(text, q) {                  // শুধু text আর <mark> — HTML parse নেই
  const i = q ? text.indexOf(q) : -1;
  if (i < 0) return [text];
  const mark = Object.assign(document.createElement('mark'), { textContent: q });
  return [text.slice(0, i), mark, text.slice(i + q.length)];
}
function render(q = '') {
  const frag = document.createDocumentFragment();
  for (const p of products) {
    const li = row.content.firstElementChild.cloneNode(true);
    li.dataset.id = p.id;
    li.querySelector('.name').append(...withMark(p.name, q));
    li.querySelector('.price').textContent = `৳${p.price}`;
    li.classList.toggle('sold-out', p.stock === 0);
    li.querySelector('button').disabled = p.stock === 0;
    frag.append(li);
  }
  list.replaceChildren(frag);                 // live DOM-এ একবারই হাত
}
list.addEventListener('click', (e) => { if (e.target.closest('button')) badge.textContent = +badge.textContent + 1; });
render('কা');
for (const id of [1, 3]) list.querySelector(`[data-id="${id}"] button`).click();
console.log('li:', list.children.length, '| স্টক শেষ:', list.querySelectorAll('.sold-out').length, '| mark:', list.querySelector('mark').textContent, '| কার্ট:', badge.textContent);

৭ · পারফরম্যান্স — reflow, repaint আর layout thrashing

পর্ব ০২-এ দেখেছেন, DOM থেকে পর্দার পিক্সেল পর্যন্ত কয়েকটি ধাপ: style হিসাব → layout (প্রতিটি বাক্সের মাপ আর অবস্থান; একে reflow-ও বলে) → paint (পিক্সেলে রং, লেখা; বদল হলে বলে repaint) → composite. JavaScript DOM বদলালে কোন ধাপ আবার চলবে, তা নির্ভর করে কী বদলেছে তার ওপর: লেখা, মাপ বা font বদলালে layout থেকে শুরু; শুধু রং বদলালে layout বাদ, শুধু paint; আর transform বা opacity প্রায়ই শুধু composite.

ব্রাউজার এখানে বুদ্ধিমান: আপনার প্রতিটি লেখার সাথে সাথে layout করে না। সে পরিবর্তনগুলো “ময়লা” (dirty) চিহ্ন দিয়ে জমিয়ে রাখে, আর পরের frame আঁকার আগে একবার সব হিসাব করে। তাই একটি loop-এ ১০০টি append করলেও সাধারণত layout হয় একবার। সমস্যা শুরু হয় যখন আপনি লেখার পরেই মাপ পড়েন — offsetHeight, offsetWidth, getBoundingClientRect(), scrollTop, এমনকি innerText. সঠিক উত্তর দিতে ব্রাউজারকে তখনই, সাথে সাথে, জমানো সব layout করতে হয় — একে বলে forced synchronous layout. loop-এর প্রতিটি ঘুরে লেখা-পড়া-লেখা-পড়া হলে প্রতিবারই জোর করে layout — এটিই layout thrashing:

1// ✘ প্রতিটি ঘুরে পড়া, তারপর লেখা2for (const card of cards) {3  card.style.height = box.offsetHeight / 4 + 'px';4}5// ✔ আগে একবার পড়া, তারপর সব লেখা6const h = box.offsetHeight / 4;7for (const card of cards) card.style.height = h + 'px';

আরও তিনটি সস্তা অভ্যাস: loop-এর ভেতরে বারবার document.querySelector না করে loop-এর আগে একবার খুঁজে রাখুন; হাজার হাজার সারির তালিকায় শুধু পর্দায় দেখা অংশ আঁকুন (virtualization) বা CSS content-visibility: auto দিন; আর অ্যানিমেশনে top/left-এর বদলে transform ব্যবহার করুন, যাতে layout ধাপটি বাদ যায়।

৮ · script কখন চলে, accessibility আর framework কখন

script যদি element খুঁজে না পায়

নতুনদের একটি চেনা কষ্ট: document.querySelector('#cart') দেয় null, অথচ HTML-এ #cart স্পষ্ট আছে। কারণ প্রায় সবসময় সময়: <head>-এ রাখা সাধারণ <script> parser থামিয়ে তখনই চলে, যখন <body> এখনো পড়াই হয়নি — গাছে তখনো #cart নেই। পর্ব ০২-এ দেখা সমাধানগুলো এখন DOM-এর চোখে দেখুন:

দুটি event-ও চিনে রাখুন। DOMContentLoaded ঘটে যখন HTML পুরো পড়া শেষ, DOM তৈরি, আর defer script চলে গেছে — ছবি বা iframe নামা শেষ হওয়ার অপেক্ষা ছাড়াই। load (window-এ) ঘটে আরও পরে, যখন ছবি, stylesheet, iframe — সব নামা শেষ। DOM নিয়ে কাজের জন্য প্রথমটিই যথেষ্ট; ছবির আসল মাপ জানতে হলে দ্বিতীয়টি। আজকের সহজ পরামর্শ: script-এ defer বা type="module" দিন, তাহলে আলাদা করে অপেক্ষা করতে হয় না।

accessibility — DOM বদলালে সবার কাছে পৌঁছায় কি?

আপনার DOM শুধু চোখ দিয়ে দেখা হয় না। Screen reader একই গাছ থেকে একটি accessibility tree বানিয়ে পড়ে শোনায়; কিবোর্ড ব্যবহারকারী Tab চেপে চলেন। তাই তিনটি নিয়ম:

• চাপার জিনিস হলে <button>, <div> নয়। button নিজে থেকেই Tab-এ আসে, Enter আর Space-এ চাপা যায়, screen reader বলে “বোতাম”, disabled বোঝে। <div onclick>-এ এর কিছুই নেই — সব হাতে বানাতে হয়, আর প্রায়ই অর্ধেক বানানো হয়। এটিই semantic HTML-এর শক্তি।
• নিজে থেকে বদলানো লেখা জানিয়ে দিন। কার্টের ব্যাজ বা “সেভ হয়েছে” বার্তা নিঃশব্দে বদলালে screen reader ব্যবহারকারী জানতেই পারেন না। পাত্রটিতে aria-live="polite" দিন — পাত্রটি শুরু থেকেই DOM-এ থাকুক, শুধু তার লেখা বদলান।
• ARIA শেষ উপায়, প্রথম নয়। ARIA attribute (role, aria-label, aria-expanded) নিজস্ব widget-এর অর্থ জানায়, কিন্তু আচরণ যোগ করে না। প্রথম নিয়ম: যে HTML element কাজটি নিজে পারে, সেটিই ব্যবহার করুন।

framework কখন সাহায্য করে

এই পর্বের render নকশা ছোট পাতায় চমৎকার। কিন্তু অ্যাপ বড় হলে কয়েকটি সমস্যা দেখা দেয়: প্রতিবার পুরো তালিকা নতুন করে আঁকলে ইনপুটে লেখা অর্ধেক কথা, focus আর scroll-এর অবস্থান হারায়; শুধু যা বদলেছে তা হাতে হাতে খুঁজে বদলানো (একে বলে imperative update) কোডকে জটিল করে; আর state ও DOM আলাদা হয়ে যাওয়ার বাগ বাড়ে। React, Vue, Svelte-এর মতো declarative UI framework ঠিক এই কাজটি নেয়: আপনি বলেন “এই state-এ পাতা এমন দেখাবে”, framework হিসাব করে DOM-এ ন্যূনতম কী বদলাতে হবে। কিন্তু তারা সবাই শেষ পর্যন্ত এই পর্বের createElement, textContent, classList-ই ডাকে — DOM বোঝা ছাড়া framework-এর বাগ বোঝা যায় না। কোনটি কখন, তা পর্ব ৫৪-এ।

৯ · AI-এর যুগে — AI-এর লেখা DOM কোড যাচাই করা

“একটি product list বানিয়ে দাও” বললে AI কয়েক সেকেন্ডে কাজ করা কোড দেয় — আর সেই কোড ডেমোতে প্রায় সবসময় ঠিক দেখায়। কারণ DOM কোডের সবচেয়ে বড় ভুলগুলো ডেমোতে ধরা পড়ে না: নিরাপত্তার ভুল ধরা পড়ে যখন কেউ ইচ্ছা করে অদ্ভুত লেখা পাঠায়, accessibility-র ভুল ধরা পড়ে যখন একজন screen reader ব্যবহারকারী আসেন, আর গতির ভুল ধরা পড়ে হাজার সারিতে, দুর্বল ফোনে। AI-এর কোডে যে পাঁচটি ভুল বারবার দেখা যায়:

AI-এর লেখা DOM কোড হাতে পেলে — যাচাইয়ের চেকলিস্ট

• innerHTML/insertAdjacentHTML খুঁজুন — প্রতিটিতে কি শুধু আপনার নিজের স্থির markup, নাকি বাইরের ডেটা?
• নামে <b>পরীক্ষা</b> লিখে দেখুন — পর্দায় মোটা হরফ এলে ডেটা HTML হিসেবে পড়া হচ্ছে
• শুধু কিবোর্ড দিয়ে (Tab, Enter, Space) সব কাজ করা যায়; চাপার সব জিনিস আসল <button> বা <a>
• চেহারার বদল class দিয়ে; inline style শুধু সত্যিকারের গতিশীল মানে
• firstChild/childNodes-এর জায়গায় element-কেন্দ্রিক property; live তালিকায় loop করে বদলানো নেই
• loop-এ খোঁজা বা মাপ পড়া নেই; Performance প্যানেলে “Forced reflow” সতর্কতা নেই
• script defer বা type="module"; নিজে থেকে বদলানো বার্তায় aria-live