javascript - 将 "tagName"属性与 "img"进行比较对于 元素不起作用

Question

我有这段代码:

function switchEvent() {
    if (this.lastChild.tagName == "img" ) {
        var remove = this.lastChild;
        this.removeChild(remove);
    }
    else {
        console.log(this.lastChild);

        var image = document.createElement('img');
    }
}

请注意，在第二部分中，当我检查 console.log 时，它会打印出:

<img height="20" width="75" src="btn2.png" style="left: -14px; right: 0px;">

它只是跳过“if”并跳转到“else”。呃，什么？

编辑:补充一下，这是一个 onclick 事件。因此，“this”指的是被点击的元素。

Answer 1

尝试

if (this.lastChild.tagName == "IMG") {
// ...

“tagName”属性是大写的。或者，您无法做出该假设并强制解决问题:

if (this.lastChild.tagName.toLowerCase() == "img") {
// ...

应该也可以。但是，如果您的最后一个子节点不是带有标签名称的节点，那么第二个版本就会遇到问题——例如，如果它是文本或注释节点。你会得到一个异常(exception)，但不是第一个。您可以进行明确的 undefined 测试，但大写约定实际上在 HTML DOM Level 1 规范中，因此这是一个非常安全的假设。 (edit 一位聪明人指出 .nodeName 属性将始终存在，并且它与元素节点的 .tagName 相同。它也是大写的。)