JavaScript DOM Scripting By Example Editing and Filtering Names Filter Invitees Who Have Not Responded

Owa Aquino
Owa Aquino
19,277 Points

A question on DOM selectors.

Hi Guys!

Just want to clarify about this two selector

by getting ahead on the video I used this code below:

const form = document.getElementById('registrar');
const input = form.querySelector('input');
const mainDiv = document.getElemenstByClassName('.main');
const ul = document.getElementById('invitedList');

const div = document.createElement('div');
const filterLabel = document.createElement('label');
const filterCheckbox = document.createElement('input');

filterLabel.textContent = "Hide those who haven't responded:";
filterCheckbox.type = 'checkbox';


div.appendChild(filterLabel);
div.appendChild(filterCheckbox);

mainDiv.insertBefore(div, ul);

but the console gave me an error that said "Uncaught TypeError: mainDiv.insertBefore is not a function".

but when I get back on the video and follow Guils code he uses quesySelector

const form = document.getElementById('registrar');
const input = form.querySelector('input');
const mainDiv = document.querySelector('.main');
const ul = document.getElementById('invitedList');

const div = document.createElement('div');
const filterLabel = document.createElement('label');
const filterCheckbox = document.createElement('input');

filterLabel.textContent = "Hide those who haven't responded:";
filterCheckbox.type = 'checkbox';


div.appendChild(filterLabel);
div.appendChild(filterCheckbox);

mainDiv.insertBefore(div, ul);

My question is isn't it supposed to do the same? I mean it should work as well. Because we only used different approach in selecting the class? Right?

I'll really appreciate your responses :)

Thanks!

Owa

1 Answer

andren
andren
28,360 Points

getElementsByClassName returns a HTMLCollection (list of Elements) even if there is only one matching Element. querySelector returns a single Element even if there are multiple matches. insertBefore is a method that belongs to an Element, not a HTMLCollection.

If you change your code to pull out the first Element from the HTMLCollection like this:

const mainDiv = document.getElementsByClassName('.main')[0];

Then that should work as well.

Owa Aquino
Owa Aquino
19,277 Points

This line here is what I really need : "insertBefore is a method that belongs to an Element, not a HTMLCollection."

Thank you very much sir!

Owa