获取DOM节点的几个方法

首先常用的是document对象方法：

document.getElementById('xx')   //一般不用，推荐ClassName
document.getElementByClassName('xx')   //IE8+，最常用的，推荐，返回的是一个nodeList
document.getElementByTagName('xx')   //标签名
document.getElementByName('xx')    //name属性值，一般不用

//css选择符模式，返回与该模式匹配的第一个元素，结果为一个元素；如果没找到匹配的元素，则返回null
document.querySelector('xx')
//css选择符模式，返回与该模式匹配的所有元素，结果为一个类数组
document.querySelectorAll('xx')

注意：querySelector()和querySelectorAll()方法值为静态的，不是实时的，保存的是当时的状态，是一个副本，即：在以后的代码中通过方法使所选元素发生了变化，但该值依然不会改变，因此使用有局限性，一般不用，除非就想得到副本

//eg:
<div class="my_div">
  <p>1111</p>
  <p>2222</p>
  <p>3333</p>
</div>

<script>
  let tempElement = document.getElementByClassName("my_div")[0];
  let p1 = tempElement.getElementByTagName("p");
  let p2 = tempElement.querySelectorAll("p");
  console.log(p1.length,p2.length);  //3,3

  tempElement.appendChild(document.createElement("p"));
  console.log(p1.length,p2.length);  //4,3
</script>

遍历属性节点树：

parentNode  //获取所选节点的父节点，最顶层的节点为#document
childNodes
firstChild
lastChild
nextSibling  //获取所选节点的后一个兄弟节点，列表中最后一个节点的nextSibling属性值为null
priviousSibling  //获取所选节点的前一兄弟节点，列表中第一个节点的previousSibling属性值为null

遍历元素节点树(类似遍历属性节点树)

parentElement  //IE9+
children  //常用
firstElementChild  //IE9+
lastElementChild  //IE9+
nextElementSibling  //IE9+
priviousElementSibling  //IE9+