জয়েন লগইন

জাভাস্ক্রিপ্ট এলিমেন্ট

🌈জাভাস্ক্রিপ্ট এলিমেন্ট কি?

📋জাভাস্ক্রিপ্ট এলিমেন্ট হলো এলিমেন্ট পরিচালনা করার পদ্ধতি।

⚒️জাভাস্ক্রিপ্ট এলিমেন্ট এলিমেন্ট পরিচালনা করতে ব্যবহৃত হয়।

জাভাস্ক্রিপ্ট এলিমেন্ট সমূহ

জাভাস্ক্রিপ্ট এলিমেন্ট এবং সেগুলোর ব্যবহারের তালিকা

  • ➡️ accessKey - এলিমেন্টের অ্যাক্সেস কী নির্ধারণ করা
  • ➡️ addEventListener - এলিমেন্টে ইভেন্ট শ্রোতা যুক্ত করা
  • ➡️ append - এলিমেন্টের শেষে নতুন নোড যুক্ত করা
  • ➡️ before - এলিমেন্টের আগে নতুন নোড যুক্ত করা
  • ➡️ after - এলিমেন্টের পরে নতুন নোড যুক্ত করা
  • ➡️ appendChild - এলিমেন্টের চাইল্ড হিসেবে নতুন নোড যুক্ত করা
  • ➡️ children - এলিমেন্টের চাইল্ড এলিমেন্টগুলোর তালিকা বের করা
  • ➡️ childNodes - এলিমেন্টের চাইল্ড নোডগুলোর তালিকা বের করা
  • ➡️ childElementCount - এলিমেন্টের চাইল্ড এলিমেন্টের সংখ্যা বের করা
  • ➡️ className - এলিমেন্টের ক্লাসের নাম নির্ধারণ করা
  • ➡️ cloneNode - এলিমেন্টের কপি তৈরি করা
  • ➡️ click - এলিমেন্টে ক্লিক ইভেন্ট সম্পন্ন করা
  • ➡️ focus - এলিমেন্টে ফোকাস নির্ধারণ করা
  • ➡️ getAttribute - এলিমেন্টের অ্যাট্রিবিউটের মান বের করা
  • ➡️ getAttributeNode - এলিমেন্টের অ্যাট্রিবিউট নোড বের করা
  • ➡️ hasAttribute - এলিমেন্টে নির্দিষ্ট অ্যাট্রিবিউট আছে কিনা যাচাই করা
  • ➡️ hasAttributes - এলিমেন্টে কোনো অ্যাট্রিবিউট আছে কিনা যাচাই করা
  • ➡️ hasChildNodes - এলিমেন্টে চাইল্ড নোড আছে কিনা যাচাই করা
  • ➡️ id - এলিমেন্টের আইডি নির্ধারণ করা
  • ➡️ innerHTML - এলিমেন্টের ভেতরের এইচটিএমএল অ্যাক্সেস বা নির্ধারণ করা
  • ➡️ innerText - এলিমেন্টের ভেতরের দৃশ্যমান লেখা অ্যাক্সেস বা নির্ধারণ করা
  • ➡️ insertBefore - নির্দিষ্ট নোডের আগে নতুন নোড যুক্ত করা
  • ➡️ insertAdjacentText - নির্দিষ্ট অবস্থানে টেক্সট যুক্ত করা
  • ➡️ insertAdjacentHTML - নির্দিষ্ট অবস্থানে এইচটিএমএল যুক্ত করা
  • ➡️ insertAdjacentElement - নির্দিষ্ট অবস্থানে এলিমেন্ট যুক্ত করা
  • ➡️ isContentEditable - এলিমেন্টের লেখা সম্পাদনযোগ্য কিনা যাচাই করা
  • ➡️ matches - এলিমেন্ট নির্দিষ্ট নির্বাচকের সাথে মিলে কিনা যাচাই করা
  • ➡️ normalize - এলিমেন্টের নোডগুলো স্বাভাবিক রূপে সাজানো
  • ➡️ lang - এলিমেন্টের ভাষা নির্ধারণ করা
  • ➡️ dir - এলিমেন্টের লেখার দিক নির্ধারণ করা
  • ➡️ title - এলিমেন্টের শিরোনাম নির্ধারণ করা
  • ➡️ textContent - এলিমেন্টের টেক্সট কনটেন্ট অ্যাক্সেস বা নির্ধারণ করা
  • ➡️ style - এলিমেন্টের স্টাইল নির্ধারণ করা
  • ➡️ tagName - এলিমেন্টের ট্যাগের নাম বের করা
  • ➡️ tabIndex - এলিমেন্টের ট্যাব ইনডেক্স নির্ধারণ করা

accessKey - এলিমেন্টের অ্যাক্সেস কী নির্ধারণ করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<a href="/index.php" id="url">লার্নউইজ</p>

