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

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

[复制链接]
  • TA的每日心情
    慵懒
    2024-10-28 07:07
  • 签到天数: 193 天

    [LV.7]常住居民III

    716

    主题

    6018

    回帖

    6808

    积分

    管理员

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

    积分
    6808

    荣誉开发者喜迎中秋油中2周年生态建设者

    发表于 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
    可以看到拿到了所有章节元素加子元素!
    那么我们这节课就结束了

    结语

    撒花~

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。

    该用户从未签到

    0

    主题

    1

    回帖

    2

    积分

    助理工程师

    积分
    2
    发表于 2024-10-31 19:24:25 | 显示全部楼层
    大神   有点没看懂  小白怎么学习呀
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2024-10-28 07:07
  • 签到天数: 193 天

    [LV.7]常住居民III

    716

    主题

    6018

    回帖

    6808

    积分

    管理员

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

    积分
    6808

    荣誉开发者喜迎中秋油中2周年生态建设者

    发表于 2024-11-1 01:51:02 | 显示全部楼层
    hualang 发表于 2024-10-31 19:24
    大神   有点没看懂  小白怎么学习呀

    刚开始还是推荐按脚本开发指南前部分一点一点看
    前十章看完基本的就能写了
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    发表回复

    本版积分规则

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