Привет! Это первая статья на данном блоге и первая из цикла «Парсер фоловеров для Instagram». Цель её написания — шаг за шагом и как можно понятней описать процесс написания на java script не большого кода для получения списка подписчиков аккаунта Instagram. В конечном итоге должна получиться инструкция в которой постараюсь всё объяснить так чтобы стало понятно самому.

Работать будем в консоли Google Chrome. Именно в ней в дальнейшем будем запускать наш чудо-парсер. Открыть её можно как минимум двумя способами:
1. F12;
2. Сочетанием Ctrl + Shift + I.

Необходимо установить дополнительный плагин ChroPath это один из инструментов разработчика. Нам он понадобится для нахождения  названий классов тегов html-элементов которые в дальнейшем будем использовать в качестве переменных.

Находим человека в Instagram чей список фоловеров не даёт спокойно спать по ночам. Ну допустим пусть это будет инcта Васи Петушка. Персонаж не знакомый и попался под руку обсалютно случайно. Планировал конечно полакомиться фоловерами Ольги Бузовой, но сия секта просто так (надо подписаться) своих мемберов не выдаёт. Вернёмся к нашему Васе. На момент написания этой статьи у него было аж 23 подписчика.

Переходим по ссылке followers затем открываем консоль разработчика (кто-то называет консоль вебмастера). В консоли: Elements, затем выбрать ChroPath.

Теперь давайте искать значения классов для  наших будущих переменных которые в дальнейшем будем применять используя метод document.getElementsByClassName() — читать подробнее о методе. Нам надо найти имя класса  div списка (в дальнейшем переменная div_list), класса ul списка (ul_list) и класса li списка (li_list).

Для div_list значение = isgrP.

Для ul_list значение = jSC57 _6xe7A. Объект ul лежит внутри div.

Для li_list значение = wo9IH. Обратите внимание что ChroPath посчитал сколько их на странице. 23 — это колличество записей (в данном случае подписчиков) содержащихся в списке.

Напишем первые строчки кода, задекларировав переменные о которых писал выше:
var div_list = document.getElementsByClassName(«isgrP»);
var ul_list = document.getElementsByClassName(«jSC57 _6xe7A»);
var li_list = document.getElementsByClassName(«wo9IH»);

Добавим ещё несколько значений:
var var account = 0; (0-сбор всех имён);
var h1_class = document.getElementsByClassName(«m82CD»)[0];


var tag_div = h1_class.getElementsByTagName(«div»)[0];
var title = tag_div.innerHTML;

В зависимости от того какой title будет появляться в заголовке окна будем использовать разны условия выбора. Опишем их:

if (title == «Подписчики» || title == «Followers») {
var total_account= document.getElementsByClassName(«g47SY»)[1].innerHTML;
}
else {
var total_account= document.getElementsByClassName(«g47SY»)[2].innerHTML;
}

В консоли можем вывести колличество аккаунтов которые мы спарсим:

total_account= total_account.match(/[^»]+/g).join(»).match(/[^\s]+/g).join(»).match(/[^,]+/g).join(»);
console.log(‘Аккаунтов для сбора у бедолаги: ‘ + total_account + ‘ ‘);

В итоге у нас пока получился вот такой код, который уже можно использовать в консоли разработчика для подсчёта фоловеров человека при условии что они будут открыты:

var div_list = document.getElementsByClassName("isgrP"); 
var ul_list = document.getElementsByClassName("jSC57  _6xe7A"); 
var li_list = document.getElementsByClassName("wo9IH"); 
var account = 0;
var h1_class = document.getElementsByClassName("m82CD")[0]; // класс тега h1 заголовка окна
var tag_div = h1_class.getElementsByTagName("div")[0]; // тег div заголовка
var title = tag_div.innerHTML;

if (title == "Подписчики" || title == "Followers") {
    var total_account = document.getElementsByClassName("g47SY")[1].innerHTML;
} 
else 
{
    var total_account = document.getElementsByClassName("g47SY")[2].innerHTML;
}
total_account = total_account.match(/[^"]+/g).join('').match(/[^\s]+/g).join('').match(/[^,]+/g).join('');
console.log('Аккаунтов для сбора у бедолаги: ' + total_account + ' ');

В следующей статье цикла будем дальше мучать консоль и инстаграм Васи Петушка пока окончательно не получим его драгоценных подписчиков.