javascript - 将 "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") {
// ...

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