DOM - select a specific property of an HTML element

Question

I am playing with DOM events delegations and trying to figure out why I can't select a specific HTML element besides the ID property.

var html = ' <div class="item__clearfix" id="770" prop2="100"><div 
            class="item__description">%description%</div><div class="right clearfix"><div 
            class="item__value">%value%</div><div class="item__delete"><button class="item__delete-- 
            btn"><i class="ion-ios-close-outline"></i></button></div></div></div>'

document.querySelector('.item__clearfix').addEventListener('click', function(event){
      console.log(event.target.parentNode.parentNode.parentNode.parentNode);
});

The parentNode I should get is: div class="item__clearfix" id="770"

When I select it's ID property, I can get the "770", but if I try to select a different property, I will get unidentified. Why is that?

event.target.parentNode.parentNode.parentNode.parentNode.id >> 770
event.target.parentNode.parentNode.parentNode.parentNode.prop2 >> unidentified

Sorry if I didn't explain it correctly.

score 1 · Answer 1 · answered Dec 29 '19 at 14:27

1

Use getAttribute('property_name') to get other attributes because id is accessible publicly.

answered Dec 29 '19 at 14:27

ortagon

453
1
3
8

so for EVERY other property, the getAttribute will do? – RoyW Dec 30 '19 at 08:18
1

Yes, getAttribute will do fine. – ortagon Dec 30 '19 at 09:14

Ali Sheikhpour · Answer 2 · 2019-12-29T14:33:37.247

0

The element.id gets the calculated id of element when you use it as a DOM object. For other attributes which are not properties of an object, you need to use .getAttribute() becuase there is no caluclated property of DOM object with the prop2 name.

event.target.parentNode.parentNode.parentNode.parentNode.getAttribute("prop2")

edited Dec 29 '19 at 14:33

answered Dec 29 '19 at 14:22

Ali Sheikhpour

10,475
5
41
82

DOM - select a specific property of an HTML element

2 Answers2