Как найти и выбрать элемент в Javascript

Способов множество. Самые распространенные: 

1. Выбор по ID
2. Выбор по имени класса
3. Выбор по тэгу
4. Выбор при помощи селектора CSS

1. Выбор по ID

К примеру, у нас есть строка ввода. Чтобы ее выбирать через ID, у нее этот ID должен быть прописан:

<input type="text" id="my_text">

Объявим переменную и присвоим значения из строки ввода:

let my_text = document.getElementById("my_text").value;

2. Выбор по имени класса

К примеру, у нас есть несколько элементов с одинаковыми классами:

<input type="text" class="my-text">
<input type="password" class="my-text">

Запросом getElementsByClassName выбираются сразу все элементы с данным классом. То есть у нас будет массив и его надо перебирать, либо указать сразу порядок элемента, если вам это известно. Например:

let values = document.getElementsByClassName("my-text");

for (let i = 0; i < values.length; i++) {
  values[i].classList.remove("redtext");
  values.item(i).classList.add("greentext");
}

values[0].classList.add("success");

Возможна комбинация данных методов. Например, у нас есть две формы, а в каждой из них есть строки ввода с одинаковыми классами:

<form id="first_form">
  <input type="text" class="text-input">
  <input type="password" class="text-input">
  <button type="submit"></button>
</form>

<form id="second_form">
  <input type="text" class="text-input">
  <input type="password" class="text-input">
  <button type="submit"></button>
</form>

Мы можем выбрать элементы с классом "text-input" и только из первой формы:

let values = document.getElementById("first_form")
.getElementsByClassName("text-input");

3. Выбор по тэгу

Очень похож на выбор по классу. Точно также создается массив. Есть html код:

<input type="text" name="nickname">
<input type="password" name="pswrd">

Можем выбрать их по тэгу <input>:

let inputs = document.getElementsByTagName("input");

4. Выбор элементов по селектору CSS

Можно прописывать любой селектор CSS и js будет искать элемент (querySelector) или элементы (querySelectorAll), удовлетворяющие данному селектору.

К примеру, есть строки ввода:

<form id="form1">
  <input type="text">
  <input type="password">
</form>

<form id="form2">
  <input type="text">
  <input type="password">
</form>

let nickname = document.querySelector('input[type="text"]');

let nicknames = document.querySelectorAll('input[type="text"]');

В первом случае будет выбран самый первый элемент, удовлетворяющий данному селектору. Во втором случае (querySelectorAll) - все элементы DOM, согласно селектора.