异步获取元素的脚本库 ElementGetter

cxxjackie

pawjazz 发表于 2024-11-27 13:55
一直再用大佬这个库, 基本上都跑得很6, 今天报告一个性能问题
最近遇到一个下拉菜单(框架是Vue) 有一千多项 ...

看起来不太好优化，attributes是属性监听，目的是在节点发生属性变化时触发检查，以确保属性选择器和类选择器可以正确生效，例子的话参考本贴45楼。你这种情况应该是页面在短期内发生了很多次属性变化引起的，硬要优化的话只能人为加延迟（代码参考本贴44楼），但又会影响正常情况下的实时性，老实说我也不知道要如何取舍比较合适。

cxxjackie

pawjazz 发表于 2024-11-27 13:55
一直再用大佬这个库, 基本上都跑得很6, 今天报告一个性能问题
最近遇到一个下拉菜单(框架是Vue) 有一千多项 ...

已更新2.0.1尝试对这个问题进行优化，仅针对css和jquery选择器，请测试下问题有没有改善。

pawjazz

cxxjackie 发表于 2024-11-30 22:15
已更新2.0.1尝试对这个问题进行优化，仅针对css和jquery选择器，请测试下问题有没有改善。 ...

测试下来, 只能用丝滑来形容!
感谢大佬!!!

szzxc

同源iframe：指定父节点为iframe.contentDocument即可。
shadow DOM：指定父节点为shadowRoot即可。若使用XPath选择器，则父节点不能为shadowRoot，但可以shadowRoot内的元素为目标，参考以下示例：

const shadowRoot = document.querySelector('#shadow_dom').shadowRoot;
const div = shadowRoot.querySelector('div');
elmGetter.selector('xpath');
elmGetter.each('.//*', div, el => {
    console.log(el);
});
// 错误用法：
elmGetter.get('.//*', shadowRoot); // '#document-fragment' is not a valid context node type.
综合示例

这个不太明白怎么用， 例如同源的iframe id = "zxcIframe", 下的某个元素，CSS选择器出来的结果： #auxixxxx_xxline0col0_id > section > pre ， 要如何写才能判断这个元素的出现。

cxxjackie

szzxc 发表于 2025-2-7 16:06

同源iframe：指定父节点为iframe.contentDocument即可。
shadow DOM：指定父节点为shadowRoot即可。若使用X ...

function getIframeDocument(iframe) {
    return new Promise(resolve => {
        if (iframe.contentDocument) {
            resolve(iframe.contentDocument);
        } else {
            iframe.addEventListener('load', e => {
                resolve(iframe.contentDocument);
            });
        }
    });
}

(async function() {
    const iframe = await elmGetter.get('#zxcIframe');
    const parent = await getIframeDocument(iframe);
    const el = await elmGetter.get('#auxixxxx_xxline0col0_id > section > pre', parent);
})();

szzxc

2.0 2.0.1
if (reason === 'attr') return matches.call(parent, selector) ? [parent] : [];
if (reason === 'attr') return matches.call(parent, selector) ? parent : null;

部分网页会出现 Uncaught TypeError: Cannot read property 'call' of undefind   

cxxjackie

szzxc 发表于 2025-2-11 11:24
2.0 2.0.1
if (reason === 'attr') return matches.call(parent, selector) ? [parent] : [];
if (reason ...

看124楼回复，解决不了的话提供一下页面链接：
https://bbs.tampermonkey.net.cn/ ... =2726&pid=74840

szzxc

cxxjackie 发表于 2023-12-11 22:08
根据错误信息推测是matches有问题，可能浏览器不兼容（那其他页面应该也会报错），或者该页面劫持了match ...

修改start 还是会。但是用来旧版的ElementGetter1.21的版本 加上const elemGetter = new ElementGetter(jQery) 就不会出现call的错误。

cxxjackie

szzxc 发表于 2025-2-14 09:05
修改start 还是会。但是用来旧版的ElementGetter1.21的版本 加上const elemGetter = new ElementGetter(jQ ...

jquery选择器是不会报错呀，因为jquery就没走matches逻辑，新版的用selector方法切换选择器类型。

szzxc

cxxjackie 发表于 2025-2-14 22:50
jquery选择器是不会报错呀，因为jquery就没走matches逻辑，新版的用selector方法切换选择器类型。 ...

所以只能用旧版的么？const elemGetter = new ElementGetter(jQery)  多了这个，2.0 在使用好像1.X好像也没太多区别吧。 一般就是each这个来找元素。。