Module ১৪ · DOM আর event: JavaScript পাতাটা ছুঁয়ে দেখে

DOM-এর ছবি: পাতাটা একটা tree, যেটা তোমার code বদলাতে পারে

Freeপড়াlesson ১ / ৯

এই lesson-এ যা শিখবে

DOM কী, বুঝিয়ে বলো: HTML থেকে browser যে object-এর tree বানায়, আর পর্দায় যেটা আঁকে।
querySelector দিয়ে একটা element খুঁজে বের করো, আর textContent দিয়ে ওর লেখা বদলাও।
addEventListener দিয়ে পাতাকে একটা click-এর জবাব দেওয়াও, আর বলো script কেন markup-এর পরে বসে।

Mitu phone-এ একটা রান্নার recipe পড়ছে, নিচের heart-টায় চাপ দিল। Heart-এর পাশের সংখ্যাটা সাথে সাথে 12 থেকে 13 হয়ে গেল। পাতা reload হয়নি, server থেকে নতুন কোনো পাতাও আসেনি। খোলা পাতার ভেতরেই কিছু একটা একটা সংখ্যা বদলে দিয়েছে।

সেই কিছু একটা হলো JavaScript। পাতা load হওয়ার সময় browser ওর HTML একবার পড়েছে। তারপর ওই HTML থেকে object-এর একটা tree বানিয়েছে, আর পর্দা আঁকে সেই tree দেখে। Script tree-র ভেতরে হাত দিয়ে একটা node বদলাতে পারে। Browser বদলটা টের পায়, আর পর্দা আবার আঁকে। এই tree-টাই DOM, মানে Document Object Model।

এতদিন এই track-এর প্রতিটা program চলেছে Node-এ, কোনো পাতা বা পর্দা ছাড়া। এই module ঢুকছে browser-এ। এখানকার প্রতিটা পাতার program চলে lesson-এর পাশের preview-তে: Run চাপো, পাতাটা খুলবে একটা ছোট sandbox করা frame-এ, আর ওর console দেখা যাবে ঠিক নিচে। Judge করা problem-গুলো এখনো চলে Node-এ, তাই ওরা একই রকম tree নিয়ে কাজ করে, সাধারণ object হিসেবে লেখা।

পাতাটা একটা tree

HTML হলো text। এই যে তার একটা ছোট টুকরো, একটা বাজারের list:

<ul id="list">
  <li>rice</li>
  <li>dal</li>
</ul>

Browser এই text পড়ার পরে ওটাকে text হিসেবে রেখে দেয় না। ও object বানায়। ul হয় একটা element object। প্রতিটা li-ও একটা element object, আর ওরা ul-এর child। ভেতরের শব্দগুলো, rice আর dal, হয় text node, নিজের নিজের li-এর child। সবার ওপরেরটা ছাড়া প্রতিটা node-এর ঠিক একজন parent থাকে।

পুরো tree-র মাথায় থাকে document। ওর নিচে html element, আর তার নিচে head আর body। পাতায় যা কিছু দেখো, সব থাকে body-র নিচে কোথাও না কোথাও।

এমন একটা tree সাধারণ JavaScript object দিয়ে সহজেই লেখা যায়। প্রতিটা node একটা object, যার একটা tag আর child-দের একটা list আছে। নিচের program Node-এ চলে, browser ছাড়াই। ও tree-টা print করে, প্রতিটা child তার parent-এর নিচে একটু সরে বসে, ঠিক যেভাবে DevTools-এর Elements pane একটা পাতা দেখায়।

const page = {
  tag: "body",
  children: [
    { tag: "h1", children: [{ text: "Bazar list" }] },
    {
      tag: "ul",
      children: [
        { tag: "li", children: [{ text: "rice" }] },
        { tag: "li", children: [{ text: "dal" }] },
      ],
    },
  ],
};

function show(node, depth) {
  const pad = "  ".repeat(depth);
  if (node.text !== undefined) {
    console.log(pad + '"' + node.text + '"');
    return;
  }
  console.log(pad + "<" + node.tag + ">");
  for (const child of node.children) show(child, depth + 1);
}

show(page, 0);

<body>
  <h1>
    "Bazar list"
  <ul>
    <li>
      "rice"
    <li>
      "dal"

Run in Compiler

আসল DOM-এর আকারও এটাই, শুধু প্রতিটা node-এ আরও অনেক কিছু থাকে। Browser-এর একটা element-এ থাকে ওর tag, attribute, child, parent, style, আর শত শত method। কিন্তু মূল কথা এই program-এরটাই: node, তাদের child, আর প্রত্যেকের একজন parent।

