নোড অবজেক্ট এবং এলিমেন্ট অবজেক্টের মধ্যে পার্থক্য?

Question

নোড অবজেক্ট এবং এলিমেন্ট অবজেক্টের মধ্যে আমি সম্পূর্ণ বিভ্রান্ত। নোডলিস্ট অবজেক্ট (এলিমেন্ট বা নোডের সংগ্রহ?) ফেরত দেওয়ার document.getElementById()সময় এলিমেন্ট অবজেক্ট document.getElementsByClassName()প্রদান করে

যদি একটি ডিভ একটি এলিমেন্ট অবজেক্ট হয় তবে ডিভ নোড অবজেক্টের কী হবে?

নোড অবজেক্ট কী?

ডকুমেন্ট অবজেক্ট, এলিমেন্ট অবজেক্ট এবং টেক্সট অবজেক্ট কি নোড অবজেক্ট?

ডেভিড ফ্লানাগনের বই 'দ্য ডকুমেন্ট অবজেক্ট, এর এলিমেন্ট অবজেক্টস এবং টেক্সট অবজেক্টস হ'ল নোড অবজেক্ট'।

তাহলে কীভাবে কোনও বস্তু এলিমেন্ট অবজেক্টের বৈশিষ্ট্য / পদ্ধতি পাশাপাশি নোড অবজেক্টের উত্তরাধিকারী হতে পারে?

যদি হ্যাঁ, আমার অনুমান নোড ক্লাস এবং এলিমেন্ট ক্লাস উত্তরাধিকারের প্রোটোটাইপাল গাছের সাথে সম্পর্কিত।

 <div id="test">
           <p class="para"> 123 </p>
           <p class="para"> abc </p>
 </div>
 <p id="id_para"> next </p>

document.documentElement.toString();    // [object HTMLHtmlElement]

var div = document.getElementById("test");
div.toString();                         // [object HTMLDivElement]                       

var p1 = document.getElementById("id_para");
p1.toString();                          // [object HTMLParagraphElement]

var p2 = document.getElementsByClassName("para");
p2.toString();                          //[object HTMLCollection]

Comments

সেখানে নোড 12 ধরনের, তাদের উপাদান এক হচ্ছে

— Esailija

এই 12 টি ধরণের কি এলিমেন্ট অবজেক্টও নয়? 1 = ELEMENT_NODE, 3 = TEXT_NODE এর মতো, আমি মনে করি উভয়ই এলিমেন্ট অবজেক্ট।

— পিকে 15

না তারা হয় না। এলিমেন্টটি কেবল একক ধরণের নোড।

— ইসাইলাইজা

Answer 1

একজন nodeকরে DOM অনুক্রমের বস্তুর কোনো ধরনের জন্য জেনেরিক নাম। একজন nodeএক হতে পারে বিল্ট-ইন যেমন DOM উপাদানে documentবা document.body, এটা যেমন যেমন একটি HTML ট্যাগ HTML এ নিদিষ্ট হতে পারে <input>বা <p>বা এটি একটি টেক্সট নোড যে অন্য উপাদান ভিতরে লেখার একটা ব্লক রাখা সিস্টেম দ্বারা তৈরি করা হয় হতে পারে । সুতরাং, সংক্ষেপে, একটি nodeহল কোনও ডিওএম অবজেক্ট।

এ elementহ'ল একটি নির্দিষ্ট প্রকারের nodeনোডের অন্যান্য ধরণের (টেক্সট নোডস, কমেন্ট নোডস, ডকুমেন্ট নোডস ইত্যাদি) রয়েছে।

ডিওমে নোডের একটি শ্রেণিবিন্যাস থাকে যেখানে প্রতিটি নোডের পিতামাতারা থাকতে পারে, চাইল্ড নোডগুলির একটি তালিকা এবং একটি নেক্সটসিলিং এবং পূর্ববর্তী শিবলিং থাকতে পারে। সেই কাঠামোটি গাছের মতো শ্রেণিবিন্যাস গঠন করে। documentনোড শিশু নোড (তালিকায় থাকবে headনোড এবং bodyনোড)। bodyনোড শিশু নোড (আপনার HTML পাতায় মধ্যে শীর্ষ স্তরের উপাদান) এবং তাই তালিকায় হবে।

