getElementsByClassName和getElementsByTagName上为什么innerHTML和innerText属性不起作用。

总结：getElementsByClassName和getElementsByTagName获取的是集合，在最后加[0]即可获取具体元素，就有innerHTML和innerText属性了。

详解： 在做数据绑定到页面的时候，我们经常会用到innerHTML和innerText，其二者都是可以往节点中添加内容，而二者区别是innerHTML可以识别标签。

        我在今天用innerHTML的之后，发现页面（红框部分）并没有放上数据。但是打印了一下元素发现元素上有innerHTML属性。

 此时的相关代码是

 var oLi = document.getElementsByTagName("li")；
 oLi.innerHTML = `<div>商品名称:ersr</div>
                <img src=""alt="">
                <div>商品价格:50</div>
                <div>购买数量:30</div>
                <div>商品规格: 黑</div>
                <div>是否选中：选中吧OR不选中</div>`

后来意识到，自定义属性也是用元素.属性。就在怀疑是不是元素oLi上根本就没有innerHTML这个属性。就用console.dir打印oLi的详细信息看看。发现innerHTML并不按字母排序顺序在下面，所以是自定义属性。

 所以为什么元素上没有应有的属性呢？想到有可能是获取元素的方式出了问题。

我是用getElementsByTagName获取的，之前是用querySelector获取的，然后我就换了querySelector，打印了一下oLi的详细信息，发现有innerHTML。且代码也起作用了。

之后测试getElementsByClassName上也没有innerHTML。就好奇为什么不能获取。

观察用querySelector和getElementsByTagName获取的元素有什么不同。

发现用querySelector获取到的是元素本身。所以元素li上有innerHTML属性，红框内也有内容。

 而getElementsByClassName获取到的是个集合，并不是具体的元素。而集合上没有innerHTML属性。在最后加[0]就可以拿到集合的第一项元素li。也可以使用innerHTML属性将数据放入页面。