Tree-তে নতুন একটা node জোড়া

পাতা বদলানো মানে tree বদলানো। List-এ তৃতীয় একটা item দিতে script একটা নতুন li object বানায়, আর ওটাকে ul-এর নিচে জুড়ে দেয়। Insert মানে এটুকুই: parent একটা child বেশি পায়, আর child জেনে নেয় কে ওর parent।

নিচে ধাপে ধাপে দেখো, list-এর সাধারণ object version-এ। প্রতিটা box একটা object, আর প্রতিটা তীর এক object থেকে আরেক object-এর দিকে একটা reference। children array নিজেই একটা আলাদা box।

একই ধাপগুলো table-এ, প্রতি ধাপে একটা row।

ধাপ	Line	Changed	কী হলো
1	`const list = { tag: "ul", children: [] };`		list হলো box o1, আর ওর children array ফাঁকা: length 0।
2	`const a = { tag: "li", text: "rice", parent: list };`		a ওপরে ওর parent-কে দেখায়, কিন্তু list এখনো a-কে চেনে না: children 0টা।
3	`list.children.push(a);`	`o2.0`	এখন তীর দুই দিকেই: a হলো list-এর 0 নম্বর child।
4	`const b = { tag: "li", text: "dal", parent: list };`		দ্বিতীয় একটা item, dal, বানানো হলো একই parent দিয়ে।
5	`list.children.push(b);`	`o2.1`	append ঠিক এটাই করে: list-এর এখন 2টা child, ক্রম ধরে।
6	`list.children.splice(0, 1); a.parent = null;`	`o2.0`	সরানো মানে দুটো তীরই কাটা: list-এ থাকে 1টা child, dal, আর a-এর কোনো parent নেই।

মনে রাখার ধাপটা ধাপ 3। একটা node tree-তে আছে কেবল তখনই, যখন ওর parent ওকে child হিসেবে list-এ রাখে। Object বানালেই হয় না। Browser-এ append তোমার হয়ে দুটো অংশই করে দেয়, আর remove দুটোই উল্টে দেয়।

Element খুঁজে বের করা: querySelector

একটা node বদলাতে হলে script-এর আগে ওর একটা reference লাগে। সবচেয়ে কাজের খোঁজার উপায় হলো document.querySelector। ওকে একটা CSS selector দাও, stylesheet যে text ব্যবহার করে ঠিক সেটা, আর ও ফেরত দেবে মেলে এমন প্রথম element-টা, কিছু না মিললে null।

"h1" খোঁজে প্রথম h1।
"#list" খোঁজে সেই element, যার id হলো list।
".price" খোঁজে price class-ওয়ালা প্রথম element।
"#list li" খোঁজে #list-এর ভেতরের প্রথম li।

Selector হলো tree-কে করা একটা প্রশ্ন, আর querySelector উত্তর দিতে tree-র ভেতর দিয়ে হাঁটে। যে সব মিল ফেরত দেয়, সেই querySelectorAll আছে Lesson 02-এ।

লেখাটা বদলানো: textContent

প্রতিটা element-এর একটা textContent property আছে। পড়লে পাওয়া যায় element-এর ভেতরের সব লেখা। লিখলে ভেতরের সবকিছু সরে গিয়ে বসে একটা text node, তোমার string নিয়ে। নিচের পাতা heading আর প্রথম item খুঁজে নেয়, তারপর দুটোই বদলায়। Run চাপো।

<h1>Bazar list</h1>
<ul id="list">
  <li>rice</li>
  <li>dal</li>
</ul>
<p id="note"></p>
<script>
  const title = document.querySelector("h1");
  const first = document.querySelector("#list li");
  console.log("before:", first.textContent);
  title.textContent = "Bazar list for Friday";
  first.textContent = "basmati rice";
  document.querySelector("#note").textContent = "2 items, edited by the script";
</script>

Run in Compiler

পাতায় দেখা যায় নতুন heading, আর প্রথম item হিসেবে "basmati rice"। পাতার নিচের console দেখায় পুরোনো লেখা, rice, কারণ script ওটা বদলানোর আগে পড়েছিল। ওপরের box-এর HTML কিন্তু একটুও বদলায়নি। বদলেছে শুধু tree, আর পর্দা চলে tree-র পেছন পেছন।

শোনা: addEventListener

