Module‌‌‌ ‌‌‌২৩ ‌‌‌এ‌‌‌ ‌‌‌আমরা‌‌‌ ‌‌‌যাকিছু‌‌‌ ‌‌‌শিখেছি‌‌‌

How JavaScript Works & DOM

let blogTitle = document.getElementsByTagName("h3");

for (const h3 of blogTitle) {

console.log(h3.innerText);

}

innerHTML ও innerText এর মাধ্যমে ভেলূ চেঞ্জ করে দেখাও সাথে তার কালার চাঞ্জ কর । আর সিএসএস অ্যাপ্লাই করতে পার । তোমার ইচ্ছা
getElementsById এর কাজ কি ? { আইডি কে সিলেক্ট করা }
JS দিয়ে সিএসএস ডিজাইন অ্যাপ্লাই করে দেখাও

document.getElementsByTagName("h3")[0].style.color="tomato"

getElementByClassName এর কাজ কি ? (ক্লাসকে সিলেক্ট করা)
document.querySelector() ও document.querySelectorAll() দিয়ে কি কি কাজ করা যায় ? (সব কাজ করা যায় css এ জেভাবে কাজ করি ঠিক একই কাজ করতে পারব querySelector() ও querySelectorAll() দিয়ে )
getAttribue এর কাজ কি ? (getAttribue এর মাধ্যমে আমরা যেকোনো attribute কে অ্যাক্সেস করতে পারি )
setAttribute এর কাজ কি ? ( setAttribute এর মাধ্যমে আমরা যেকোনো Element এ Attribute সেট করতে পারি )

var a = document.getElementsByTagName("h3")[0];

// let b = a.getAttribute("id");

let b = a.setAttribute("title", "this from setAttribute");

console.log(b);

parentNode এর কাজ কি ? (কোণ elelment এর প্যারেন্ট কে তা খুজে বের করা । এমন কি প্যারেন্ট এর প্যারেন্ট তার প্যারেন্টকেও খুজে বের করা যায় । )

var a = document.querySelector("#blog-1");

// var b = a.parentNode

var b = a.parentNode.parentNode.parentNode; (প্যারেন্ট এর প্যারেন্ট)

console.log(b);

আমরা parentNode এর মাধ্যমে প্যারেন্ট কে অ্যাক্সেস করা যায় । কিন্তু child কে আমরা কিভাবে অ্যাক্সেস করতে পারি ?
childNodes এর মাধ্যমে আমরা চাইল্ডগুলোকে অ্যাক্সেস করতে পারি

const a = document.getElementById("blog-1");

const b = a.childNodes;

console.log(b);

Children দিলেও কাজ টা হবে । এখন প্রশ্ন আস্তে পারি children আর childNodes এর মধ্যে পার্থক্য কি ? পার্থক্য হচ্ছে children কল করলে শুধু চাইল্ডগুলোকে return করবে আর childNodes দিলে nodeList এর ভেতরে চাইল্ড এর ভেলু সহ return করবে ।
কিভাবে JS এর মাধ্যমে এইচটিএমএল এলিমেন্ট তৈরি করে ? এবং কিভাবে এইচটিএমএল ফাইলে অ্যাড করে ?

let heading = document.createElement("h3");

let text = document.createTextNode("this from javascript");

let add = heading.appendChild(text);

heading.style.color = "white";

heading.style.backgroundColor = "tomato";

{// heading.innerText = "from js";

// let add = heading.appendChild(text);

}// খুচরা নিয়ম

let myMain = document.getElementById("yourId");

myMain.appendChild(heading);

.classList.add() এর মাধ্যমে আমরা চলাসসগুলোকে অ্যাক্সেস করতে পারি এবং । সে ক্লাস এর ডিজাইনগুলো অ্যাপ্লাই করতে পারি

আর আমার github এ যাইতে চাইলে এই লিঙ্কে ক্লিক করুন

About

Md: Rashedul Islam Shihab

Writer of this note

Batch4

Social accounts