爬蟲3-BeautifulSoup find select findall (Python)

-

 

想知道BeautifulSoup 的詳細使用嗎?



快點進來吧~~~~

我們用金正恩的WIKI範例要爬取的目標是這一區塊的目錄



那他html是長這樣子(可以再Chrome按下F12打開devtool,就可以看到了)



HTML 解析:

在使用find和findAll還有select我們先把目錄區塊的HTML給攤開來

<div id="toc" class="toc" role="navigation" aria-labelledby="mw-toc-heading"><input type="checkbox" role="button"
        id="toctogglecheckbox" class="toctogglecheckbox" style="display:none">
    <div class="toctitle" lang="zh-Hant-TW" dir="ltr">
        <h2 id="mw-toc-heading">目錄</h2><span class="toctogglespan"><label class="toctogglelabel"
                for="toctogglecheckbox"></label></span>
    </div>
    <ul>
        <li class="toclevel-1 tocsection-1"><a href="#主要經歷"><span class="tocnumber">1</span> <span
                    class="toctext">主要經歷</span></a>
            <ul>
                <li class="toclevel-2 tocsection-2"><a href="#欧洲留学"><span class="tocnumber">1.1</span> <span
                            class="toctext">歐洲留學</span></a></li>
                <li class="toclevel-2 tocsection-3"><a href="#权力交接"><span class="tocnumber">1.2</span> <span
                            class="toctext">權力交接</span></a></li>
                <li class="toclevel-2 tocsection-4"><a href="#第三代领导人"><span class="tocnumber">1.3</span> <span
                            class="toctext">第三代領導人</span></a></li>
            </ul>
        </li>
        <li class="toclevel-1 tocsection-5"><a href="#政策態度"><span class="tocnumber">2</span> <span
                    class="toctext">政策態度</span></a>
            <ul>
                <li class="toclevel-2 tocsection-6"><a href="#核武和經濟並舉"><span class="tocnumber">2.1</span> <span
                            class="toctext">核武和經濟並舉</span></a></li>
                <li class="toclevel-2 tocsection-7"><a href="#外交政策的变化"><span class="tocnumber">2.2</span> <span
                            class="toctext">外交政策的變化</span></a></li>
                <li class="toclevel-2 tocsection-8"><a href="#政治清洗"><span class="tocnumber">2.3</span> <span
                            class="toctext">政治清洗</span></a></li>
                <li class="toclevel-2 tocsection-9"><a href="#人权問題"><span class="tocnumber">2.4</span> <span
                            class="toctext">人權問題</span></a></li>
            </ul>
        </li>
        <li class="toclevel-1 tocsection-10"><a href="#家庭"><span class="tocnumber">3</span> <span
                    class="toctext">家庭</span></a></li>
        <li class="toclevel-1 tocsection-11"><a href="#人物争议"><span class="tocnumber">4</span> <span
                    class="toctext">人物爭議</span></a>
            <ul>
                <li class="toclevel-2 tocsection-12"><a href="#生年争议"><span class="tocnumber">4.1</span> <span
                            class="toctext">生年爭議</span></a></li>
                <li class="toclevel-2 tocsection-13"><a href="#譯名問題"><span class="tocnumber">4.2</span> <span
                            class="toctext">譯名問題</span></a></li>
                <li class="toclevel-2 tocsection-14"><a href="#病危傳聞"><span class="tocnumber">4.3</span> <span
                            class="toctext">病危傳聞</span></a></li>
                <li class="toclevel-2 tocsection-15"><a href="#被塑造的形象"><span class="tocnumber">4.4</span> <span
                            class="toctext">被塑造的形象</span></a></li>
            </ul>
        </li>
        <li class="toclevel-1 tocsection-16">
            <a href="#所获荣誉">
                <span class="tocnumber">5</span>
                <span class="toctext">所獲榮譽</span>
            </a>
        </li>
        <li class="toclevel-1 tocsection-17"><a href="#影視形象"><span class="tocnumber">6</span> <span
                    class="toctext">影視形象</span></a></li>
        <li class="toclevel-1 tocsection-18"><a href="#注释"><span class="tocnumber">7</span> <span
                    class="toctext">注釋</span></a></li>
        <li class="toclevel-1 tocsection-19"><a href="#參考文獻"><span class="tocnumber">8</span> <span
                    class="toctext">參考文獻</span></a></li>
        <li class="toclevel-1 tocsection-20"><a href="#外部链接"><span class="tocnumber">9</span> <span
                    class="toctext">外部連結</span></a></li>
        <li class="toclevel-1 tocsection-21"><a href="#关联条目"><span class="tocnumber">10</span> <span
                    class="toctext">關聯條目</span></a></li>
        <li class="toclevel-1 tocsection-22"><a href="#参见"><span class="tocnumber">11</span> <span
                    class="toctext">參見</span></a></li>
    </ul>
</div>

我們先可以確切地找到目錄這個節點,並且print出來

<div id="toc" class="toc" role="navigation" aria-labelledby="mw-toc-heading">

