(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>