Перебор for | JavaScript

• Проверка чекбоксов на включение
• Фильтрация JS

Чтобы получить элемент массива, указывается его номер, начиная с нуля, в квадратных скобках

<script>
var arr = ["10", "20", "30"];
  document.write( arr[0] + '<br>' );
  document.write( arr[1] + '<br>' );
  document.write( arr[2] + '<br>' );
}
</script>

Для перебора элементов используется цикл

<script>
var arr = ["10", "20", "30"];
for (var i=0; i<arr.length; i++) {
  document.write( arr[i] + '<br>' );
}
</script>

for внутри for: нужно заменить i на другой символ

<script>
var arr = ["раз", "два", "три"],
    arr1 = ["первый", "второй", "третий"];
for (var i=0; i<arr.length; i++) {
  for (var k=0; k<arr1.length; k++) {
    document.write( arr[i] + ' ' + arr1[k] + '<br>' );
  }
}
</script>

length — это не количество элементов массива, а последний индекс + 1

<script>
var arr = ["раз", "два", "три"];
for (var i=0; i<arr.length; i++) {
  document.write( arr.length + '<br>' );
}
</script>

<script>
var arr = ["раз", "два", "три"];
document.write( arr.length + '<br>' );
</script>

<span id="length"></span>
<script>
var arr = ["раз", "два", "три", "четыре", "пять", "шесть"];
for (var i=0; i<arr.length; i++) {
  if ([i]>2) { // "четыре", "пять", "шесть", так как отсчёт начинается с нуля (i=0, это "раз"; i=1, это "два"; i=2, это "три")
    document.getElementById('length').innerHTML += [i].length;
  }
}
document.getElementById('length').innerHTML = document.getElementById('length').innerHTML.length;
</script>

Перебор document.getElementsBy или document.querySelectorAll (только по NodeList)

Задача: при вводе в поле input текст должен отображаться только в одном рядомстоящем теге mark. Если хорошо знать селекторы и псевдоклассы CSS, понадобиться всего несколько строк.

<input class="m1" type="number" placeholder="введите цифру"><mark></mark>
<input class="m2" type="number" placeholder="введите цифру"><mark></mark>
<input class="m3" type="number" placeholder="введите цифру"><mark></mark>

<script>
var input = document.querySelectorAll('input[class^="m"]');
for (var i = 0; i < input.length; i++) {
  input[i].oninput = function () {
    document.querySelector('input.' + this.className + ' + mark').innerHTML = this.value;
  }
} 
</script>

Задача: при вводе в первое и второе поле input (искл. третье) текст должен отображаться только в одном рядомстоящем теге mark.

<input class="m1" type="number" placeholder="введите цифру"><mark></mark>
<input class="m2" type="number" placeholder="введите цифру"><mark></mark>
<input class="m3" type="number" placeholder="введите цифру"><mark></mark>

<script>
var input = document.querySelectorAll('input[class^="m"]');
for (var i = 0; i <= 1; i++) {
  input[i].oninput = function () {
    document.querySelector('input.' + this.className + ' + mark').innerHTML = this.value;
  }
} 
</script>

Перечислить числа с по

С по

1 2 3

С <input id="z1" type="number" value="1"> по <input type="number" value="4"><output>1 2 3</output>

<script>
window.oninput = function() {
  document.querySelector('#z1 + input + output').innerHTML = '';
  for (var i=parseFloat(document.querySelector('#z1').value); i<parseFloat(document.querySelector('#z1 + input').value); i++) {
    document.querySelector('#z1 + input + output').innerHTML += [i] + ' ';
  }
}
</script>

Как же узнать номер i внутри функции?

<input class="m1" type="number" value="10" disabled><mark></mark>
<input class="m2" type="number" value="20" disabled><mark></mark>
<input class="m3" type="number" value="30" disabled><mark></mark>

<script>
var input = document.querySelectorAll('input[class^="m"]');
[].forEach.call(input, function(item, i) {
  document.querySelector('input[class="m' + (i + 1) + '"] + mark').innerHTML = item.value;
});
</script>

Примечание №1. При создании статьи использовался материал learn.javascript.ru.
Примечание #2. Более внимательно взглянуть на перебор элементов в JavaScript мне понадобилось при написании калькулятора минут.