Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> HTML

एचटीएमएल डोम आइटम () विधि

<घंटा/>

HTML DOM आइटम () विधि नोड सूची ऑब्जेक्ट से एक नोड लौटाती है।

नोट - आइटम () विधि का उपयोग नोड सूची ऑब्जेक्ट में इंडेक्स वैल्यू प्रदान करने के लिए किया जाता है। यह नोड सूची ऑब्जेक्ट पर '[इंडेक्स]' में इंडेक्स वैल्यू पास करके नोड प्राप्त करने जैसा ही है।

सिंटैक्स

निम्नलिखित वाक्य रचना है -

कॉलिंग आइटम (इंडेक्स), जहां इंडेक्स 0 से शुरू होता है

nodeListObject.item(index)

उदाहरण

आइए आइटम () . के लिए एक उदाहरण देखें विधि -

<!DOCTYPE html>
<html>
<head>
<title>item()</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
   ul{
      width: 30%;
      margin: 0 auto;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>item( )</legend>
<h2>Menu</h2>
<ul>
<li onclick="getOrder(0)">Mac & Cheese</li>
<li onclick="getOrder(1)">Pizza</li>
<li onclick="getOrder(2)">Burger</li>
</ul>
<div id="divDisplay">Click on menu item to order it</div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var menuSelect = document.getElementsByTagName("li");
   function getOrder(index) {
      divDisplay.textContent = 'Order: '+(menuSelect.item(index)).textContent;
   }
</script>
</body>
</html>

आउटपुट

यह निम्नलिखित आउटपुट देगा -

  • . क्लिक करने से पहले तत्व -

    एचटीएमएल डोम आइटम () विधि

  • . क्लिक करने के बाद तत्व -

    एचटीएमएल डोम आइटम () विधि


    1. HTML DOM getBoundingClientRect () विधि

      HTML DOM getBoundingClientRect () का उपयोग व्यूपोर्ट की स्थिति के सापेक्ष एक तत्व के आकार को वापस करने के लिए किया जाता है। यह DOMRect प्रकार की वस्तु देता है जिसमें आठ गुण बाएँ, ऊपर, दाएँ, नीचे, x, y, चौड़ाई, ऊँचाई हैं। स्क्रॉलिंग स्थिति में परिवर्तन होने पर बाउंडिंग आयत की स्थिति बदल जाती है। सिंट

    1. HTML DOM में विशेषताएँ () विधि है

      HTML DOM में एट्रिब्यूट्स () विधि यह जांचती है कि किसी तत्व में कोई विशेषता है या नहीं। यदि तत्व में कोई विशेषता है तो यह सही है और यदि नहीं है तो यह गलत है। यदि इस विधि को तत्व नोड के अलावा किसी अन्य नोड पर कहा जाता है, तो लौटाया गया मान हमेशा गलत होगा। सिंटैक्स hasAttributes() विधि के लिए सिंटैक्

    1. एचटीएमएल डोम फोकस () विधि

      HTML तत्व पर फ़ोकस देने के लिए HTML DOM फ़ोकस () विधि का उपयोग किया जाता है। सभी HTML तत्वों पर फ़ोकस लागू नहीं किया जा सकता है। उदाहरण के लिए:आप टैग पर फ़ोकस नहीं कर सकते। किसी तत्व से फ़ोकस हटाने के लिए ब्लर () विधि का उपयोग करें। सिंटैक्स निम्नलिखित वाक्य रचना है - HTMLElementObject.focus() उदा