সুতরাং, একটি nodeListকেবল একটি অ্যারের মতো তালিকা nodes।

একটি উপাদান হ'ল একটি নির্দিষ্ট ধরণের নোড, যা কোনও এইচটিএমএল ট্যাগের সাথে সরাসরি এইচটিএমএলে নির্দিষ্ট করা যায় এবং এতে একটি idবা এ এর মতো বৈশিষ্ট্য থাকতে পারে class। বাচ্চা ইত্যাদি থাকতে পারে ... অন্যান্য ধরণের নোড যেমন কমেন্ট নোড, পাঠ্য নোড ইত্যাদি রয়েছে ... বিভিন্ন বৈশিষ্ট্যযুক্ত। প্রতিটি নোডের একটি সম্পত্তি থাকে .nodeTypeযা এটি কোন ধরণের নোডের প্রতিবেদন করে। আপনি এখানে বিভিন্ন ধরণের নোড দেখতে পাচ্ছেন ( এমডিএন থেকে চিত্র ):

আপনি দেখতে পাচ্ছেন যে ELEMENT_NODEএটি একটি বিশেষ ধরণের নোড যেখানে nodeTypeসম্পত্তিটির মান রয়েছে 1।

সুতরাং document.getElementById("test")কেবলমাত্র একটি নোড ফিরে আসতে পারে এবং এটি একটি উপাদান (একটি নির্দিষ্ট ধরণের নোড) হওয়ার গ্যারান্টিযুক্ত। যে কারণে এটি কেবল তালিকার চেয়ে উপাদানটি ফেরত দেয়।

যেহেতু document.getElementsByClassName("para")একাধিক বস্তু ফেরত আসতে পারে, তাই ডিজাইনাররা একটি ফেরত দেওয়া বেছে নিল nodeListকারণ এটি একাধিক নোডের তালিকার জন্য তৈরি করা ডেটা টাইপ। যেহেতু এগুলি কেবলমাত্র উপাদান হতে পারে (কেবলমাত্র উপাদানগুলিতে সাধারণত একটি শ্রেণীর নাম থাকে), এটি প্রযুক্তিগতভাবে এমন একটি nodeListযা কেবলমাত্র টাইপ উপাদানগুলির নোড থাকে এবং ডিজাইনাররা একটি আলাদাভাবে নাম সংগ্রহ করতে পারে যা একটি ছিল elementList, তবে তারা কেবল একটি প্রকার ব্যবহার করতে বেছে নিয়েছিল সংগ্রহের এটির মধ্যে কেবলমাত্র উপাদান ছিল কিনা তা।

---

সম্পাদনা: এইচটিএমএল 5 এমন একটি সংজ্ঞা দেয় HTMLCollectionযা এইচটিএমএল উপাদানগুলির একটি তালিকা (কোনও নোড নয়, কেবলমাত্র উপাদানসমূহ)। এইচটিএমএল 5 এর বেশ কয়েকটি বৈশিষ্ট্য বা পদ্ধতি এখন একটি ফেরত দেয় HTMLCollection। এটি একটি এর সাথে ইন্টারফেসের মতো একইরকম nodeList, এখন একটি পার্থক্য তৈরি হয়েছে যে এটিতে কেবলমাত্র উপাদান রয়েছে, কোনও ধরণের নোড নয়।

আপনি কীভাবে এটি ব্যবহার করেন (যতদূর আমি বলতে পারি) এর মধ্যে nodeListএবং এর মধ্যে পার্থক্যটির HTMLCollectionখুব কম প্রভাব পড়ে, তবে এইচটিএমএল 5 এর ডিজাইনাররা এখন সেই পার্থক্য তৈরি করেছে।

