Dubrovin

Используйте .querySelector вместо .getElementsByTagName
И в качестве селектора указывайте что-то вроде 'a[data-text="Первый блок"]'

Добавляем addeventlistener к инпуту при вводе символа, callback функция делает следующее:
1) Сверяет текущее значение с массивом autocomplete
2) Если найдены совпадения - создаёт в dom-дереве список ul с необходимой вёрсткой через document.createElement
3) Для каждого элемента списка добавляем addeventlistener: при клике на элемент значение из элемента копируется в инпут, список ul уничтожается
4) Делаем appendChild списка ul после инпута (или внутрь или перед и т.п., как удобнее для сделанной вёрстки)

Я бы реализовал вот такой регуляркой: /\+\d{10,}/
Вместо 10 укажите минимальное кол-во цифр в номере телефона.
Если нужно ещё учитывать дефисы, то можно сделать вот так: /\+[\d-]{10,}/

Никак. Подобный функционал реализуется не только, с помощью JS. Должна быть ещё серверная часть, например, на PHP + клиентское приложение (может быть на чём угодно, например, под Windows). Обычно данный функционал реализуется с помощью стороннего сервиса, например, jivochat

if ( document.querySelector( '#morf' ).classList.contains( 'active' ) ) {
    alert( 'yes' );
}

Почему-то никто не упомянул стрелочные функции

let a = 1;
let el = document.getElementById( 'middle' );
el.addEventListener( 'click', () => {
    console.log(a); //1
} );

Как по мне, так лучше использовать mutation observer и следить за компонентами динамически.

Во втором примере неправильно стоят скобки, должно быть так:

(function() {
  alert('Вызов на месте');
})();

Используйте Rollup JS. В отличии от вебпак и браусерифи, он собирает файлы без всякого мусора. В отличии от gulp include вы можете использовать синтаксис import, export es2015.

Рекомендую к прочтению статью на сайте Ильи Кантора: https://learn.javascript.ru/drag-and-drop-objects