যে পাতা নিজেকে একবার বদলেই থেমে যায়, সেটা খুব একটা কাজের না। মজার অংশ হলো পাঠকের জবাব দেওয়া। পাঠক click করলে, লিখলে বা কোনো key চাপলে browser একটা event তৈরি করে। Script addEventListener দিয়ে বলে রাখতে পারে, একটা element-এর event হলে ওকে যেন জানানো হয়।

button.addEventListener("click", handler) মানে: এই button-এ যতবার click পড়বে, handler-কে ডাকো। Handler একটা সাধারণ function, একটা callback, হুবহু Module 12-এর callback-গুলোর মতো। Browser ওকে ডাকে পরে, প্রতিটা click-এ একবার, event loop-এর কোনো এক পালায়।

<p>Likes: <span id="likes">12</span></p>
<button id="heart">Like</button>
<script>
  const likes = document.querySelector("#likes");
  const heart = document.querySelector("#heart");
  let count = 12;
  heart.addEventListener("click", () => {
    count = count + 1;
    likes.textContent = String(count);
    console.log("clicked, likes are now", count);
  });
  console.log("listener added");
</script>

Run in Compiler

চালাও, আর button-টায় কয়েকবার click করো। প্রতিটা click-এ সংখ্যা এক করে বাড়ে, আর console প্রতিবার একটা লাইন print করে। খেয়াল করো "listener added" print হয়েছে সবার আগে, কোনো click-এর আগেই। Listener যোগ করলে ওটা চলে না। শুধু function-টা button-এর কাছে রেখে দেওয়া হয়, click আসা পর্যন্ত।

আরও খেয়াল করো count কোথায় থাকে: একটা variable-এ, count। পাতা count দেখায় ঠিকই, কিন্তু script পাতা থেকে ওটা আবার পড়ে নেয় না। এই অভ্যাস কেন জরুরি, Lesson 04 বলবে।

Click-এর যাত্রা: bubbling

Button-এ একটা click মানে ওর চারপাশের সবকিছুতেও click: যে p বা div-এ ও বসে আছে, body, পুরো document। Browser এটা সামলায় event-কে bubble করতে দিয়ে। আগে চলে click পড়া element-এর listener, তারপর ওর parent-এর, তারপর parent-এর parent-এর, একদম ওপর পর্যন্ত।

যে element-এ সত্যিই click পড়েছে, সেটা হলো event-এর target। নিচে একটা click-এর পথ বের করা হলো Node-এ, সাধারণ object-এর একটা tree-তে। প্রতিটা node ওর parent-কে চেনে, তাই পথ মানে parent-এর সূত্র ধরে ওপরে হাঁটা।

const body = { tag: "body", parent: null };
const main = { tag: "main", parent: body };
const card = { tag: "div", parent: main };
const heart = { tag: "button", parent: card };

const route = [];
for (let node = heart; node !== null; node = node.parent) route.push(node.tag);
console.log("target:", heart.tag);
console.log("bubbles through:", route.join(" > "));

target: button
bubbles through: button > div > main > body

Run in Compiler

Bubbling আছে বলেই parent-এর একটা listener ওর সব child-এর click শুনতে পায়। এই কৌশলের নাম delegation, Lesson 02 এটা বানাবে। আপাতত ছবিটা মনে রাখো: event শুরু হয় target থেকে, তারপর ওপরে ওঠে।

Script কোথায় বসবে

Browser পাতা পড়তে পড়তে যখন একটা script-এ পৌঁছায়, তখনই সেটা চলে। ওপরের পাতাগুলো <script> রেখেছে শেষে, markup-এর পরে। এই ক্রমটা জরুরি। Script যখন চলে, ওর ওপরের element-গুলো ততক্ষণে tree-তে তৈরি, তাই querySelector ওদের খুঁজে পায়।

একই script ওপরে বসাও, element-গুলোর আগে, তাহলে querySelector ফেরত দেবে null, কারণ ওই node-গুলো তখনো বানানো হয়নি। চেনা দুটো সমাধান আছে। একটা হলো script শেষে রাখা। আরেকটা হলো DOMContentLoaded event-এর জন্য অপেক্ষা করা, পুরো tree তৈরি হলে যেটা একবার ঘটে। নিচের প্রথম ভুলটা এই bug দেখায়।

এক নজরে DOM