<script>
document.getElementById("url").accessKey = "w";
</script>

</body>
</html>

addEventListener - এলিমেন্টে ইভেন্ট শ্রোতা যুক্ত করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button id="button">ফলাফল</button>

<script>
button.addEventListener("click", function() {
  document.body.style.background = "pink";
});
</script>

</body>
</html>

append - এলিমেন্টের শেষে নতুন নোড যুক্ত করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>
<p id="desc"></p>

<script>
function execute() {
  desc.append("হ্যালো বিশ্ব");
}
</script>

</body>
</html>

before - এলিমেন্টের আগে নতুন নোড যুক্ত করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<p id="desc">বিশ্ব</p>
<button onclick="execute()">ফলাফল</button>

<script>
function execute() {
  desc.before("হ্যালো");
}
</script>

</body>
</html>

after - এলিমেন্টের পরে নতুন নোড যুক্ত করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>
<p id="desc">হ্যালো</p>

<script>
function execute() {
  desc.after("বিশ্ব");
}
</script>

</body>
</html>

appendChild - এলিমেন্টের চাইল্ড হিসেবে নতুন নোড যুক্ত করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<div id="box">
  <p>হ্যালো বিশ্ব</p>
</div>

<button onclick="execute()">যোগ</button>

<script>
function execute() {
  for (let i = 0; i < collection.length; i++) {
    text += collection[i].tagName + "<br>";
  }
}
</script>

</body>
</html>

children - এলিমেন্টের চাইল্ড এলিমেন্টগুলোর তালিকা বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>

<div id="box">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

<script>
function execute() {
  for (const element of box.children) {
    element.style.color = "pink";
  }
}
</script>

</body>
</html>

childNodes - এলিমেন্টের চাইল্ড নোডগুলোর তালিকা বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>

<div id="box">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
<p id="result"></p>

<script>
function execute() {
  result.textContent = box.childNodes.length;
}
</script>

</body>
</html>

childElementCount - এলিমেন্টের চাইল্ড এলিমেন্টের সংখ্যা বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>

<div id="box">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
<p id="result"></p>

<script>
function execute() {
  result.textContent = box.childElementCount;
}
</script>

</body>
</html>

className - এলিমেন্টের ক্লাসের নাম নির্ধারণ করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<head>
<style>
.tomato {
  background: tomato;
}
</style>
</head>
<body>

<button onclick="execute()">ফলাফল</button>

<div id="box">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

<script>
function execute() {
  box.className = "tomato";
}
</script>

</body>
</html>

cloneNode - এলিমেন্টের কপি তৈরি করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>

<div id="box">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

<script>
function execute() {
  const clone = box.cloneNode(true);
  box.after(clone);
}
</script>

</body>
</html>

click - এলিমেন্টে ক্লিক ইভেন্ট সম্পন্ন করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button id="button" onclick="show()">ফলাফল</button>

<script>
function show() {
  alert("ক্লিক করা হয়েছে");
}

function execute() {
  button.click();
}

setTimeout(execute, 1000);
</script>

</body>
</html>

focus - এলিমেন্টে ফোকাস নির্ধারণ করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<input id="input" placeholder="">

<button onclick="execute()">ফলাফল</button>

<script>
function execute() {
  input.style.background = "lightgreen";
  input.focus();
}
</script>

</body>
</html>

getAttribute - এলিমেন্টের অ্যাট্রিবিউটের মান বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>
<p id="desc" class="title">প্রোগ্রামিং শিখুন</p>

<script>
function execute() {
  alert(desc.getAttribute("class"));
}
</script>

</body>
</html>

getAttributeNode - এলিমেন্টের অ্যাট্রিবিউট নোড বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>
<p id="desc" class="title">প্রোগ্রামিং শিখুন</p>

<script>
function execute() {
  const attribute = desc.getAttributeNode("class");

  alert(attribute.value);
}
</script>

</body>
</html>

hasAttribute - এলিমেন্টে নির্দিষ্ট অ্যাট্রিবিউট আছে কিনা যাচাই করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>
<p id="desc" class="title">প্রোগ্রামিং শিখুন</p>

<script>
function execute() {
  alert(desc.hasAttribute("class"));
}
</script>

</body>
</html>

hasAttributes - এলিমেন্টে কোনো অ্যাট্রিবিউট আছে কিনা যাচাই করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>
<p id="desc" class="title">প্রোগ্রামিং শিখুন</p>

<script>
function execute() {
  alert(desc.hasAttributes());
}
</script>

</body>
</html>

hasChildNodes - এলিমেন্টে চাইল্ড নোড আছে কিনা যাচাই করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>

<div id="box">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

<script>
function execute() {
  alert(box.hasChildNodes());
}
</script>

</body>
</html>