find()用法:

把find想像是找到一個節點的所有資料

  • css搜尋
root = soup.find('div',class_="toc")
print(root)
  • html搜尋
root = soup.find('id = toc")
print(root)

這樣第一步就可以找到目錄的節點啦,我們再來看看如何使用find_all吧

find_all():

在使用find_all之後可以找到所有的子節點,並且會存成陣列的資料結構

root_child = root.find_all('li','toclevel-1')
print(root_child)

select():

使用Select可以更精密的對資料做爬取

# here is use select with html print
select_data = soup.select('div.toc > ul > li.toclevel-1')
print(select_data)

div.toc > ul > li.toclevel-1

  • 在於這邊">"的意思就是下一個節點的意思
  • "."的意思則是class 的意思

那我們可以利用這樣的方式可以更細部的拿取資料

小結:

當網站的class 或是html結構有改變了,在find 跟findall 你可以知道說哪個環節出錯了,而進行debug,使用select 雖然程式碼很簡略但你會不知道是哪個結構改變了,必須重新了解網站的架構

下一篇文章我們來談談如何儲存這些資料吧

說了這麼多,看完文章你做了甚麼?





還不給我分享起來~(ʘ言ʘ╬)

留言

張貼留言

這個網誌中的熱門文章

Vue那些我踩過的坑(Vuex-TypeScript)

-
圖片
在var來var去的同時雖然很方便,但也留下了許多技術債,在專案變大的同時未來是需要還的,但是在Vuex裡面使用TypeScript是非常痛苦的,因為VUEX本身的寫法是不支援TypeScript,這邊我示範一下如何重新定義store能夠好好低與typeScript結合吧 Store結構: type,是定義本身型別放置的地方 store │ index.ts │ type.ts │ └───rootComic actions.ts getters.ts index.ts mutation.ts type.ts index.d.ts: 我們可以從index底層Store的code,看到有個模板可以轉換成你想要的物件,裡面的 <S> 就是你定義的型別 export interface StoreOptions<S> { state?: S | (() => S); getters?: GetterTree<S, S>; actions?: ActionTree<S, S>; mutations?: MutationTree<S>; modules?: ModuleTree<S>; plugins?: Plugin<S>[]; strict?: boolean; devtools?: boolean; } Store定義: Step1: 開一個type.ts的檔案宣告我們 <S> 的型別,State本是個放資料的地方,要放資料的地方一定少不了interface,我們就以interface的方式來定義我們的state吧 export interface RootState { "rootmessage": string } Step2: 原本的寫法 import { createStore } from 'vuex' export default createStore({ state: { }, mutations: { }, actions: { }, modules: { } });
閱讀完整內容

Vue(Vue3取代 Vuex?)

-
圖片
  哎呀,以前在資料管理的部分都被Vuex綁死死,但是在typescript相對來說是很不友善的(我有寫一篇 for vuex在typescript 去定義),自從我用了vue3 的composition API及reactive 就直接使用了 yarn remove vuex ,在typescript的世界裡就是要清清楚楚,簡簡單單,甚麼模板轉換的才不需要呢 我們來創自己管資料的地方吧 type.ts: export interface InterComicsData extends InterGenre { id: string; mainIndex: string; mainIndex_name: string; descr: string; link: string; title: string; thumbnail_name: string; thumbnail_url: string; lastUpdateTime: string; createTime: string; genreDatas: InterGenre[]; } export interface InterGenre { id: string; rootComics_id: string; name: string; } export interface InterComics { comicDatas: InterComicsData[]; genreDatas: InterGenre[]; pageLimit: Number; } comics.ts: 我有做一個漫畫站,這邊是用來管理comics的地方 import Vue, { reactive, defineComponent, readonly } from "vue"; import { InterComicsData, InterComics, InterGenre } from "@/store/comics/type"; import axios from "axios"; import * as data
閱讀完整內容

前端優化效能-1(lazy-img)

-
圖片
在Chrome底下可以使用在img DOM加入 loading="lazy" 就可以直接使用懶加載了,或者裝線上有的plugin也可以的(但是我喜歡自己來) <img src="image.png" loading="lazy" alt="..." /> 但IE跟Safari是不支援這樣的語法的,所以只好自己幹一個了,我們來用 IntersectionObserver吧(結果IE 也沒支援attribute QAQ) //註冊在讀取圖檔時要做的事情 window.addEventListener('load', () => {      const watcher = new IntersectionObserver(onEnterView) const elementArrary = document.getElementsByClassName('your_imgName'); for (let image of elementArrary) { watcher.observe(image) // 開始監視 } } //IntersectionObserver 的call back function onEnterView(entries: IntersectionObserverEntry[], observer: IntersectionObserver) { for (let entry of entries) { if (entry.isIntersecting) { // Element show on the loadImage(entry.target) // cancel watch observer.unobserve(entry.target) } } } // load img logic function loadImage(img: HTMLImageElement) { const removeMockup = (
閱讀完整內容