document获取DOM节点的三种方法详解

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]