Skip elements within a container when querying DOM - dom

Question

When using querySelectorAll or any DOM query method, I want to skip elements within a given sub-container from querying.
Example:
<div id="container-one">
<div>
<input type="text" name="first">
<input type="text" name="second">
<!-- skip below -->
<div id="container-two">
<input type="text" name="third">
<input type="text" name="fourth">
</div>
<div>
</div>
Suppose in the above case, if you are querying from #container-one element you want to skip elements within #container-two. So the query on #container-one should only return [first, second] elements and skip others (third, fourth).
Appreciate any inputs.

Answer 1

Try this:
document.querySelectorAll('div.container-one')[0].querySelectorAll(':scope > input')
Update(You can't use querySelectorAll for this then):
inputs = document.getElementsByTagName("input");
input_two = document.getElementById('container-two').getElementsByTagName('input');
var input_cont_two_name_array = [];
for(j=0;j<input_two.length;j++){
input_cont_two_name_array.push(input_two[j].name);
}
for(i=0;i<inputs.length;i++){
input_name_id = inputs[i].name;
if(input_cont_two_name_array.indexOf(input_name_id) == -1){
//do your stuff
}
}