const el = document.querySelector("#list li");   // the first match, or null
el.textContent = "new text";                     // replace what it says, as plain text
const item = document.createElement("li");       // a new element, not in the page yet
list.append(item);                               // attach it as the last child
el.addEventListener("click", (event) => {        // call this on every click
  console.log(event.target);                     // the element really clicked
});

Example 1: এমন একটা counter, যেটা শূন্যের নিচে নামে না

দুটো button একটা সংখ্যা বদলায়। সংখ্যাটা থাকে একটা variable-এ, আর একটা ছোট function ওটা আঁকে। প্রতিটা handler আগে variable বদলায়, তারপর আঁকার function ডাকে। এতে পাতা আর variable সবসময় মিলে থাকে।

<style>
  .count { font-size: 2rem; margin: 0.5rem 0; }
</style>
<p class="count" id="count">0</p>
<button id="minus">-1</button>
<button id="plus">+1</button>
<script>
  let count = 0;
  const shown = document.querySelector("#count");
  function draw() {
    shown.textContent = String(count);
  }
  document.querySelector("#plus").addEventListener("click", () => {
    count++;
    draw();
  });
  document.querySelector("#minus").addEventListener("click", () => {
    if (count > 0) count--;
    draw();
  });
  draw();
</script>

আগে -1 চাপো: কিছুই বদলায় না, কারণ handler শূন্যের নিচে নামতে রাজি না। তারপর +1 তিনবার আর -1 একবার চাপো, পাতা দেখাবে 2। নিয়মটা থাকে script-এ, পাতায় না।

Run in Compiler

Example 2: একটা click-এর পথ, tree থেকে পড়া

এই program চলে Node-এ। ও একটা ছোট পাতা বানায় সাধারণ object দিয়ে, প্রত্যেকের একটা parent সহ, আর একটা link-এ click পড়লে bubbling-এর পথ বের করে। কিছু node-এর listener থাকলে click কয়টা listener পর্যন্ত পৌঁছাত, সেটাও গোনে।

function node(tag, parent, listens) {
  return { tag, parent, listens };
}
const body = node("body", null, true);
const nav = node("nav", body, false);
const menu = node("ul", nav, true);
const item = node("li", menu, false);
const link = node("a", item, true);

const route = [];
let heard = 0;
for (let n = link; n !== null; n = n.parent) {
  route.push(n.tag);
  if (n.listens) heard++;
}
console.log(route.join(" > "));
console.log("listeners reached:", heard);

a > li > ul > nav > body
listeners reached: 3

আগে চলে link-এর নিজের listener, তারপর menu-র, তারপর body-র। nav আর li পার হয়ে যায়, ওদের কোনো listener নেই। প্রতিটা click-এ browser ঠিক এভাবেই হাঁটে।

Run in Compiler

এটা কোথায় কাজে লাগে

Chrome DevTools: Elements pane আঁকে চলমান DOM, HTML file না, তাই script যা বদলায় সেটা ওখানে সাথে সাথে দেখা যায়।
GitHub: একটা repository-র star button একটা listener আর একটা request দিয়ে পাতার ভেতরেই count বদলায়, reload ছাড়া।
Gmail: j আর k-এর মতো keyboard shortcut হলো document-এর ওপর keydown listener, যেটা DOM-এর ভেতর দিয়ে একটা highlight সরায়।
Wikipedia: সূচিপত্রের অংশগুলো খোলে আর বন্ধ হয় click listener দিয়ে, যেটা tree বদলায়।

যে ভুলগুলো সবাই করে

১. Element তৈরি হওয়ার আগেই চলা script

<script>
  const heart = document.querySelector("#heart");
  console.log("found:", heart);
  heart.addEventListener("click", () => console.log("liked"));
</script>
<button id="heart">Like</button>

চালাও। Console দেখায় heart হলো null, তারপর null-এর addEventListener পড়তে গিয়ে একটা TypeError। Browser script-এ পৌঁছানোর সাথে সাথেই সেটা চলেছে, আর নিচের button তখনো tree-তে ছিল না। Button-এ click করলে কিছুই হয় না। Script-টা button-এর পরে সরাও, অথবা code-টা একটা DOMContentLoaded listener-এর ভেতরে মুড়ে দাও।

২. ভাবা যে querySelector সবগুলো খুঁজে দেবে

<ul>
  <li>rice</li>
  <li>dal</li>
  <li>oil</li>
</ul>
<script>
  const item = document.querySelector("li");
  item.textContent = item.textContent.toUpperCase();
</script>

