获取元素的方法

      var div1 = document.getElementsByClassName("类名"); 

      var div2 = document.getElementById("id名");

      var div3 = document.getElementsByName("name");

      var div4 = document.getElementsByTagName("标签名");

      var div5 = document.querySelector("选择器选择"); //重名选择第一个

      var div5 = document.querySelectorAll("选择所有");

通过关系获取节点

   父亲

      document.querySelector().parentElement; //获取节点的父元素

      document.querySelector().parentNode; //获取节点的父节点

      大多数父节点和父元素是同一个 但是html标签没有父元素(null) 有父节点(document) 因为html外层没有元素了 document是节点不是元素标签

   一般使用getElementByClassName，因为这个效率更高一点

      儿子

      document.querySelector().children; //获取节点的子元素们

      document.querySelector().childNodes; //获取节点的子节点们

      document.querySelector().firstChild; //获取节点的第一个子节点

      document.querySelector().lastChild; //获取节点的最后一个子节点

      document.querySelector().firstElementChild; //获取节点的第一个子元素

      document.querySelector().lastElementChild; //获取节点的最后一个子元素

      document.querySelector().children[0]; //获取节点的第一个子元素

      document.querySelector().children[

        document.querySelector().children.length - 1

      ]; //获取节点的最后一个子元素

      兄弟

      document.querySelector().nextElementSibling; //获取节点的下一个同级元素 没有返回null

      document.querySelector().nextSibling; //获取节点的下一个同级节点 没有返回null

      document.querySelector().previousElementSibling; //获取节点的上一个同级元素 没有返回null

      document.querySelector().previousSibling; //获取节点的上一个同级节点 没有返回null