说到最常见的 DOM 应用,恐怕就要数取得特定的某个或某组元素的引用了。DOM 定义了许多方式来选取元素,包括 getElementById()、getElementsByTagName()、getElementsByName() 和 document.all()4 种。接下来,将对这 4 种方法进行详细介绍
任何 html 元素可以有一个 id 属性,在文档中该值必须唯一
[注意] 若浏览器中出现多个 id 名的情况,CSS 样式对所有该 id 名的元素都生效,但 js 脚本仅对第一个出现该 id 名的元素生效
getElementById() 该方法接收一个参数:要取得元素的 ID,若找到则返回该元素,若不存在则返回 null
- var div1 = document.getElementById('myDiv');
- var div2 = document.getElementById('mydiv');
- console.log(div1); //<div id="myDiv"></div>
- console.log(div2); //null
关于 getElementById() 方法,IE7 - 浏览器有两个 bug
【1】该方法对匹配元素的 ID 不区分大小写
- var div1 = document.getElementById('mydiv');
- //在标准浏览器下报错,但在IE7-浏览器下,id为'myDiv'的元素的背景颜色变为品红色
- div1.style.backgroundColor = 'pink';
【2】表单元素的 name 属性也会被当作 ID 属性识别出来。因此为了避免这种问题,最好不让表单元素的 name 属性和其他元素的 ID 属性相同
- 0
- var myDiv = document.getElementById('test');
- //在标准浏览器下报错,但在IE7-浏览器中会输出0
- console.log(myDiv.innerHTML);
[注意] 如果在 HTML 文档中元素中存在某 id 属性,并且如果 Window 对象没有此名字的属性, Window 对象会赋予一个属性,它的名字是 id 属性的值,而它们的值指向表示文档元素的 HTMLElement 对象,因此,元素 ID 隐式地成为了全局变量,与 getElementById(id) 方法的效果相同
- 按钮一按钮二
- var oBtn = document.getElementById('btn');
- var oDiv = document.getElementById('test');
- oBtn.onclick = function() {
- //通过getElementById()方法获取id为test的对象
- oDiv.style.height = '10px';
- //通过id属性获取相同的对象
- test.style.backgroundColor = 'pink';
- }
- //由于location本身就是window对象下的属性,已经被占用,所以无法表示id=location的元素
- location.onclick = function() {
- alert(2);
- }
在 IE 浏览器中,HTML 某些元素如果有 name 属性,也与 id 属性相同,隐式地成为全局变量,包括:
- <a>
- <embed>
- <form>
- <iframe>
- <img>
- <object>
id 是唯一的,但 name 属性并不是唯一的。具有该名称的隐式全局变量会引用一个类数组对象,包括所有该命名的元素
- a元素1 a元素2 div元素
- //IE浏览器中,两个a元素和一个div元素字体都变成红色
- for (var i = 0; i < test.length; i++) {
- test[i].style.color = 'red';
- }
getElementsByTagName() 方法接收一个参数,即要取得元素的标签名,而返回的是包含 0 或多个元素的类数组对象 NodeList。可以使用方括号语法或 item() 方法来访问类数组对象中的项,length 属性表示对象中元素的数量
- 元素一元素二
- var divs = document.getElementsByTagName('div');
- divs[0].style.color = 'red';
- divs.item(1).style.backgroundColor = 'pink';
[注意] 通过 getElementsByTagName() 方法取得的类数组对象有一个 namedItem() 方法,可以通过元素的 name 属性取得集合中的第一个值。safari 和 IE 不支持该方法
- 元素一元素二元素三
- var divs = document.getElementsByTagName('div');
- divs.namedItem('test').style.color = 'red';
getElementsByTagName() 方法可以用于 document 对象,也可以用于 element 元素对象,用于调用该方法的元素的后代元素
- 1 2
- var oUl = document.getElementById('myUl');
- var lis = oUl.getElementsByTagName('li');
- lis[0].style.color = 'red';
getElementsByName() 方法会返回带有给定 name 特性的所有元素
- 按钮一按钮二
- var button = document.getElementsByName('test');
- button[0].style.color = 'red';
关于 getElementsByName() 方法,IE 浏览器与其他浏览器相比,有三个不同之处
【1】IE9 - 浏览器只支持在表单元素上使用 getElementsByName() 方法
- 元素一元素二
- //标准浏览器下,元素一颜色变为红色,但在IE9-浏览器下会报错
- var divs = document.getElementsByName('test');
- divs[0].style.color = 'red';
【2】IE9 - 浏览器中使用 getElementsByName() 方法也会返回 id 属性匹配的元素。因此,不要将 name 和 id 属性设置为相同的值
- 按钮一按钮二按钮三
- //标准浏览器下,按钮三不变色,但IE9-浏览器下,按键三也变成红色
- var buttons = document.getElementsByName('test');
- for (var i = 0; i < buttons.length; i++) {
- buttons[i].style.color = 'red';
- }
【3】如果对 getElementsByName() 方法取得的类数组对象使用 namedItem() 方法,因为每一项的 name 属性都相同,所以只会返回第一项
[注意] 只有 IE8-IE11 浏览器支持
- 按钮一按钮二
- var buttons = document.getElementsByName('test');
- buttons.namedItem('test').style.color = 'red';
在 DOM 标准化之前,IE4 就引入了 document.all[] 集合来表示所有文档中的元素
- div按钮
- console.log(document.all); //[html, head, meta, title, body, div, button, script]
- //标准浏览器返回8,而IE8-浏览器返回9,由于它把文档声明<!DOCTYPE html>识别为注释,且把注释识别为元素,所以多1个
- console.log(document.all.length);
现在 document.all 方法已经弃用,要取得类似效果,可以使用 document.getElementsByTagName('*') 方法,* 表示匹配所有元素
- div按钮
- console.log(document.getElementsByTagName('*')); //[html, head, meta, title, body, div, button, script]
- //标准浏览器返回8,而IE8-浏览器返回9,由于它把文档声明<!DOCTYPE html>识别为注释,且把注释识别为元素,所以多1个
- console.log(document.getElementsByTagName('*').length);
getElementsByName() 方法并不常用,再加上已经废弃的 document.all()。实际上,常用的获取元素的方法就 getElementById() 和 getElementsByTagName() 两种。getElementsByClassName() 不也是吗?确实是,但它和 querySelector() 等方法都是 HTML5 扩充的新方法,兼容性不是很好,这些新方法将在续篇进行详细介绍
欢迎交流
来源: http://www.cnblogs.com/xiaohuochai/p/5795796.html