在DOM,常用的获取对象元素的方法[0302]。
在上一文[0301]中,我们通过getElementById方法来获取对象元素,让js可以调用实现网页中的<button>标签,实现按钮点击后的功能。
可是在正常的网页设计中,各种标签纷繁复杂,什么标签都有可能要在js中调用操作,比如<input><div>……等等,单单一个getElementById未必能应付过来,于是js给了我们好几种获取对象元素的方法,这里我一一列举一下,当然,我列的都是常用方法。
- getElementById('mybt');//返回拥有指定id的第一个对象的引用
- getElementsByClassName('mydv');//返回拥有指定class的对象集合
- getElementsByTagName('div');//返回拥有指定标签名的对象集合
- getElementsByName('btname');//返回拥有指定名称的对象集合
- querySelector('.mydv3');//仅返回第一个匹配的元素,是class就加.是id就加#
- querySelectorAll('.mydv');//返回所有匹配的元素
我们一一分析一下,上面的六种获取方法,第一个就是我们上一文中获取方法,注意它的用法对象是id,所以在引号里填写的是网页标签里的id。
第二个,在引号里填写的是class,与第一个是不一样的,但要注意它返回的是对象集合,第一个返回的是一个对象,而第二返回的是多个对象,就像对象数组一样,所以第二个的引用方法就不能像第一个了,具体用法看一下后面的实例。
第三个引号里填写的是标签名,注意,它也是一个集合。
第四个引号里填写的是名,在一些标签里会用到name,比如:
<button name="btname">点我吧</button>
第五和第六个是js后面版本出现的方法,一个是返回单个元素,一个是返回集合,引号里面可以是id,也可以是class,只不过要注意的是,如果是id的话,要记得加#,是class的话,要记得加.,具体看实例。
[实例]
在实例中,你们会看到,凡是返回对象集合的,都会像数组一样对待,通过加[0][1][2]……来获取相应的元素,[0]是第一个元素,[1]就是第二个元素,以此类推。