查询 DOM 时跳过容器内的元素

Question

当使用querySelectorAll 或任何 DOM 查询方法时，我想跳过给定子容器中的元素进行查询。

示例：

<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>

假设在上述情况下，如果您从#container-one 元素查询，您想跳过#container-two 中的元素。因此，#container-one 上的查询应该只返回 [first, second] 元素并跳过其他元素（第三、第四）。

感谢任何输入。

Answer 1

试试这个：

document.querySelectorAll('div.container-one')[0].querySelectorAll(':scope > input')

更新（此时你不能使用 querySelectorAll）：

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
    }
}