{"id":2344,"date":"2021-12-30T13:30:01","date_gmt":"2021-12-30T13:30:01","guid":{"rendered":"https:\/\/blog.embold.io\/?p=2344"},"modified":"2021-12-30T13:30:01","modified_gmt":"2021-12-30T13:30:01","slug":"how-to-extract-a-specific-value-from-a-nodelist","status":"publish","type":"post","link":"https:\/\/blog.embold.io\/es\/how-to-extract-a-specific-value-from-a-nodelist\/","title":{"rendered":"How to extract a specific value from a NodeList?"},"content":{"rendered":"\n

When you use methods like getElementsByName or querySelectorAll, to access elements in JavaScript, what is returned is a NodeList<\/a>. <\/p>\n\n\n\n

A NodeList is a collection of HTML DOM nodes representing the HTML elements that met the criteria. At first glance, a NodeList looks like an array, but it is not. <\/p>\n\n\n\n

For example, let\u2019s assume that you\u2019re building a synonym word card game. The API you\u2019re using provides an array with objects like this:\u00a0<\/p>\n\n\n\n

{\n  question: \"Synonym of fixed?\",\n  answer: \"sorted\",\n  options: [\"arrived\", \"fastened\", \"sorted\", \"ran\"]\n}<\/code><\/pre>\n\n\n\n
The question value is populated into a standalone element, while the values of the options array are populated into a list or collections of divs for the user to click the correct answer. When the user clicks on a choice, we check if the clicked choice corresponds with the value of the answer property. If it doesn\u2019t, we loop through the list and highlight the element containing the correct answer. <\/p>\n\n\n\n
Since this snippet isn\u2019t about how to do all of that, we\u2019ll just focus on how to extract that specific list item. There are several ways you can do that and the first is looping through with a for loop.<\/p>\n\n\n\n
 Using the\u00a0Nodelist.forEach<\/a>\u00a0method and for loop:\u00a0 <\/p>\n\n\n\n
const options = document.querySelectorAll('li');\n\noptions.forEach(option => {\n  option.addEventListener('click', () =>{\n    console.log(option.textContent);\n    if(option.textContent === \"Sorted\"){\n      option.style.color = \"green\";\n    }else{\n      option.style.color = \"red\";\n      for(let i = 0; i <= options.length; i++){\n        if(options[i].textContent === \"Sorted\"){\n           options[i].style.color = \"green\";\n        }\n      }\n    }\n  })\n})<\/code><\/pre>\n\n\n\n
First, we check if the clicked option is the correct one, if it isn\u2019t, we loop through the entire list using a for loop to find the correct one.\u00a0<\/p>\n\n\n\n
Another approach would be to convert the NodeList into an array using array.from<\/a>. If you want to select an element at a particular position, then you can use the NodeList.item<\/a> method.<\/p>\n\n\n
Blog Credits: Linda Ikechukwu<\/span><\/p>\n
\u201d Linda Ikechukwu is a Frontend Developer turned Technical Content Consultant. She enjoys strategizing on and creating content that helps tech startups connect with their target audience. \u201c<\/div>\n
<\/div>","protected":false},"excerpt":{"rendered":"
When you use methods like getElementsByName or querySelectorAll, to access elements in JavaScript, what is returned is a NodeList.  A NodeList is a collection of HTML DOM nodes representing the HTML…<\/p>\n","protected":false},"author":10,"featured_media":2345,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[7],"tags":[288,286,289,291,285,287],"better_featured_image":{"id":2345,"alt_text":"","caption":"","description":"","media_type":"image","media_details":{"width":1800,"height":923,"file":"2021\/12\/node.jpg","sizes":{"thumbnail":{"file":"node-150x150.jpg","width":150,"height":150,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/node-150x150.jpg"},"medium_large":{"file":"node-768x394.jpg","width":768,"height":394,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/node-768x394.jpg"},"penci-full-thumb":{"file":"node-1170x600.jpg","width":1170,"height":600,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/node-1170x600.jpg"},"penci-slider-thumb":{"file":"node-1170x663.jpg","width":1170,"height":663,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/node-1170x663.jpg"},"penci-magazine-slider":{"file":"node-780x516.jpg","width":780,"height":516,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/node-780x516.jpg"},"penci-slider-full-thumb":{"file":"node-1800x800.jpg","width":1800,"height":800,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/node-1800x800.jpg"},"penci-thumb":{"file":"node-585x390.jpg","width":585,"height":390,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/node-585x390.jpg"},"penci-masonry-thumb":{"file":"node-585x300.jpg","width":585,"height":300,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/node-585x300.jpg"},"penci-thumb-square":{"file":"node-585x585.jpg","width":585,"height":585,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/node-585x585.jpg"},"penci-thumb-vertical":{"file":"node-480x650.jpg","width":480,"height":650,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/node-480x650.jpg"},"penci-thumb-small":{"file":"node-263x175.jpg","width":263,"height":175,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/node-263x175.jpg"},"jr_insta_square":{"file":"node-640x640.jpg","width":640,"height":640,"mime-type":"image\/jpeg","source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/node-640x640.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0","keywords":[]}},"post":2344,"source_url":"https:\/\/blog.embold.io\/wp-content\/uploads\/sites\/2\/2021\/12\/node.jpg"},"translation":{"provider":"WPGlobus","version":"2.10.8","language":"es","enabled_languages":["en","es","de","fr","ru"],"languages":{"en":{"title":true,"content":true,"excerpt":false},"es":{"title":false,"content":false,"excerpt":false},"de":{"title":false,"content":false,"excerpt":false},"fr":{"title":false,"content":false,"excerpt":false},"ru":{"title":false,"content":false,"excerpt":false}}},"_links":{"self":[{"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/posts\/2344"}],"collection":[{"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/comments?post=2344"}],"version-history":[{"count":1,"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/posts\/2344\/revisions"}],"predecessor-version":[{"id":2346,"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/posts\/2344\/revisions\/2346"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/media\/2345"}],"wp:attachment":[{"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/media?parent=2344"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/categories?post=2344"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.embold.io\/es\/wp-json\/wp\/v2\/tags?post=2344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}