উদাহরণস্বরূপ, element.childrenসম্পত্তিটি একটি লাইভ এইচটিএমএল সংগ্রহ সংগ্রহ করে।

Comments

সুতরাং সমস্ত উপাদান নোড হয়, তবে সমস্ত নোড উপাদান নয় ... তাই না? আমি কেবল কিছু বিষয়গুলির মধ্যে পুনরাবৃত্তি করার সময় জাভাস্ক্রিপ্ট ফাংশনগুলিতে নোড বা উপাদান হিসাবে জিনিসগুলি বর্ণনা করার বিষয়ে ভাবছিলাম।

— রায়ান উইলিয়ামস

আমি জানি আমি একটি 7 বছর বয়সী পোস্ট পুনরুত্থিত করছি, তবে আমি এই চমৎকার এবং পুরো ব্যাখ্যাটির জন্য আপনাকে ধন্যবাদ বলতে চাই! সম্পূর্ণ জ্ঞান তৈরি।

— আলেকসান্ডার

@ আলেকস্যান্ডারএইচ - খুশি যে এটি এখনও কার্যকর।

— jr.00

Answer 2

Nodeএকটি গাছ গঠন বাস্তবায়নের জন্য, তাই তার পদ্ধতি জন্য হয় firstChild, lastChild, childNodes, ইত্যাদিতে একটি জেনেরিক ট্রী কাঠামো জন্য একটি ক্লাসের বেশি।

এবং তারপরে কিছু কিছু Nodeবস্তুও Elementবস্তু। Elementথেকে উত্তরাধিকারী Node। Elementবস্তুগুলি প্রকৃতপক্ষে ট্যাগগুলির দ্বারা এইচটিএমএল ফাইলে নির্দিষ্ট হিসাবে অবজেক্টগুলিকে প্রতিনিধিত্ব করে <div id="content"></div>। Elementবর্গ বৈশিষ্ট্য এবং যেমন পদ্ধতি নির্ধারণ attributes, id, innerHTML, clientWidth, blur(), এবং focus()।

কিছু বিষয় Nodeহ'ল পাঠ্য নোড এবং সেগুলি Elementবস্তু নয় । প্রতিটি Nodeবস্তুর একটি nodeTypeবৈশিষ্ট্য রয়েছে যা এটি এইচটিএমএল নথিগুলির জন্য কী ধরণের নোডের নির্দেশ করে:

1: Element node
3: Text node
8: Comment node
9: the top level node, which is document

আমরা কনসোলে কিছু উদাহরণ দেখতে পাচ্ছি:

> document instanceof Node
  true

> document instanceof Element
  false

> document.firstChild
  <html>...</html>

> document.firstChild instanceof Node
  true

> document.firstChild instanceof Element
  true

> document.firstChild.firstChild.nextElementSibling
  <body>...</body>

> document.firstChild.firstChild.nextElementSibling === document.body
  true

> document.firstChild.firstChild.nextSibling
  #text

> document.firstChild.firstChild.nextSibling instanceof Node
  true

> document.firstChild.firstChild.nextSibling instanceof Element
  false

> Element.prototype.__proto__ === Node.prototype
  true

উপরের শেষ লাইনটি Elementউত্তরাধিকার সূত্রে প্রাপ্ত দেখায় Node। (সেই লাইনটি আইই এর কারণে কাজ করবে না __proto__Chrome ক্রোম, ফায়ারফক্স বা সাফারি ব্যবহার করার প্রয়োজন হবে)।

যাইহোক, documentঅবজেক্টটি নোড গাছের শীর্ষ এবং documentএকটি Documentঅবজেক্ট এবং Documentউত্তরাধিকার সূত্রে প্রাপ্ত Node:

> Document.prototype.__proto__ === Node.prototype
  true

নোড এবং এলিমেন্ট শ্রেণীর জন্য এখানে কিছু ডক্স রয়েছে:
https://developer.mozilla.org/en-US/docs/DOM/Node
https://developer.mozilla.org/en-US/docs/DOM/Element

