JavaScript функция, которая обрабатывает как один элемент, выбранный по идентификатору, так и несколько элементов, выбранных по классу - PullRequest
Новая
       0

JavaScript функция, которая обрабатывает как один элемент, выбранный по идентификатору, так и несколько элементов, выбранных по классу

0 голосов
/ 19 января 2020

Я хотел бы написать функцию JS generi c, которая может безразлично обрабатывать один элемент, выбранный по его идентификатору, или несколько элементов, выбранных по классу. 

var el1 = document.getElementById('myId');
myFunction(el1)
var el2 = document.getElementsByClassName('myClass');
myFunction(el2)

Моя задача - написать функция. Я начал что-то вроде: 

function myFunction(el) {
    if (typeof el == undefined) process(el);
    else {
        for (let i=0 ; i<el.length ; i++)
            process(el[i]);
    }
}

Я не совсем уверен в этом решении:

  • не уверен насчет теста (typeof ... == undefined)
  • нет уверен, что l oop, map, вероятно, должен быть лучшим вариантом

Поскольку это должно быть чем-то обычно используемым, я убежден, что некоторые из вас уже подумали, как лучше всего напишите этот код.

1 Ответ

2 голосов
/ 19 января 2020

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

function myFunction(selector) {
    return document.querySelectorAll(`#${selector}`) || document.querySelectorAll(`.${selector}`);
}

Это вернет NodeList соответствующих элементов (сначала проверяется заданный атрибут id и, если это не удается, предпринимается попытка найти какие-либо элементы с тем же именем, что и атрибут class).

Поэтому, если вы хотите выполнить какой-то процесс, вы можете просто добавить итератор к результату, если таковой существует, и выполнить его для каждого элемента: 

function myFunction(selector) {
     let nodes = document.querySelectorAll(`#${selector}`) || document.querySelectorAll(`.${selector}`);
     if(nodes) {
         for (var i = 0, i < nodes.length; i++) {
             process(nodes[i]);
         }
     }
}

Пример 

function myFunction(selector) {
  return document.querySelectorAll(`#${selector}`) || document.querySelectorAll(`.${selector}`);
}
<div id='id'>id</div>
<div class='class'>class</div>

<br />
<button onclick='alert(myFunction("id"));'>Find By ID</button>
<button onclick='alert(myFunction("class"));'>Find By Class</button>
...