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">JavaScriptp>
      <p>Javap>
    div>
    <div class="c-red c-green">
      <p>Pythonp>
      <p>Rubyp>
      <p>Swiftp>
    div>
    <div class="c-green">
      <p>Schemep>
      <p>Haskellp>
    div>
div>

1 .选择

JavaScript

:

刚好这个p标签里就有id，那么就直接获取

document.getElementById('test-p');

2 . 选择

Python

,

Ruby

,

Swift

:
①：var arr=document.getElementById(‘test-div’).getElementsByTagName(‘div’)[1].children;
②：var arr=document.getElementsByClassName(‘c-red’)[1].children;

3 .选择

Haskell

:
var x=document.getElementsByClassName(‘c-green’)[1].children[1]