DOM - 选择 HTML 元素的特定属性 [重复]

Posted 2023-02-21

【中文标题】DOM - 选择 HTML 元素的特定属性 [重复]

【英文标题】：DOM - select a specific property of an HTML element [duplicate]

【发布时间】：2020-04-18 13:41:15

【问题描述】：

我正在使用 DOM events delegates 并试图弄清楚为什么我不能选择除了 ID 属性之外的特定 html 元素。

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);
);

我应该得到的 parentNode 是：div class="item__clearfix" id="770"

当我选择它的 ID 属性时，我可以得到“770”，但如果我尝试选择不同的属性，我将无法识别。这是为什么呢？

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

抱歉，如果我没有正确解释。

【参考方案1】：

使用getAttribute('property_name') 获取其他属性，因为 id 可以公开访问。

【讨论】：

所以对于其他所有属性，getAttribute 都可以吗？

是的，getAttribute 就可以了。

【参考方案2】：

element.id 在您将其用作 DOM 对象时，会获取计算出的元素的 id。对于不是对象属性的其他属性，您需要使用.getAttribute()，因为没有prop2名称的DOM对象的计算属性。

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