Dom选择器
document.getElementByld()
- .getElementsByTagName()
- getElementsByName();
- .getElementsByClassName()
- .querySelector//css选择器（在css中怎么选，这里就怎么选），在ie7和ie以下的版本中没有，不是实时的。
- .querySelectorAll()//css选择器，在ie7和ie以下的版本中没有，不是实时的。
id选择器
（不常用）
document.getElementByld()
通过进行查找html文档中的id选中元素。（注：元素id在ie8以下的浏览器，不区分id大小写，而且也返回匹配的name属性的元素。）。
<!DOCTYPE html>
<html>
<head>
<title>Dom</title>
</head>
<body>
<div id = "only">123</div>
</body>
<script type="text/javascript">
var div = document.getElementById('only');
console.log(div);
</script>
</html>
//123- 标签名选择器
（常用）
.getElementsByTagName()
通过标签名选中元素，选出标签后封装到一个类数组里，所有的类数组的索引位进行排序。
<!DOCTYPE html>
<html>
<head>
<title>Dom</title>
</head>
<body>
<div>123</div>
</body>
<script type="text/javascript">
var div = document.getElementsByTagName('div'); //这句话的意思是：把页面里的所有的div都拿出来，所以即使只有一个div也是一个类数组
</script>
</html>此时如果给它加div.style.backgroundcolor是会报错的，因为不能给数组加背景颜色
我们现在把上面代码中带注释的那一步加一个位操作：
var div = document.getElementsByTagName('div')[0]; //这样就代表选择了第一个div这一个元素此时就会实现你想要的颜色效果而不会报错了。
- 数据名选择器
（不常用）
getElementsByName();
通过数据名选中元素，需注意，只有部分标签name可生效（表单、表单元素、img、iframe）
<!DOCTYPE html>
<html>
<head>
<title>Dom</title>
</head>
<body>
<input name = "fruit">
</body>
<script type="text/javascript">
var div = document.getElementsByName('fruit')[0]; //仍然要注意生成的是一个类数组
</script>
</html>- 类选择器
（比较常用）
.getElementsByClassName()
通过查找标签的class属性查到，ie8和ie8以下的ie版本中没有。查到的也是类数组。
//类名，，可以多个class一起。
<!DOCTYPE html>
<html>
<head>
<title>Dom</title>
</head>
<body>
<div class = "demo">123</div>
</body>
<script type="text/javascript">
var div = document.getElementsByClassName('demo');
console.log(div);
</script>
</html>
//123- css选择器
（常用）
- querySelector //css选择器，在ie7和ie以下的版本中没有，不是实时的。
- querySelectorAll() //css选择器，在ie7和ie以下的版本中没有，不是实时的。
css选择器（在css中怎么选，这里就怎么选），
缺点：不是实时的，在你选中后再做改变，已选中的数组是不改变的。
<!DOCTYPE html>
<html>
<head>
<title>Dom</title>
</head>
<body>
<div>
<span>
<strong></strong>
</span>
</div>
</body>
<script type="text/javascript">
var strong = document.querySelector('div > span > strong'); //选出的是一个元素
console.log(strong);
var strong1 = document.querySelectorAll('div > span > strong'); // 选出的是一组元素。
console.log(strong1);
</script>
</html>