上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

[脚本实战篇]制作按钮以及获取元素

[复制链接]
  • TA的每日心情
    开心
    23 小时前
  • 签到天数: 53 天

    [LV.5]常住居民I

    352

    主题

    3091

    帖子

    3100

    积分

    管理员

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    3100

    猫咪币纪念章国庆纪念章中秋纪念章荣誉开发者家财万贯管理员

    发表于 2022-5-10 22:33:47 | 显示全部楼层 | 阅读模式

    首先我们直接写一个简单的脱离页面的开始刷课按钮

    let btn=document.createElement("div");
    btn.innerHTML='<button style="position: fixed;bottom: 80vw;right: 0;z-index: 99;height: 50px;">开始刷课</button>';
    btn.onclick=function(){
        //code
        alert("点击了按钮");
    }
    document.body.append(btn);

    一旦点击就开始搜索元素
    效果如下
    图片.png
    接下来开始写分析页面尝试写出自动点击工具
    一旦点击章节会post读取对应的章节属性
    图片.png
    如果点击某些章节,还会出现子章节,并且也会post读取章节属性
    图片.png
    所以我们可以总结出两点
    1.章节存在视频
    2.章节存在子章节
    3.即使存在子章节也有可能存在视频
    如果我们摊开dom元素看
    就可以发现noContent是只存在视频的,而不存在noContent的是存在子章节的

    图片.png
    我们再观察有章节的,也就是不存在noContent的class元素的属性
    可以发现,内部直接显示了子章节
    图片.png
    那么我们的逻辑就非常明确了
    1.获取noContent的章节
    2.获取没有noContent的父章节
    3.获取没有noContent的父章节的子章节
    把三个章节都给合并到一个数组里
    理论建立完毕,开始实战
    document.querySelectorAll(".shareResources > .panel-group > li")
    男人就要猛一点,我们直接获取所有第一级的章节
    然后获取不为noContent的class元素,遍历读取子章节
    我们使用not反选符获取到所有没有noContent的class类的元素
    图片.png
    然后我们可以再在其元素上再调用querySelector,这个时候可以使用foreach循环
    因为这部分比较简单
    所以直接上代码

        ChapterList=ChapterList.concat(...document.querySelectorAll(".shareResources > .panel-group > li"))
        let ParentChapert= document.querySelectorAll(".shareResources > .panel-group > li:not(.noContent)")
        ParentChapert.forEach((item) => {
            ChapterList=ChapterList.concat(...item.querySelectorAll(".chapter-content [data-secid]"))
        });
    
        console.log('ChapterList',ChapterList)

    图片.png
    可以看到拿到了所有章节元素加子元素!
    那么我们这节课就结束了

    结语

    撒花~

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表