Question

我正试图通过给定元素的DOM节点“向上”迭代，以获得具有“动画”属性的第一个父元素。

var el = evt.target;
    console.log(el);
while (!el.hasAttribute('animated'))
   { el = el.parentNode; }
return el;
    console.log(el);

引发错误：

>>>Uncaught TypeError: Object #<HTMLDocument> has no method 'hasAttribute'

这怎么可能？我已经清楚地声明了变量el并且第一个日志是正确的。

Answer 1

document对象：

是节点
是根元素的parentNode（如果您使用的是<html>元素的HTML）
不是元素。

只有元素具有属性，因此只有元素对象具有hasAttribute方法。

当您到达文档对象时（或者您不再测试元素时），您需要停止测试。

while (
    el.nodeType === 1 && 
    (!el.hasAttribute('animated'))
) {

Answer 2

var el = evt.target是document个对象，因此没有hasAttribute属性。

Answer 3

您还可以将其转换为返回null或具有该属性的祖先节点的函数：

function findNodeWithAttribute(el, attr) {
    while (true) {
        if (!el || !el.hasAttribute) {
            return null;
        } else if (el.hasAttribute(attr)) {
            return el;
        }
        el = el.parentNode;
    }
}

元素没有方法hasAttribute，为什么？

3 个答案: