（1）getElementById()
任何HTML元素可以有一个id属性，在文档中该值必须唯一
若浏览器中出现多个id名的情况，CSS样式对所有该id名的元素都生效，但javascript脚本仅对第一个出现该id名的元素生效。
getElementById()该方法接收一个参数：要取得元素的id，若找到则返回该元素，若不存在则返回null
注意：document.getElementById方法的内部实现需要用到this，这个this本来被期望指向document
【跨浏览器兼容】1：在ie7中，使用getElementById()的时候，接收的参数id不区分大小写。
2：在表单元素中，如果表单设置有name属性，其name属性会被当做id识别出来。
3: id是唯一的，但name属性并不是唯一的。具有该名称的隐式全局变量会引用一个类数组对象，包括所有该命名的元素.
<a href="#" name="test">a元素1</a> <a href="#" name="test">a元素2</a> <div id="test">div元素</div> <script> //IE浏览器中，两个a元素和一个div元素字体都变成红色 for(var i = 0; i < test.length; i++){ test[i].style.color = 'red'; } </script>//在ie浏览器中，两个a链接和下方的div都会显示红色字体。
（2）
getElementsByTagName（返回值是一个nodeList集合（区别于Array），可作用于Dom元素）getElementsByTagName()方法接收一个参数，即要取得元素的标签名，而返回的是包含0或多个元素的类数组对象HTMLCollection。可以使用方括号语法或item()方法来访问类数组对象中的项，length属性表示对象中元素的数量。
<div name="11">第一</div> <div name="11">第二</div> <span>第三span</span> <script> var aa = document.getElementsByTagName("div"); console.log(aa[1].innerHTML+aa.item(0).innerHTML)//结果为:第二第一 console.log(aa.namedItem("11"))//结果为：<div name="11">第一</div> </script>
[注意]通过getElementsByTagName()方法取得的类数组对象有一个namedItem()方法，可以通过元素的name属性取得集合中的第一个值。safari和IE不支持该方法。document.getElementsByTagName（"*"）表示匹配文档的所有元素（3）getElementsByName（返回值是一个nodeList集合（区别于Array），可作用于Dom元素）
getElementsByName()方法接收一个参数，即要取得元素的name值。
document.getElementsByName("Name");Name为要获取元素的name属性值,这个方法一般适用于提交表单数据,当 元素为form、img、iframe、applet、embed、object的时候设置name属性时,会自动在Document对象中创建以该 name属性值命名的属性。所以可以通过document.domName引用相应的dom对象。
【注意】（1）在ie9中，getElementsByName()只对表单元素起作用。
（2）IE9-浏览器中使用getElementsByName()方法也会返回id属性匹配的元素。因此，不要将name和id属性设置为相同的值。
（4）document.getElementsByClassName（返回值是一个nodeList集合（区别于Array），可作用于Dom元素）
document.getElementsByClassName通过获取“类名”来获取元素。document.getElementsByClass（"class1 class2"）可以拿到同时拥有class1和class2的元素，中间用空格隔开，不区分class1和class2的顺序。
兼容性：IE8及其以下版本的浏览器未实现getElementsByClassName方法
（5）HTML5新增的选择器，方法有两种：
- querySelector：根据选择器规则返回第一个符合要求的元素
- querySelectorAll：根据选择器规则返回所有符合要求的元素
支持新的HTML5 JavaScript选择器接口的浏览器有：IE 8+、FireFox 3.5+、Safari 3.2+、Chrome 4.0+、Oprea 10.1+ 。
一、选择器的分类
1. ID选择器
使用ID选择器时，需在前面添加“#”，区分大小写，语法如下：
document.querySelector('#id'); //等同于document.getElementById('id')2. 元素选择器
元素选择器通过指定的标签查询元素，此时querySelectorAll等同于getElementsByTagName，语法如下：
document.querySelectorAll('a'); //获取页面上的所有a元素并返回元素3. 样式类选择器
使用元素的样式类获取一个或一类元素，样式名字前使用“.”（英文句号）开头，语法如下：
document.querySelectorAll('.btn'); //获取所有样式类中包含btn类名的元素4. 分组选择器
使用querySelectorAll不仅可以获取一个或一类元素，还可以同时获取其他类别元素，两种类型之间使用逗号隔开，语法如下：
document.querySelectorAll('a,p'); //获取页面上所有a元素和p元素，并通过一个列表返回
document.querySelectorAll('.btn,.txt'); //获取页面上所有包含btn和txt样式类名的元素5. 属性选择器
获取页面上包含指定属性的元素，属性名称可以是元素原生属性和用户自定义属性，语法如下：
document.querySelectorAll('a[target="_blank"]'); //获取页面上所有target属性为_blank的a元素
document.querySelectorAll('img[data-id]'); //获取页面上所有带有自定义属性data-id的img元素6. 后代选择器
主要用于选择作为某元素后代的元素，规则左边的选择器一端包含两个或多个用空格分隔的选择器，如div a可以理解为查找所有被div包围的所有a元素，语法如下：
document.querySelectorAll('div a'); //获取页面上所有被div包含的a元素
document.querySelectorAll('div .btn'); //获取页面上所有被div包含的带有btn样式类名的元素7. 子元素选择器
后代选择器会将元素底下的所有相关元素都搜索出来，如果想进一步缩小范围，可以使用子元素选择器，只会选择某个元素的一级子元素，子元素用“>”（大于号）表示，代码如下：
<html>
<div id="first">
<div></div>
<div></div>
</div>
</html>
<script>
document.querySelectorAll('html>div'); //只返回一个id为first的div元素
</script>
8. 相邻兄弟选择器（比较少用）
选择紧接在另一个元素后的元素，而且两者有相同的父元素，相邻兄弟选择器使用“+”（加号），代码如下：
<div>
<div></div>
<div></div>
</div>
<p id="p1"></p>
<p id="p2"></p>
<script>
document.querySelectorAll('div+p'); //只返回一个id为p1的p元素
</script>
9. 伪类选择器
“:first-child”表示选择元素的第一个子元素，“:last-child”表示选择元素的最后一个子元素，“:nth-child(n)”表示选择元素的第n个子元素。“:first-child”的使用例子，代码如下：
<div>
<p id="p1"></p>
<p id="p2"></p>
</div>
<script>
document.querySelectorAll('p:first-child'); //只返回一个id为p1的p元素
</script>
扫一扫
1626
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
