---
# System prepended metadata

title: 組會分享

---

本次教材：https://www.jpmorgan.com/technology/artificial-intelligence/ai-research-publications
## 前情提要
### DOM簡介
DOM(Document Object Model)文件物件模型
> Document: 指的就是HTML或是XML文件
> Object: 指的就是文件裡面的物件，那麽誰是物件呢？各種 html tag、屬性、文字等都是
> Model: 指的就是這些物件佈局的方式
> 參考:
https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Using_the_Document_Object_Model

## 如何抓取 DOM 物件與加工

#### 用 querySelector(‘裡面放字串’) 字串要放 DOM 選擇器（Selector）
```javascript=
document.querySelector('.headline-medium').innerText
```
```javascript=
document.querySelector('.headline-medium').innerText = '精算組組會分享'
```

## 需要知道的語法，有興趣可了解
```javascript=
document.querySelector('')
document.querySelectorAll('')

var matches = document.querySelectorAll("p");
var matches = document.querySelectorAll("div.note, div.alert");
```
https://developer.mozilla.org/zh-TW/docs/Web/API/Document/querySelector
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

## 實作

- step1:先觀察結構

- step2:先嘗試抓一段
:star:keypoint:嘗試做成 json 格式，方便轉成 csv 或 xlsx download 下來

- step3:把全部抓下來
:star:keypoint:嘗試做成 object array


參考:
1. 範例程式

```javascript=
let objs = [];

// 選擇所有包含所需數據的父元素
const entries = document.querySelectorAll('div.if.bibtexentry');

// 對每個父元素進行遍歷
entries.forEach(entry => {
    // 在當前父元素範圍內提取信息
    const authorElement = entry.querySelector('span.author');
    const journalElement = entry.querySelector('span.journal');
    const titleElement = entry.querySelector('span.title');

    // 創建一個新對象來存儲提取的信息
    let obj = {
        author: authorElement ? authorElement.innerText.trim() : '',
        journal: journalElement ? journalElement.innerText.trim() : '',
        title: titleElement ? titleElement.innerText.trim() : ''
    };

    // 將對象添加到結果arr中
    objs.push(obj);
});

// 輸出結果
console.log(objs);
```

2. json轉csv:https://data.page/json/csv

3. 三元運算子:
https://hackmd.io/@CynthiaChuang/Python-Ternary-Operators