DOM定义了许多方式来选取元素，包括getElementsByTagName(),getElementById(),getElementsByName(),querySelector(),querySelectorAll()等等，下面我们来分别介绍。
一、getElementById()
通过id名称去获取一个元素，它只有一个主语document。任何THML元素可以有一个id属性，在文档中这个值必须是唯一的。如果浏览器出现多个id名，css样式对所有该id名的元素都生效，但js脚本仅对第一个出现该id名的元素生效。这个方法接收一个参数，要取得元素的id，如果找到则返回这个元素，如果不存在则返回null。
<body>
<style>
#box {color: red}
</style>
<div id="box">第一行文字</div>
<div id="box">第二行文字</div>
<script>
var box = document.getElementById('box');
box.style.color = 'green';
</script>
</body>
二、getElementsByTagName()
通过标签名称去获取一组元素，它获取到的是一组元素。接收的参数为要取元素的标签名，返回的是包含0个或者多个元素的类数组。主语为document(从整个文档中获取一组元素)或者是父级(从父级下面去获取一组元素)它具备length属性，每个数据都会有自己对应的下标。我们可以用下标的方法来获取其串的一个元素。
<body>
<div id="box">第一行文字</div>
<div id="box">第二行文字</div>
<script>
var box = document.getElementsByTagName('div');
console.log(box);//HTMLCollection(2) [div#box, div#box, box: div#box]
box[1].onclick = function () {
box[1].style.color = 'green';
}
</script>
</body>
四、getElementsByClassName()
通过class去获取一组元素。HTML元素的class属性值是一个以空格隔开的列表，可以包含多个标识符。由于js中class是保留字，所以用className属性来保存HTML的class属性值。
getElementsByClassName()方法接收一个参数，返回带有指定类的类数组。传入多个类名时，类名的先后顺序不重要。主语为document或者是父级。
<body>
<ul id="color">
<li>red</li>
<li>green</li>
<li class="blue">blue</li>
</ul>
<!-- <script>
var blues = document.getElementsByClassName('blue')
blues[0].onclick = function () {
blues[0].style.background = 'pink';
}
</script> -->
<script>
var color=document.getElementById('color');
var blue1=color.getElementsByClassName('blue');
blue1[0].onclick = function () {
blue1[0].style.background = 'pink';
}
</script>
</body>
五、getElementsByName()
这个方法返回带有给定name特性的所有元素。不常用。
<body>
<div name="box">第一行文字</div>
<div name="box">第二行文字</div>
<script>
var box = document.getElementsByName('box');
box[1].style.color = 'blue';
</script>
</body>
六、querySelect()
通过css选择器去获取一个元素。querySelect()方法接收一个css选择符，返回与这个模式匹配的第一个元素，如果没有找到则返回null。这个方法可用于document也可以用于元素element。
七、querySelectAll()
通过css选择器获取到一组元素。querySelectorAll()接收一个CSS选择符，返回一个类数组对象NodeList的实例。如果没有找到返回一个空类数组对象。这个方法可用于document也可以用于元素element。
<body>
<ul id="color">
<li>red</li>
<li>green</li>
<li>pink</li>
<li>
<ul>
<li>orange</li>
<li>gold</li>
<li class="blue">blue</li>
</ul>
</il>
</ul>
<script>
var lis = document.querySelectorAll('#color ul li');
lis[2].style.background = 'blue'
</script>
</body
八、getElementsByTagName与querySelectorAll的区别
getElementsByTagName它是动态获取元素，只要原来的结果有变化，它能监听得到，会去重新获取一次元素，那这个时候原来的下标就变化了。
querySelectorAll静态获取元素，只获取一次，会把下标存下来，即使原来的结构有变化，它也不会去重新获取。
<body>
<ul id="number">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var num=document.getElementById('number');
//var lis=document.querySelectorAll('li');
var lis=document.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
num.appendChild(lis[i]);
}
</script>
</body>