将“tagName”属性与“img”进行比较对 <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") {
// ...

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