当我输入这段代码时：

window.onload = function(){
    var inputs = document.querySelectorAll("input[type=text]");
    console.log(inputs.length);
    for(var j=0; j<inputs.length; j++){
        inputs[j].onclick = function(){
            this.style.width = "500px";
        }
    }
}

在 html 页面中，它工作得很好，但如果我将其放入外部 .js 文件中，for 循环永远不会启动，因为 input.length 等于 0，即使在调用脚本的页面中有大量输入。可能是什么问题呢？

更新：我发现代码在正常条件下可以工作，但事实并非如此：

• 对于先前隐藏的 div 中包含的输入，然后通过 js 显示我的坏处，隐藏的输入是“电子邮件”类型
• 在每个输入上，如果它们是通过 ajax 加载的，我发现了原因：因为该函数仅在窗口加载时被触发，所以它不会看到加载的输入

当我循环通过 querySelectorAll 获得的节点列表并为每个节点添加一个新类时，它花费的时间（3ms）比 getElementsByClassName(100ms) 获得的时间少得多。为什么？

var container = document.getElementById('box-container');
var button = document.getElementById('button');

for (var i = 0; i < 3000; i++) {
  var div = document.createElement('div');
  div.classList.add('box');
  div.index = i;
  container.appendChild(div);
}

button.addEventListener('click', function() {

  var box1 = container.getElementsByClassName('box');
  for (var i = 1;i < box1.length; i+=2){
      box1[i].classList.toggle('gray');
  };

  var box2 = container.querySelectorAll('.box');
  for (var i = 1;i < box2.length; i+=2){
      box2[i-1].classList.toggle('gray');
  };

});

在下面的代码中，标记为“添加更多”的按钮未按预期运行。理想情况下，它应该将输入值添加到页面上的无序列表中。相反，我收到以下错误：

未捕获的类型错误：document.queryselector 不是函数

页面代码

<div id="root">
    <input type="text" id="input" v-model="message"/>

    <p>The value of the input is : {{message}}</p>

    <ul>
        <li v-for="n in names" v-text="n"></li>
    </ul>

    <input id="input1" type="text"/>

    <button id="button"> Add More </button>
</div>

<script>
    var app = new Vue ({
        el : '#root',
        data : {
            message : 'Hello World!',
            favourite : 'author',
            names : ['Sunil' , 'Anis' , 'Satyajit']
        },
    });

    document.queryselector('#button').addEventListener('click', function(event) {
        var n = document.queryselector('#input1');
        app.names.push(n.value);
        n.value = '';
    });

</script>

每当我querySelectorAll在 Microsoft Edge 中使用:scope伪选择器时，控制台中都会出现此错误

SCRIPT5022： SCRIPT5022：语法错误

我想知道是否有替代方案querySelectorAll，我在其中使用此参数：:scope > * > table。我不想为此使用 jQuery。谢谢。

编辑：

我还想补充一下querySelector它本身就有效

好的，这是代码示例：

            function pJSON(panel) {
                var json = {tables: [], images: [], text: ""};
                var tables = Array.from(panel.querySelectorAll(":scope > * > table"));
                var images = Array.from(panel.querySelectorAll(":scope > * > img"));
                var text = panel.querySelector(":scope > textarea");
                tables.forEach(table => {
                    json["tables"].push(tJSON(table));
                });
                images.forEach(image => {
                    json["images"].push(image.outerHTML);
                });
                if (text) {
                    json["text"] = text.value;
                }
                return json;
            }

我要再次指出，它适用于除 …

我有一个案例需要在页面上选择不同的节点组,我需要排除某些子元素.我最常见的任务是选择所有<img>元素,但不选择某些元素的后代.

以我的小提琴为例:http://jsfiddle.net/rjdbys13/ 我有2个<div>,每个都有一个<img>内部.我想选择所有图像,但不能选择其中一个图像<div>(都有不同的类).

要做到这一点,这适用于jQuery和Sizzlejs,我可以使用像这样的选择器img:not(.amazingDiv img).根据我的理解,这将选择所有<img>不<div>包含s 的后代的元素amazingDiv.这很好,正如我所说的那些支持更详细:not语法的库,但它失败并出现错误querySelectorAll:

Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Document': 'img:not(.amazingDiv img)' is not a valid selector.

我真的想避免对我收集的元素进行任何"后处理",那么有没有办法通过使用来实现我正在寻找的东西querySelectorAll？(我也试过使用库"qwery","微选择器"和"坚果")

编辑:由于我搜索选择器组合以支持一些复杂的:not功能是徒劳的,我选择使用第三方选择器引擎 - 捷豹(github.com/alpha123/Jaguar).这不是主意,而且速度较慢,但​​最终结果可能更有效,因为我不需要"后处理"我的结果.

您好我如何组合我的document.querySelectorAll如果我有这样的情况:

<div>
 <p class="flower">Flower 1</p>
 <p class="bee">Bee 1</p>
 <p class="tree"></p>
</div>

<div>
 <p class="flower">Flower 2</p>
 <p class="dude"></p>
 <p class="snow-leopard"></p>
</div>

<div>
 <p class="flower">Flower 3</p>
 <p class="tree"></p>
 <p class="mountain"></p>
 <p class="wizard"></p>
 <p class="bee">Bee 3</p>
</div>

我一直想选花,如果有一只蜜蜂,我想将它附在花上,我不在乎其余的.花和蜜蜂在div中没有​​特定的顺序,有些情况下没有蜜蜂.还假设花和蜂有一个类,但结构的其余部分不像示例中那样干净.到目前为止,我唯一的解决方案是升级几个级别然后使用正则表达式.最后我想把它们都包含在一个json中:

[{flower: "yellow", bee:"bumblebee"},...]

这种方法:

var flowers = document.querySelectorAll(flower);
var bees = document.querySelectorAll(bee);

然后在两个阵列上进行迭代不起作用.

如果我有那个字符串:`

document.querySelectorAll("[data-name=" + CSS.escape(variable) + "]","[class='nameclass']");

它采用具有第一个属性的所有元素和具有第二个属性的所有元素.

我如何只采取每个属性的元素？

我正在寻找一种方法来查找包含以给定字符串开头的属性的所有元素。例如：

document.querySelectorAll('[ng-*]')将返回与角指令的所有元素（ng-click，ng-show，ng-hide...）。

但是通配符似乎不起作用。

有任何想法吗？我可以实施自己的方法，但是效果不佳。

参考答案：https : //stackoverflow.com/a/38399344/5132413

请参考我的问题，上面链接的答案仅适用于 Firefox、Chrome 和 Opera。

我做了一些研究，发现它（不区分大小写标志）不兼容。我需要 IE、Edge 和 Safari 中的等效项。

var divs = document.querySelectorAll('div[class^="foo" i]');

我有这个代码。

const elements = [...document.querySelectorAll('.someClass')]

的组合：

• 查询选择器全部
• 点差运算符

我不知道如何将 Typescript 类型添加到这一行。

我从控制台收到错误：

TS2548: Type 'NodeListOf<Element>' is not an array type or does not have a '[Symbol.iterator]()' method that returns an iterator.