document.getElementById(), document.getElementsByTagName(), document.getElementsByName(), document.getElementsByClassName()的区别和在IE和标准浏览器中的差异
document.getElementById(id)
获取指定id的DOM元素，参数区分大小写，和其他几个函数的区别在于它返回的是一个元素，而不是一组元素，因为id在页面元素中应该是唯一的，不能多个元素使用同一个id，如果页面中出现了相同id的元素，那么该函数返回第一个元素。
document.getElementsByTagName(tagName)
获取指定标签的DOM元素集合，参数不区分大小写，如果参数为*，则返回所有DOM元素，可以把document换成某个元素，用于获取某个DOM元素的下级元素，同理，参数如果为*，则返回该元素的所有下级元素。注意是所有下级元素，不是子元素，子元素只是下一级元素，如果要获取某个元素的子元素可以用element.childNodes属性，或者element.children属性，区别在于element.childNodes包含文本节点，element.children不含文本节点，其中element即“某个DOM元素”。
document.getElementsByName(name)
获取name属性为给定参数的DOM元素，参数区分大小写，和document.getElementsByTagName类似，可以用于获取元素的下级元素。
document.getElementsByName()在IE浏览器和Chrome,Firefox,Safari,Opera等标准浏览器执行标准不一致。
在IE6 IE7 IE8 IE9中，document.getElementsByName(name)可以获取id为参数的元素，也可以获取name为参数的元素，这其中还要分两种情况，对于页面中name为给定参数的元素，如果不是form/input/button/textarea等元素，则不会出现在最终结果中，对于页面中id为给定参数的元素，则会出现在最终结果中，多个元素使用同一个id也会全部获取到，而不是只获取第一个。
标准浏览器和IE10及更新版本中document.getElementsByName(name) 只返回name为给定参数的DOM元素，也没有必须是表单元素才能获取的限制。
因为IE6 IE7 IE8 IE9中document.getElemensByName非常混乱，应该尽量避免使用document.getElemensByName，或者自己重新定义一个类似功能的函数。（见文末）
请在IE浏览器和标准浏览器中分别测试以下代码，即可知道document.getElementsByName()在IE6 IE7 IE8 IE9和Chrome,Firefox,Safari,Opera等标准浏览器的区别。- <textarea id="xc"></textarea>
- <input name="xc" />
- <div name="xc"></div>
- <script type="text/javascript">
- var els=document.getElementsByName('xc');
- var ell=els.length;
- for(var j=0;j<ell;j++){
- alert(els[j].tagName);
- }
- </script>
获取包含指定类名的DOM元素，参数区分大小写，所谓类名，即元素中的class="a b c"，a,b,c即三个CSS类名。
IE6 IE7 IE8不支持，需要自己写一个类似函数，代码在后面。
最终解决方案
说了半天的document.getElementById(), document.getElementsByTagName(), document.getElementsByName(), document.getElementsByClassName()，我们来写一个函数，将这四个函数的功能全部融入进去，并且让它支持IE6 IE7 IE8 IE9 IE10 IE11和Google Chrome,Firefox,Safari,Opera等所有主流浏览器。
为避免复制出错，请下载附件测试，不要直接复制本页面上的代码。- <script type="text/javascript">
- /*
- * 获取指定的DOM元素
- * www.51-n.com 吴先成 原创
- * qQ:229256237 ohcc@163.com
- * @参数s，可以按以下格式给定参数
- * 传入DOM元素，直接返回传入的DOM元素
- * #p 相当于document.getElementById('p')，给定的参数name为DOM元素的id
- * !p 相!user当于document.getElementsByName('p')，给定的参数name为DOM元素的name
- * .p 相当于document.getElementsByClassName('p')，给定的参数name为DOM元素的class
- * p 相当于document.getElementsByTagName('p')，给定的参数name为DOM元素的标签名
- * * 相当于document.getElementsByTagName('*')，返回所有的DOM元素
- * @返回值 传入DOM元素或id时返回单个DOM元素，传入其他参数返回DOM元素集，未匹配到元素则返回null
- */
- function $(s){
- s=s||'';
- var o=[];
- if(typeof s=='object'){
- return s;
- }else if(typeof s=='string'){
- var sign=s.charAt(0);
- var name=s.substr(1);
- switch(s.charAt(0)){
- case '#':
- o.push(document.getElementById(name));
- break;
- case '.':
- if(document.getElementsByClassName){
- o=document.getElementsByClassName(name);
- }else{
- var os=document.getElementsByTagName('*');
- var ol=os.length;
- for(var i=0;i<ol;i++){
- if(os[i].className&&new RegExp('(?:^|\\s+\\b)'+name+'(?:\\b\\s+|$)').test(os[i].className)) o.push(os[i]);
- }
- }
- break;
- case '!':
- var isIE=/MSIE\s*(\d+)/i.exec(navigator.userAgent);
- if(isIE&&isIE[1]<10){
- var os=document.getElementsByTagName('*');
- var ol=os.length;
- for(var i=0;i<ol;i++){
- if(os[i].name&&os[i].name==name) o.push(os[i]);
- }
- }else{
- o=document.getElementsByName(name);
- }
- break;
- default:
- var os=document.getElementsByTagName(s?s:'*');
- var ol=os.length;
- for(var i=0;i<ol;i++){
- o.push(os[i]);
- }
- }
- }
- return sign=='#'?o[0]:o.length===0?null:o;
- }
- </script>
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？新建账号
×
|