id - এলিমেন্টের আইডি নির্ধারণ করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>

<div id="box">
  <h1>প্রোগ্রামিং শিখুন</h1>
  <p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>

<script>
function execute() {
  alert(box.id);
}
</script>

</body>
</html>

innerHTML - এলিমেন্টের ভেতরের এইচটিএমএল অ্যাক্সেস বা নির্ধারণ করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>
<div id="box"></div>

<script>
function execute() {
  box.innerHTML = "<p>প্রোগ্রামিং শিখুন</p>";
}
</script>

</body>
</html>

innerText - এলিমেন্টের ভেতরের দৃশ্যমান লেখা অ্যাক্সেস বা নির্ধারণ করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>
<div id="box"></div>

<script>
function execute() {
  box.innerText = "প্রোগ্রামিং শিখুন";
}
</script>

</body>
</html>

insertBefore - নির্দিষ্ট নোডের আগে নতুন নোড যুক্ত করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>

<div id="box">
  <p id="html">প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>


<script>
function execute() {
  const p = document.createElement("p");
  p.textContent = "প্রোগ্রামিং শিখুন";

  box.insertBefore(p, html);
}
</script>

</body>
</html>

insertAdjacentText - নির্দিষ্ট অবস্থানে টেক্সট যুক্ত করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>

<div id="box">
  <p id="desc">প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>


<script>
function execute() {
  desc.insertAdjacentText("beforebegin", "প্রোগ্রামিং শিখুন");
}
</script>

</body>
</html>

insertAdjacentHTML - নির্দিষ্ট অবস্থানে এইচটিএমএল যুক্ত করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>

<div id="box">
  <p id="desc">প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>


<script>
function execute() {
  desc.insertAdjacentHTML(
    "beforebegin",
    "<p>প্রোগ্রামিং শিখুন</p>"
  );
}
</script>

</body>
</html>

insertAdjacentElement - নির্দিষ্ট অবস্থানে এলিমেন্ট যুক্ত করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>

<div id="box">
  <p id="desc">প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>


<script>
function execute() {
  const p = document.createElement("p");
  p.textContent = "প্রোগ্রামিং শিখুন";

  desc.insertAdjacentElement("beforebegin", p);
}
</script>

</body>
</html>

isContentEditable - এলিমেন্টের লেখা সম্পাদনযোগ্য কিনা যাচাই করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>
<p id="desc" contenteditable="true">প্রোগ্রামিং শিখুন</p>

<script>
function execute() {
  alert(desc.isContentEditable);
}
</script>

</body>
</html>

matches - এলিমেন্ট নির্দিষ্ট নির্বাচকের সাথে মিলে কিনা যাচাই করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>

<p id="desc" class="active">প্রোগ্রামিং শিখুন</p>

<script>
function execute() {
  alert(desc.matches(".active"));
}
</script>

</body>
</html>

normalize - এলিমেন্টের নোডগুলো স্বাভাবিক রূপে সাজানোর উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>
<p id="desc">প্রোগ্রামিং শিখুন</p>

<script>
function execute() {
  desc.normalize();
}
</script>

</body>
</html>

lang - এলিমেন্টের ভাষা নির্ধারণ করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>
<p id="desc" lang="en">প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>

<script>
function execute() {
  alert(desc.lang)
}
</script>

</body>
</html>

dir - এলিমেন্টের লেখার দিক নির্ধারণ করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>
<p id="desc" dir="rtl">প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>

<script>
function execute() {
  alert(desc.dir)
}
</script>

</body>
</html>

title - এলিমেন্টের শিরোনাম নির্ধারণ করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>
<p id="desc" title="প্যারাগ্রাফ">প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>

<script>
function execute() {
  alert(desc.title)
}
</script>

</body>
</html>

textContent - এলিমেন্টের টেক্সট কনটেন্ট অ্যাক্সেস বা নির্ধারণ করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>
<p id="desc">প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>

<script>
function execute() {
  alert(desc.textContent)
}
</script>

</body>
</html>

style - এলিমেন্টের স্টাইল নির্ধারণ করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>
<p id="desc" style="color:red">প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>

<script>
function execute() {
  alert(desc.style.color)
}
</script>

</body>
</html>

tagName - এলিমেন্টের ট্যাগের নাম বের করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>
<p id="desc">প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>

<script>
function execute() {
  alert(desc.tagName)
}
</script>

</body>
</html>

tabIndex - এলিমেন্টের ট্যাব ইনডেক্স নির্ধারণ করার উদাহরণ।

javascript
<!DOCTYPE html>
<html>
<body>

<button onclick="execute()">ফলাফল</button>
<a href="/index.php" id="url" tabindex="1">লার্নউইজ</p>

<script>
function execute() {
  alert(url.tabIndex)
}
</script>