বদলায় শুধু "RICE"। querySelector প্রথম মিলটা ফেরত দিয়েই থেমে যায়। প্রতিটা item বদলাতে চাইলে querySelectorAll("li") ব্যবহার করো আর ফলাফলের ওপর loop চালাও, Lesson 02 সেটা দেখায়।

৩. Handler পাঠানোর বদলে ডেকে ফেলা

<button id="go">Go</button>
<script>
  function sayHi() {
    console.log("hi");
  }
  document.querySelector("#go").addEventListener("click", sayHi());
</script>

Console একবার "hi" print করে, load-এর সময়েই, আর click-এ কিছুই print হয় না। বন্ধনী সহ sayHi() function-টাকে সাথে সাথে ডাকে, আর ওর ফল, undefined, পাঠায় addEventListener-কে। Function-টাই পাঠাও, sayHi, বন্ধনী ছাড়া।

মাথা খাটাও

দুটো listener, একটা button

Rafi একই button-এ দুটো click listener যোগ করে। একটা print করে "first", আরেকটা "second"। ওর ধারণা, দ্বিতীয়টা প্রথমটাকে সরিয়ে দেয়, যেমন একটা variable-এ দুবার মান বসালে হয়।

<button id="b">Click me</button>
<script>
  const b = document.querySelector("#b");
  b.addEventListener("click", () => console.log("first"));
  b.addEventListener("click", () => console.log("second"));
</script>

ও কি ঠিক? একটা click কী print করবে?

Exercise 1সহজ

Sumi Chrome DevTools-এর Elements pane পড়া শিখছে। ওখানে পাতাটা দেখায় একটার ভেতরে আরেকটা tag হিসেবে, প্রতিটা child তার parent-এর নিচে একটু সরে বসে। Sumi-র হাতে একটা পাতার tree আছে, node-এর একটা list হিসেবে। ও ঠিক ওই ছবিটাই সাধারণ text-এ চায়।

Input. প্রথম লাইনে n। তারপর n টা লাইন, প্রতিটা node-এর জন্য একটা, document-এর ক্রমে। i নম্বর লাইনে থাকে node i-এর parent আর node-টার tag। Node 1 হলো root, ওর parent 0। বাকি প্রতিটা node-এর parent-এর নম্বর ওর নিজের চেয়ে ছোট।

Output. Markup-টা, প্রতি লাইনে একটা tag। কোনো node-এ ঢোকার সময় print করো <tag>, আর ওর সব child শেষ করে বের হওয়ার সময় </tag>। Child-রা আসে input-এর ক্রমে। Depth d-এর node-এর আগে থাকে 2d টা space, আর root-এর depth 0।

Constraints. 1 <= n <= 1000; the tree is at most 50 levels deep; every tag is 1 to 10 lowercase letters.

Sample.

6
0 ul
1 li
2 a
1 li
1 li
5 span

<ul>
  <li>
    <a>
    </a>
  </li>
  <li>
  </li>
  <li>
    <span>
    </span>
  </li>
</ul>

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

Run in Compiler

tree-markup নামে grade হয়।

Exercise 2সহজ

Farhan একটা পাতায় এটা ওটা click করে test করছে। একটা click শুরু হয় pointer-এর নিচের element থেকে, তারপর bubble করে ওর প্রতিটা ancestor পার হয়ে root পর্যন্ত ওঠে। প্রতিটা click-এর জন্য Farhan bubbling-এর পথটা চায়: event ওপরে ওঠার পথে যে যে tag পার হয়, তার list।

Input. প্রথম লাইনে n। তারপর n টা লাইন, প্রতিটা node-এর জন্য একটা, document-এর ক্রমে: node i-এর parent আর ওর tag। Node 1 হলো root, ওর parent 0। বাকি প্রতিটা node-এর parent-এর নম্বর ওর নিজের চেয়ে ছোট। তারপর এক লাইনে q, তারপর q টা লাইন, প্রতিটায় সেই node, যার ওপর click পড়ে।

Output. প্রতিটা click-এর জন্য এক লাইন: click পড়া node থেকে root পর্যন্ত tag-গুলো, মাঝে একটা করে space।

Constraints. 1 <= n <= 200; 1 <= q <= 200; every tag is 1 to 10 lowercase letters.

Sample.

7
0 body
1 header
1 main
3 ul
4 li
5 button
4 li
3
6
2
7

button li ul main body
header body
li ul main body

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

Run in Compiler

bubble-route নামে grade হয়।

Exercise 3মাঝারি