Comments

কি হবে <span data-a="1" >123</span>? এই স্প্যানটি এমন একটি উপাদান যার নিজস্ব নোড রয়েছে। কিন্তু বৈশিষ্ট্যটিরও নিজস্ব নোড রয়েছে?

— রই নমির

আমি কেবল স্পষ্ট করে বলতে চাই নোড একটি ইন্টারফেস যা কোনও শ্রেণি নয়। যা থেকে বেশ কয়েকটি ডিওএম এপিআই অবজেক্ট প্রকারের উত্তরাধিকার সূত্রে প্রাপ্ত। এটি সেই ধরণের সাথে একই ধরণের আচরণ করতে দেয়; উদাহরণস্বরূপ, একই পদ্ধতিগুলির একই সেট উত্তরাধিকারী হওয়া বা একইভাবে পরীক্ষা করা। আপনি উল্লেখ করেছেন এটি আমি মজিলা লিঙ্কটিতে পেয়েছি। মূল্যবান উত্তরের জন্য ধন্যবাদ

— আহমেদ খাশাবা

Answer 3

আপনার সমস্ত ডম সংকটের জন্য তথ্যের উত্স

http://www.w3.org/TR/dom/#nodes

"ডকুমেন্ট, ডকুমেন্টফ্রেগমেন্ট, ডকুমেন্টটাইপ, এলিমেন্ট, টেক্সট, প্রসেসিং ইন্সট্রাকশন, বা মন্তব্য ইন্টারফেস (কেবল নোড বলা হয়) একটি গাছে অংশগ্রহণ করে" "

http://www.w3.org/TR/dom/#element

"এলিমেন্ট নোডগুলি কেবল উপাদান হিসাবে পরিচিত" "

Answer 4

নোড: http://www.w3schools.com/js/js_htmldom_nodes.asp

নোড অবজেক্ট ডকুমেন্ট ট্রিতে একটি একক নোড উপস্থাপন করে। নোড একটি উপাদান নোড, একটি অ্যাট্রিবিউট নোড, একটি টেক্সট নোড বা নোড প্রকারের অধ্যায়ে বর্ণিত নোড প্রকারের অন্য কোনও হতে পারে।

উপাদান: http://www.w3schools.com/js/js_htmldom_elements.asp

এলিমেন্ট অবজেক্টটি একটি এক্সএমএল ডকুমেন্টে একটি উপাদান প্রতিনিধিত্ব করে। উপাদানগুলিতে বৈশিষ্ট্য, অন্যান্য উপাদান বা পাঠ্য থাকতে পারে। যদি কোনও উপাদানটিতে পাঠ্য থাকে তবে পাঠ্যটি একটি পাঠ্য নোডে উপস্থাপন করা হয়।

নকল :

• এক্সএমএলে কোনও উপাদান এবং নোডের মধ্যে পার্থক্য কী?
• এক্সএমএলে নোড এবং উপাদানগুলি আলাদা কেন? যুক্তি কী ছিল?

Answer 5

সাধারণভাবে ট্যাগ উপস্থাপন করতে নোড ব্যবহার করা হয়। 3 প্রকারে বিভক্ত:

অ্যাট্রিবিউট নোট: নোড যা এর ভিতরে বৈশিষ্ট্যযুক্ত। মেপুঃ:<p id=”123”></p>

টেক্সট নোড: নোড যা খোলার এবং বন্ধ করার মাঝে এর খাঁটি পাঠ্য সামগ্রী রয়েছে। মেপুঃ:<p>Hello</p>

এলিমেন্ট নোড: নোড যা এর ভিতরে অন্য ট্যাগ থাকে has মেপুঃ:<p><b></b></p>

প্রতিটি নোড একসাথে টাইপ হতে পারে, কেবলমাত্র একক প্রকারের নয়।

এলিমেন্টটি কেবল একটি উপাদান নোড।