js动态加载的内容如何获取

xiaooooooo

cxxjackie 发表于 2023-6-10 23:18
你这个代码有好几处错误：首先是选择器写的不好，item_table有3个而你只需要1个，父级太宽泛也容易出现之 ...

大佬我又来了

两种方法我都试过 还是定位不到元素

// @match        https://www.aircanada.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=aircanada.com
// @require      http://cdn.bootcss.com/jquery/1.11.2/jquery.js
// @require      https://scriptcat.org/lib/513/2.0.0/ElementGetter.js
// @grant        GM_xmlhttpRequest

=====方法一=====
    elmGetter.each('ul.flight-block-lists li', column1 => {
    const company_name = column1.parent();
=====方法一结束=====

=====方法二=====

elmGetter.selector($);
elmGetter.each('ul.flight-block-lists li', company_name => {
=====方法二结束=====

    console.log(company_name);
    console.log('page is fully loaded');
    console.log('xx');
    var dataList = [];
        for (var i=0; i<company_name.length; i++){
            var departuretime = $(company_name).find('#itineraryDepartTime_0').text();
            dataList.push({
                'departuretime': departuretime
            });
        }
    console.log(dataList);
    });

这个网站的结构我观察下来应该是ul标签下，10个li标签在循环，数据都在li标签里面，所以我父级元素取的ul为啥还是不行呢？应该也不存在父级太宽泛

xiaooooooo

cxxjackie 发表于 2023-6-10 23:18
你这个代码有好几处错误：首先是选择器写的不好，item_table有3个而你只需要1个，父级太宽泛也容易出现之 ...

更新一下进展 后来我调试好了 代码如下：
elmGetter.selector($);
elmGetter.each('flight-row .flight-row-count', column1 => {
    const company_name = column1.parent()

    console.log(company_name);
    console.log('page is fully loaded');
    console.log('xx');

    var dataList = [];
    var departuretime = company_name.find('.itinerary-depart-time').text();
            dataList.push({
                'departuretime': departuretime
            });

    console.log(dataList);
});
所以这个还是一个需要通过子元素向上找父元素的情况？底层原理我还是不太清楚 只能在大佬教的3种方法里面遍历尝试

cxxjackie

xiaooooooo 发表于 2023-6-11 15:46
更新一下进展 后来我调试好了 代码如下：
elmGetter.selector($);
elmGetter.each('flight-row .flight-r ...

我试了一下，第二种方法能找到呀，后面时间出问题只是因为 '#itineraryDepartTime_0' 这句写错了而已，第一种则是缺了一句selector($)。你这三种只是父级选择的不同，其实父级是个相对的概念，只要能获取到需要的信息，选哪个都行，只是由于加载顺序的问题，外层可能先加载后内层再填充，所以会出现找到父级却找不到子级的问题。一般来说选择器范围越小越好，像这个你只需要时间的话，可以取 '.flight-row-head' 为选择目标，甚至只需要起始时间的话，取 '.depart-time' 直接一步到位。

xiaooooooo

本帖最后由 xiaooooooo 于 2023-11-21 15:46 编辑

本帖最后由 xiaooooooo 于 2023-11-21 15:44 编辑

cxxjackie 发表于 2023-6-7 21:08

这网站有点怪，我昨天测试的时候还能抓到元素插入的，今天又变成文本修改了，虽然有可能通过监听其他元素 ...

大佬 我模仿这个定位父级元素的方法写了如下代码 但是翻页的时候总是会有规律的漏掉1个元素（就是列表当中有10项，但是我这里数据有时候有9条，有时候甚至有12条） 可否指点我一下？

function getDataList(p) {
    const items_name = p.parents('div.tm-item-content');
    return {
        'url':'https://hot.taobao.com' + items_name.find('div a').attr('href')
    };
}
elmGetter.selector($);
elmGetter.each('div.tm-item-content div.bdl', p => {
    const dataList = getDataList(p);
    console.log(dataList);
});
const MutationObserver = window.MutationObserver || window.WebkitMutationObserver || window.MozMutationObserver;
const observer = new MutationObserver(mutations => {
    for (const mutation of mutations) {
        const parentNode = $(mutation.target.parentNode);
        if (parentNode.is('div.tm-item-content div.bdl div')) {
            const dataList = getDataList(parentNode);
            console.log(dataList);
        }
    }
});
observer.observe(document, {subtree: true, characterData: true});

cxxjackie

xiaooooooo 发表于 2023-11-21 15:31
[md]> 本帖最后由 xiaooooooo 于 2023-11-21 15:44 编辑

> [cxxjackie 发表于 2023-6-7 21:08](forum.php ...

是不是你的选择器写的不太对，看图 .bdl 不是每个子元素都带的，那些被漏掉的可能就是这些，要不试试取所有子元素，再写if过滤掉不需要的部分。