HTML5 Element.getElementsByClassName()方法在Chrome中返回HTMLCollection对象，《JavaScript高级程序设计》(第三)勘误P289

本文链接：https://blog.youkuaiyun.com/HayPinF/article/details/109688733

《JavaScript高级程序设计》(第三版)P289，HTML5为包括document的所有HTML元素，也就是Element对象增加了getElementsByClassName()方法。

chrome V8 8.6.395.23

getElementsByClassName()方法接收一个参数，即一个包含一或多个类名的字符串，返回指定类的所有元素的NodeList（Chrome V8 8.6.395.23返回的HTMLCollection）。传入多个类名时，类名的先后顺序不重要（指具有多个类名的元素，多个类名在字符串中出现的先后顺序不重要）。

以下代码实例说明几个事情：

1、

Element.childNodes属性返回NodeList，包括元素间空格的[object Text]节点

Element.getElementsByTagName("*")方法返回HTMLCollection，不包括元素间空格的[object Text]节点

Node.firstChild、Node.nextSibling等返回Node，包括元素间空格的[object Text]节点

2、

Element.getElementsByClassName()方法返回HTMLCollection，

Element.querySelectorAll()方法返回NodeList。

关于HTMLCollection与NodeList的对比，参见https://blog.youkuaiyun.com/wocaa2046/article/details/82285600

<!DOCTYPE>
<html>
    <head>
    </head>
    <body>
        <h1 id="h1_1" class="classname">h1</h1>

        <h2>h2</h2>

        <h3>h3</h3>
        <script>
            var table=document.createElement("table");
            table.border=1.5;
            // table.width="500";
            var tbody=document.createElement("tbody");
            var childNodes=document.body.childNodes;
            //[object NodeList]，包括元素间空格的[object Text]
            var allitems=document.body.getElementsByTagName("*");
            //不包括元素间空格的[object Text]
            var curChild=document.body.firstChild;
            //firstChild、nextSibling等包括元素间空格的[object Text]
            var length=0;
            if(childNodes.length<allitems.length){
                length=childNodes.length;
            }else length=allitems.length;
            for(var i=0;i<length;i++){
                tbody.insertRow(i);
                tbody.rows[i].insertCell(0);
                tbody.rows[i].cells[0].appendChild(document.createTextNode(childNodes.item(i).toString()));
                if(curChild!=null && curChild!=undefined){
                    tbody.rows[i].insertCell(1);
                    tbody.rows[i].cells[1].appendChild(document.createTextNode(curChild.toString()));
                    curChild=curChild.nextSibling;
                }
                tbody.rows[i].insertCell(2);
                tbody.rows[i].cells[2].appendChild(document.createTextNode(allitems.item(i).toString()));
            }
            tbody.insertRow(i);
            tbody.rows[i].insertCell(0);
            tbody.rows[i].cells[0].appendChild(document.createTextNode(childNodes.length));//包括元素间空格的文本节点
            tbody.rows[i].insertCell(1);
            tbody.rows[i].cells[1].appendChild(document.createTextNode("-"));
            tbody.rows[i].insertCell(2);
            tbody.rows[i].cells[2].appendChild(document.createTextNode(allitems.length));//不包括元素间空格的文本节点
            tbody.rows[i].insertCell(3);
            tbody.rows[i].cells[3].appendChild(document.createTextNode(document.body.childElementCount));//不包括文本节点和注释的Node
            
            i++;
            tbody.insertRow(i);

            var querySelect=document.body.querySelectorAll("h1.classname");
            tbody.rows[i].insertCell(0);
            tbody.rows[i].cells[0].appendChild(document.createTextNode(querySelect.toString()));//NodeList
            
            // var getbyclass=document.body.getElementsByTagName("h1")[0].getElementsByClassName("classname");
            var htmlcollect=document.body.getElementsByClassName("classname");
            tbody.rows[i].insertCell(1);
            tbody.rows[i].cells[1].appendChild(document.createTextNode(htmlcollect.toString()));//HTMLCollection

            tbody.rows[i].insertCell(2);
            tbody.rows[i].cells[2].appendChild(document.createTextNode(htmlcollect[0]==querySelect[0])); //true
            
            table.appendChild(tbody);
            document.body.insertBefore(table,document.body.firstChild);
        </script>
    </body>
</html>