</body>
</html>

জাভাস্ক্রিপ্ট এলিমেন্ট সম্পর্কিত বিস্তারিত তথ্য

কার্যকর কোডিং উদাহরণ এবং সেগুলোর রেফারেন্স লিংক

নাম বিবরণ
accessKey এলিমেন্টের অ্যাক্সেস কী নির্ধারণ করতে ব্যবহৃত হয়।
addEventListener এলিমেন্টে ইভেন্ট শ্রোতা যুক্ত করতে ব্যবহৃত হয়।
append এলিমেন্টের শেষে নতুন নোড যুক্ত করতে ব্যবহৃত হয়।
before এলিমেন্টের আগে নতুন নোড যুক্ত করতে ব্যবহৃত হয়।
after এলিমেন্টের পরে নতুন নোড যুক্ত করতে ব্যবহৃত হয়।
appendChild এলিমেন্টের চাইল্ড হিসেবে নতুন নোড যুক্ত করতে ব্যবহৃত হয়।
children এলিমেন্টের চাইল্ড এলিমেন্টগুলোর তালিকা বের করতে ব্যবহৃত হয়।
childNodes এলিমেন্টের চাইল্ড নোডগুলোর তালিকা বের করতে ব্যবহৃত হয়।
childElementCount এলিমেন্টের চাইল্ড এলিমেন্টের সংখ্যা বের করতে ব্যবহৃত হয়।
className এলিমেন্টের ক্লাসের নাম নির্ধারণ করতে ব্যবহৃত হয়।
cloneNode এলিমেন্টের কপি তৈরি করতে ব্যবহৃত হয়।
click এলিমেন্টে ক্লিক ইভেন্ট সম্পন্ন করতে ব্যবহৃত হয়।
focus এলিমেন্টে ফোকাস নির্ধারণ করতে ব্যবহৃত হয়।
getAttribute এলিমেন্টের অ্যাট্রিবিউটের মান বের করতে ব্যবহৃত হয়।
getAttributeNode এলিমেন্টের অ্যাট্রিবিউট নোড বের করতে ব্যবহৃত হয়।
hasAttribute এলিমেন্টে নির্দিষ্ট অ্যাট্রিবিউট আছে কিনা যাচাই করতে ব্যবহৃত হয়।
hasAttributes এলিমেন্টে কোনো অ্যাট্রিবিউট আছে কিনা যাচাই করতে ব্যবহৃত হয়।
hasChildNodes এলিমেন্টে চাইল্ড নোড আছে কিনা যাচাই করতে ব্যবহৃত হয়।
id এলিমেন্টের আইডি নির্ধারণ করতে ব্যবহৃত হয়।
innerHTML এলিমেন্টের ভেতরের এইচটিএমএল অ্যাক্সেস বা নির্ধারণ করতে ব্যবহৃত হয়।
innerText এলিমেন্টের ভেতরের দৃশ্যমান লেখা অ্যাক্সেস বা নির্ধারণ করতে ব্যবহৃত হয়।
insertBefore নির্দিষ্ট নোডের আগে নতুন নোড যুক্ত করতে ব্যবহৃত হয়।
insertAdjacentText নির্দিষ্ট অবস্থানে টেক্সট যুক্ত করতে ব্যবহৃত হয়।
insertAdjacentHTML নির্দিষ্ট অবস্থানে এইচটিএমএল যুক্ত করতে ব্যবহৃত হয়।
insertAdjacentElement নির্দিষ্ট অবস্থানে এলিমেন্ট যুক্ত করতে ব্যবহৃত হয়।
isContentEditable এলিমেন্টের লেখা সম্পাদনযোগ্য কিনা যাচাই করতে ব্যবহৃত হয়।
matches এলিমেন্ট নির্দিষ্ট নির্বাচকের সাথে মিলে কিনা যাচাই করতে ব্যবহৃত হয়।
normalize এলিমেন্টের নোডগুলো স্বাভাবিক রূপে সাজাতে ব্যবহৃত হয়।
lang এলিমেন্টের ভাষা নির্ধারণ করতে ব্যবহৃত হয়।
dir এলিমেন্টের লেখার দিক নির্ধারণ করতে ব্যবহৃত হয়।
title এলিমেন্টের শিরোনাম নির্ধারণ করতে ব্যবহৃত হয়।
textContent এলিমেন্টের টেক্সট কনটেন্ট অ্যাক্সেস বা নির্ধারণ করতে ব্যবহৃত হয়।
style এলিমেন্টের স্টাইল নির্ধারণ করতে ব্যবহৃত হয়।
tagName এলিমেন্টের ট্যাগের নাম বের করতে ব্যবহৃত হয়।
tabIndex এলিমেন্টের ট্যাব ইনডেক্স নির্ধারণ করতে ব্যবহৃত হয়।