这里抛开直接在js里写页面元素id的调用dom方法。

var box = document.querySelector("#box");这是获得单个元素。
var p = document.querySelectorAll("p")  这个是获得页面所有P元素的集合。

为什么说这两个最简单？和document.getElementByXXX有什么不一样？

1.因为document.querySelector("#box")后面的这个括号可以用css里的选择器！
document.querySelector("#box>.me>a")可以用有木有，
document.getElementByXXX不能这样写。

2.最大的不同，document.querySelectorAll("p")，取到的是执行这句话的时候页面中的P元素的个数，哪怕后面页面再添加了P元素或者删除了P元素，这个只知道他当时取得P个数，不能实时监测页面P的变化。而document.getElementsByTagName("p")是会监测页面P的个数的。再执行document.getElementsByTagName("p")之后，删除或者增加页面P元素，后面再调用的话它的length会跟踪页面P的数量而变化。