デベロッパーツールで即席即興スクレイピング

# **[+]javascriptで頑張る**

## getElementsByXPathを作成する

```javascript
document.getElementsByXPath = function(expression, parentElement) {
	var r = []
	var x = document.evaluate(expression, parentElement || document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null)
	for (var i = 0, l = x.snapshotLength; i < l; i++) {
		r.push(x.snapshotItem(i))
	}
	return r
}
```

## xpathの取得

デベロッパーツールを利用して、スクレイピング対象のオブジェクトのxpathをコピーする

## getElementsByXPathを使用してelementオブジェクトを取得する

```javascript
var t = document.getElementsByXPath('//*[@id="request-table-form-failed-download-file-unknownmime-simple"]/table/tbody')[0]
```

## childrenを使用して目的のelementオブジェクトまで到達する

```javascript
var i = 1
t.children[i].children[0].children[0] //<input name="name-0" type="checkbox" value="value-0">
```

## setAttributeで属性をセットする

```javascript
var i = 1
var victim = t.children[i].children[0].children[0];
victim.setAttribute("checked", true);
```

## ループで回す

```javascript
for(var i = 1; i < t.children.length; i++){
    var victim = t.children[i].children[0].children[0];
    victim.setAttribute("checked", true);
}
```

## 関数にする

```javascript
function check_all(tbody_xpath){
    var t = document.getElementsByXPath(tbody_xpath)[0];
    for(var i = 1; i < t.children.length; i++){
        var victim = t.children[i].children[0].children[0];
        victim.setAttribute("checked", true);
    }
}
```

## その他使えるメソッド

### ・elementオブジェクト

#### childnodeを追加する

```javascript
appendChild(m);
```

# **[+]jQueryを使用する**

## jQuery入門

・基礎
https://qiita.com/Tocyuki/items/0b42c9225aafc995167a

・セレクタ
https://qiita.com/Thought_Nibbler/items/5d4fc40a4d4325128b24

・ループ
http://www.task-notes.com/entry/20140725/1406216933

## 便利なjQueryメソッド

・find(属性)
・attr(属性)
・attr(属性, パラメータ)
・victims.each(function(i, victim){ 処理 })

## jQueryがロードされているか確認

```javascript
> $
function $(selector, [startNode]) { [Command Line API] } // not loaded
function (e,n){return new x.fn.init(e,n,t)} // loaded
```

## jQueryのロード

jQueryがロードされていなかった場合は[コレ](https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js)を全文コピーして、コンソールにペースト

## スクレイピング

```javascript
jQuery(document).ready(function($){
  // ここに好きなようにスクレイピングを記述する。
});
```

## xpathメソッド/$x関数を作成

```javascript
(function(jQuery){
 jQuery.xpath = function(selector, context){
  context = context || jQuery(document);
  var r, res=[];
  context.each(function() {
   r = document.evaluate(selector, this, null, 7, null);
   for(var node_no=0; node_no<r.snapshotLength; node_no++){
    res.push(r.snapshotItem(node_no));
   }
  });
  return new jQuery(res);
 };
 jQuery.extend(jQuery.prototype, {xpath: function(selector){return jQuery.xpath(selector, this);}});
})(jQuery);
var $x = jQuery.xpath;
```

### ・使い方

```javascript
var result = $("#id_0").xpath('//*[@id="footer"]/div/div/nav[1]/h5')
var result = $x('//*[@id="footer"]/div/div/nav[1]/h5') // 第二引数にjQueryオブジェクトを渡すことで範囲を絞ることが可能
result.length // 要素数
result[0] // 0番目の要素
result.find('input') // 内部のinputタグのリストを作成
```

## 先程の関数をjQueryで実装する

```javascript
function check_all(tbody_xpath){
    var result = $x(tbody_xpath);
    var victims = result.find('input');
    victims.each(function(i, victim){ $(victim).attr("checked", true); }); // $(victim)とすることによってelementオブジェクトをjQueryオブジェクトにしている
}
```