Surely a pretty Nubian question, but is there an easy way, through code or with an extension / in some section, to find the ID of a specific element? Enter into the console and get all the elements, and then manually sort through each number, especially if there are more than 400+ of them a very inconvenient process. I understand that I am missing something obvious and is there an easier way?

Additional explanation:

Suppose I know that some element I need is in the array document.querySelectorAll('что-либо') , how can I immediately find out by what [тут_идентификатор] it is?

  • 2
    who is he? How is it different from other elements? Why do you need it? - MedvedevDev
  • Does this mean it? Chrome -> right click on the element -> "View code" -> In the Developer Tools window, right click on the highlighted fragment -> "Copy" -> "Copy selector" - Yaant
  • array [i] .id ... - Alexander
  • @MedvedevDev "he" is a specific element; @ Yaant no, not that; I will try to explain this way: Suppose that when I type document.querySelectorAll('что-либо') into the console, I’ll get a NodeList(200) . I know that I need a specific element from “something” and I can click on the element outside the console “View code” and see the contents of this element inside the page. But in order to get the contents of this element through the command, I need to enter document.querySelectorAll('что-либо')[число] into the console, how can I find out the number under which this element is located, except by manually examining the NodeList ? - sudy
  • @sudy Well, here is the sequence of actions I have provided and allows you to get a selector on the clipboard for a specific element, which you can then paste into the console, and use, for example, as document.querySelector('сюда вставить полученный селектор') . Anyway, not that? - Yaant

1 answer 1

Even after the explanations, nothing is clear, especially what is the scope ... Well, that would not be poured from empty to empty, then I will describe the code with exactly what you yourself wrote ... you have n objects, you can output them , you can click on the desired, it would seem, you yourself have described everything that needs to be done, but ...

 const items = document.getElementsByClassName('block_item'); Object.keys(items).forEach(k => items[k].addEventListener('click', e => console.log(` Привет! Я элемент номер ${k}. Во мне лежит: ${items[k].innerHTML} `))); 
 .block_item { height: 30px; line-height: 30px; text-align: center; } .block_item:nth-child(1) { background-color: red; } .block_item:nth-child(2) { background-color: orange; } .block_item:nth-child(3) { background-color: yellow; } .block_item:nth-child(4) { background-color: green; } .block_item:nth-child(5) { background-color: blue; } 
 <div class="block"> <div class="block_item"><span>0</span></div> <div class="block_item"><span>1</span></div> <div class="block_item"><span>2</span></div> <div class="block_item"><span>3</span></div> <div class="block_item"><span>4</span></div> </div>

I propose to continue the explanation of the problem based on this implementation, and not on incomprehensible document.querySelectorAll('что-либо') .