Как сделать, чтобы элементы, которые имеют идентификаторы кликабельны?

Question

Каждый div активируется по клику (JavaScript).

Как сделать так, чтобы кликали только элементы с идентификатором, а элементы с классом не активировались?

Есть ли замена?опция:

var div = document.getElementsByTagName ("div"); 

с

var div = document.getElementsByClassName ("div");

Я пытался, но не работал

var div = document.getElementsByTagName("div");
var divCount = div.length;
var clickedDivId

for (var i = 0; i < divCount; i += 1) {

  div[i].onclick = function(e) {

    clickedDivId = this.id;
    event.stopPropagation();
    alert(this.id);

  };
}

#parent {
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

#child {
  width: 430px;
  height: 70px;
  margin: 10px;
  float: left;
  background-color: red;
}

.parentclass {
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

.childclass {
  width: 430px;
  height: 70px;
  margin: 10px;
  float: left;
  background-color: red;
}

<div id="parent">
  <div id="child"></div>
</div>

<div class="parentclass">
  <div class="childclass"></div>
</div>

Answer 1

Помимо очевидной замены getElementsByTagName на document.querySelectorAll('div[id]') для выбора только div элементов, имеющих атрибут id, я бы предложил делегировать это событие и обработать часть id в слушателе.Таким образом, есть только одна функция-обработчик, и она будет работать с элементами, которые могут быть добавлены / изменены в DOM позже.

document.body.addEventListener( 'click', e => {
   const { id } = e.target;
     if( id ){
        console.log( id );
     }
});

demo: https://jsfiddle.net/85ob2vqg/

Или в ES5

document.body.addEventListener( 'click', function(e){
   var  target = e.target;
     if( target.id ){
        console.log( target.id );
     }
});

Answer 2

Вот решение, в котором обрабатываются клики по элементам с существующим атрибутом id.Вы можете добавить секцию else в код JS для обработки всех других нажатых div.

var div = document.getElementsByTagName("div");
var divCount = div.length;

for (var i = 0; i < divCount; i += 1) {
    div[i].onclick = function(e) {
        if (e.target.id) alert(this.id);
        e.stopPropagation();
    };
}   

#parent {
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

#child {
  width: 430px;
  height: 70px;
  margin: 10px;
  float: left;
  background-color: red;
}

.parentclass {
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

.childclass {
  width: 430px;
  height: 70px;
  margin: 10px;
  float: left;
  background-color: red;
}

<div id="parent">
  <div id="child"></div>
</div>

<div class="parentclass">
  <div class="childclass"></div>
</div>

И это короткий код JS:

var div = document.getElementsByTagName("div");

[...div].forEach( (el) => {
    el.onclick = function(e) {
            e.stopPropagation();
            e.target.id &&  alert(this.id);
        }
});

Answer 3

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

document.querySelectorAll('[id]');

Тогда вы можете использовать прослушиватель событий для ваших кликов.

    const clickableIds = document.querySelectorAll('[id]');
    clickableIds.forEach(element => {
      element.addEventListener('click', () => {
          alert('Here is your element object: ' + element);
      });
    });

    #parent {
      width: 450px;
      height: 170px;
      margin: 10px;
      padding: 10px;
      background-color: blue;
    }
    
    #child {
      width: 430px;
      height: 70px;
      margin: 10px;
      float: left;
      background-color: red;
    }
    
    .parentclass {
      width: 450px;
      height: 170px;
      margin: 10px;
      padding: 10px;
      background-color: blue;
    }
    
    .childclass {
      width: 430px;
      height: 70px;
      margin: 10px;
      float: left;
      background-color: red;
    }

<div id="parent">
  <div id="child"></div>
</div>

<div class="parentclass">
  <div class="childclass"></div>
</div>

Answer 4

Вы можете выбрать по классу, как это:

const idSet = document.querySelectorAll('#a');
const classSet = document.querySelectorAll('.a');

const log = t => () => console.log(t);

idSet.forEach(element => element.onclick = log('id click'))
classSet.forEach(element => element.onclick = log('class click'))

<button id="a">1</button>
<button class="a">2</button>
<button class="a">2</button>