Console is not showing some elements on document.getElementsByTagName("Button");-CodePudding

I want to get all the HTML Button elements in the console after clicking on an extension which of course changes the HTML code and adds new Buttons.

I am using document.getElementsByTagName("Button");

Clicking on an extension changes the HTML code which adds more buttons to the HTML code but I don't see and change on running : document.getElementsByTagName("Button"); in console** but after I right click on the new element and click on inpect (right click has to be on the new element or it doesn't show the new added html button elements) then it shows the new elements too.

What is happening here?

Let me show you some images:

1: Normal Webpage before clicking on extension

2: After clicking on extension new elements added but no change in console result

3: After right click on new buttons and clicking on inspect the console result changes

Some help will be really appreciated.

CodePudding user response：

Note that the buttons show in the console in the last view and the previous views are different. There aren’t extra, it is a completely different set. You can tell because the console shows completely different IDs and class names in the summary.

You are searching the document for button elements.

There are two documents on screen. The one in the main viewport and the one in the iframe generated by the extension.

The set of buttons you see depends on which document you are inspecting.

CodePudding user response：

document.getElementsByTagName("Button") returns an array with all found button elements

try

buttons = document.getElementsByTagName("button");
console.log(buttons[0]);

it logs the first found button, loop through the array to log them all

CodePudding user response：

YOU CAN TRY THIS

buttons = document.getElementsByTagName("button");

for (button of buttons) {
  console.log(button)
}

<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>