javascript - 降低 Javascript 中 DOM 搜索频率

Question

我正在从一个小项目中删除 Jquery 并使用 vanilla js 重写脚本。在当前代码中，有一个 jquery 实现来搜索 DOM 元素，然后使用 jquery 'find' 来搜索元素内的特定元素。

var ImageCapture ={
    cacheDom : function(){
        this.form = $('#drawingBoard');
        this.saveBtn = this.form.find('#saveBtn');
        this.image = this.form.find('#image');
        this.results = this.form.find('#results');
    }
}

我已将上面的 Jquery 代码转换为 vanilla js，如下所示。

var ImageCapture ={
        cacheDom: function () {
            this.form = document.getElementById('drawingBoard');
            this.saveBtn = this.form.querySelector('#saveBtn');
            this.image = this.form.querySelector('#image');
            this.results = this.form.querySelector('#results');
        }
    }

新的实现似乎工作正常，但我想确定这是否是使用 vanilla JS 替换 Jquery 实现的正确方法？

提前致谢。

Answer 1

我制作了两个 jsfiddles 来向您展示普通 js querySelectorAll 和 jQuery 选择器之间行为上的细微差别。您自然会期望它们表现相同，但事实并非如此。

这是纯js版本:https://jsfiddle.net/a81e2do3/

这是 jQuery:https://jsfiddle.net/a81e2do3/1/

简而言之，如果你有这个 html:

div#a > div#b > div#c

如果你有一个 #b 的普通 JS 元素节点对象，你可以执行 b.querySelector('#a #c') 并成功选择 div#c，但你不能在jQuery(在我看来，jQuery 方式更有意义)。