https://blog.csdn.net/wzw9353/article/details/78784096
document获取DOM节点的三种方法详解
最近转行做前端，刷js的时候看到document获取DOM元素的三种方法时懵逼了很久，自行研究一番后分享给大家。
我们通过Document对象至少有三种方式获取DOM元素，分别为：
document.getElementById();
document.getElementsByTagName();
document.getELementsByClassName();
document.getElementById():根据页面标签的唯一id来获取，返回的是一个对象，自然可以调用对象的方法，例如：children。
document.getElementsByTagName():看到elements就知道这个获取的是多个对象，所以返回的是对象的集合，哪怕只有一个一个对象，也会返回长度为1的数组，只能通过索引返回对象调用对象的方法。
document.getELementsByClassName('xxx'):这个跟上面一个类似，返回的也是数组，但是需要注意的是，它会返回所有包含xxx或者只有xxx的标签的数组。
下面通过一个例子演示一下：
<div id="test-div">
<div class="c-red">
<p id="test-p">JavaScript</p>
<p>Java</p>
</div>
<div class="c-red c-green">
<p>Python</p>
<p>Ruby</p>
<p>Swift</p>
</div>
<div class="c-green">
<p>Scheme</p>
<p>Haskell</p>
</div>
</div>
1 .选择<p>JavaScript</p>:
刚好这个p标签里就有id，那么就直接获取
document.getElementById('test-p');
2 . 选择<p>Python</p>,<p>Ruby</p>,<p>Swift</p>:
①：var arr=document.getElementById(‘test-div’).getElementsByTagName(‘div’)[1].children;
②：var arr=document.getElementsByClassName(‘c-red’)[1].children;
3 .选择<p>Haskell</p>:
var x=document.getElementsByClassName(‘c-green’)[1].children[1]