Lima একটা শুভেচ্ছা কার্ড বানাতে চায়। পাতায় একটা heading আছে, যেটা বলে "Hello", আর একটা button, যেটায় লেখা "Bangla"। Button-এ click করলে heading বদলে হওয়া উচিত "Shubho shokal"। নিচের script-টা শেষ করো, তারপর Run চেপে button-এ click করো।

<h1 id="greeting">Hello</h1>
<button id="bangla">Bangla</button>
<script>
  // find the heading and the button with querySelector
  // add a click listener that changes the heading's textContent
</script>

Run in Compiler

Exercise 4কঠিন

Example 1-কে একটা দোকানের stock counter বানাও। তৃতীয় একটা button যোগ করো, "Reset", যেটা count আবার 0 করে দেয়। একটা সীমাও দাও: count কখনো 10-এর ওপরে যাবে না, আর 10-এ পৌঁছালে নিচের একটা paragraph বলবে "Shelf is full"। অন্য যেকোনো count-এ paragraph-টা ফাঁকা থাকে। Count একটা variable-এ রাখো, আর আঁকো একটা function দিয়ে।

<p id="count">0</p>
<p id="status"></p>
<button id="minus">-1</button>
<button id="plus">+1</button>
<script>
  let count = 0;
  // add a Reset button above in the markup, then wire all three buttons here
</script>

Run in Compiler

সচরাচর যে প্রশ্নগুলো আসে

DOM আর HTML file কি একই জিনিস?

না। HTML file হলো text, browser যেটা একবার পড়ে। DOM হলো ওই text থেকে বানানো object-এর tree, আর তোমার script বদলায় সেই tree-টাই। Script চলার পরে দুটো আর মেলে না। View Source দেখায় file, DevTools-এর Elements pane দেখায় DOM।
বাকি track Node-এ চলে, এই module তাহলে preview-তে পাতা চালায় কেন?

Node-এর কোনো পাতা নেই, পর্দা নেই, document-ও নেই। পাতার program-এর লাগে একটা browser, তাই preview lesson-এর ভেতরেই একটা sandbox করা frame-এ সেটা খোলে। ওখানে network নেই, storage নেই, আর প্রতিটা Run পাতাকে নতুন করে শুরু করে। Judge করা problem-গুলো এখনো Node-এ চলে, তাই ওরা কাজ করে সাধারণ object হিসেবে লেখা tree নিয়ে।
একটা value দেখতে কি alert ব্যবহার করা যায়?

Preview-তে alert, confirm আর prompt শুধু console-এ একটা লাইন print করে সাথে সাথে ফিরে আসে। console.log ব্যবহার করো, অথবা textContent দিয়ে value-টা পাতাতেই লিখে দাও। এমনিতেও দুটোই ভালো অভ্যাস, কারণ সত্যিকারের dialog পুরো পাতা আটকে দেয়।
Event handler কি Module 12-এর callback-এর মতোই?

হ্যাঁ। Browser তোমার function রেখে দেয়, আর পরে ডাকে, event loop-এর কোনো পালায়, প্রতিটা event-এ একবার। তোমার handler চলার সময় পাতায় আর কিছুই চলে না, তাই ধীর একটা handler পুরো পাতা জমিয়ে দেয়।

মূল কথা

DOM হলো HTML থেকে browser-এর বানানো object-এর tree, আর পর্দা আঁকা হয় সেটা দেখে।
প্রতিটা node-এর একজন parent আর child-দের একটা list; পাতার কোনো parent ধরলে তবেই node দেখা যায়।
querySelector একটা CSS selector-এর প্রথম মিল ফেরত দেয়, অথবা null।
textContent একটা element-এর লেখা পড়ে বা বদলায়, আর addEventListener প্রতিটা event-এ একটা function ডাকে।
Click শুরু হয় target থেকে, bubble করে প্রতিটা ancestor পার হয়ে ওঠে; script-কে চলতে হবে দরকারি element-গুলোর পরে।
আরও গভীরে যেতে চাইলে: ভেতরের কলকবজা, reflow, repaint, live list আর batching (Pro)।

এরপর: DOM-এর প্রতিটা হাতিয়ার, একটা একটা করে, querySelectorAll থেকে listener সরানো পর্যন্ত।

lesson ১ শেষ

শেষ হলে চিহ্ন দিন, অগ্রগতি আপনার সাথে থাকবে।

পরেরটা: DOM-এর প্রতিটা হাতিয়ার, একটা একটা করে, কী ফেরত দেয় তা সহ

পরের lesson