JavaScript 获取DOM文档元素

 2015年10月06日    834     声明


浏览器端的JavaScript运行时对HTML页面的操作,其本质是在操作一个或多个文档。程序启动后,文档会被抽象为Document对象,通过全局变量document可以获取对这个对象的引用。为了操作文档中的元素(Element对象),需要通过document获取这些元素。在W3CDOM规范中定义了选取元素的方法。

获取文档中的元素有以下方法:

  1. getElementById():通过ID属性选取元素
  2. getElementsByName():通过name属性选取元素
  3. getElementsTagName():通过标签名选取元素
  4. getElementsClassName():通过CSS样式名选取元素


1. getElementById():通过ID属性选取元素

HTML元素都可以有一个id属性,在文档中该属性必须唯一。getElementById()是DOM中提供的方法,通过这个方法可以获取对应id属性的元素节点对象。其使用方式如下:

var ele = document.getElementById('itbilu');

在IE8及其早期版本中,getElementById()方法匹配元素时不区分大小写,且会返回name属性元素,在使用时应该注意。


2. getElementsByName():通过name属性选取元素

HTML的name属性最初用于为表单元素分配名字,表单数据提交到服务器后服务器通过该属性获取元素值。与id属性不同,name属性不一定是唯一的。通过Document对象的getElementsByName()方法可以获取指定name属性的元素。注意:该方法会返回一个包含若干Element对象的集合。其使用方式如下:

var eles = document.getElementsByName('itbilu');
eles[0]; //访问第一个名为itbilu的元素

在IE8及其早期版本中,getElementsByName()方法不存在,在IE8中该方法会将对应id属性的元素也返回,在使用时应注意。


3. getElementsTagName():通过标签名选取元素

getElementsByName()方法类似,getElementsTagName()方法也会返回一个Element对象集合。不同的是,getElementsTagName()方法是通过标签名选取元素的。如,选取所有div元素,可以使用如下方法:

var divs = document.getElementsTagName('div');


4. getElementsClassName():通过CSS样式名选取元素

HTML的class属性值是一个空格分隔的样式名列表,在JavaScript中使用Element对象className属性存储HTML元素的class属性值。通过code>Document对象的getElementsClassName(),可以返回包含指定CSS样式的Element对象集合。使用方式如下:

var eles = document.getElementsClassName('success');

在IE8及其早期版本中,getElementsClassName()方法不支持,在使用时应注意。