getElement四种方法返回的不同

当想通过dom在js中获取单个html元素时，常用的四种方法有：

• getElementById("id")
• getElementsByClassName("className")
• getElementsByTagName("tagName")
• querySelector(".className")(或者#id或者直接写tag)

但是，通过

• getElementsByClassName("className")
• getElementsByTagName("tagName")

这两种方式获得的是一个NodeList，即使对应的元素只有一个，在使用的时候也必须使用[0]，不然就无法得到正确的值。

接下来来证明一下这一点。

<ul class="deck" id="d">
            <li class="card">0</li>
            <li class="card">1</li>
</ul>
复制代码

我们有一个class为deck，id为d的ul列表。

    //getElementById
    ul0 = document.getElementById("d");
    console.log(ul0);
    console.log(typeof(ul0));

    //getElementsByClassName
    ul1 = document.getElementsByClassName("deck");
    console.log(ul1);
    console.log(typeof(ul1));

    //getElementsByTagName
    ul2 = document.getElementsByTagName("ul");
    console.log(ul2);
    console.log(typeof(ul2));

    //querySelector
    ul3 = document.querySelector("#d");
    console.log(ul3);
    console.log(typeof(ul3));
复制代码

运行结果如图：

可以看到ul1和ul2取到的是一个类数组。

这个时候如果使用ul1.className，结果将会是undefined，请务必注意这一点，正确的写法应该是ul1[0].className。

那么继续证明ul1、ul2不是数组而是类数组，通过使用push()的方法向其中添加一个字符串A，会发现浏览器提示Uncaught TypeError: ul1.push is not a function。

这样就能证明了。