getElementBy......................................
getElementBy......................................
奥巴码侬 发表于3年前
getElementBy......................................
  • 发表于 3年前
  • 阅读 20
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

摘要: getElementById getElementsByName getElementsByTagName getElementsClassName

document.getElementById

通过指定的id获取html元素,所有浏览器支持

ie7以下有bug 

如果表单元素name与要获取元素的id相同,且在id元素前面,获取到的元素为 表单元素

document.getElementsByName

getElementsByName 返回带有指定名称的对象的集合

ie8 以下 id和指定名称相同的表单元素也会被获取

var eles = document.getElementsByName('name');
alert(eles.length,' ----');

此时ie8(含)以下  浏览器会弹出 3;

ie9 (含)以下 浏览器弹出 2,不支持非表单元素

所以平时用不写兼容方法的话,为了保持获取准确性

1 元素是表单元素

2 元素 id 不要和name有重复的 

getElementsByTagName

获取指定标签名的元素集合,所有浏览器支持

getElementsByClassName

获取指定包含class名的元素集合,ie8以下 不支持

我们可以封装类似的方法解决兼容

      var getClassNameNodes = function (name, eleName) {
    		var start = Date.now();
    		eleName = eleName || "*";
    		var aEles = [],
    			aNodeLists = document.getElementsByTagName(eleName);
    		var i=0,
    			length=aNodeLists.length;
    		if (!length) return [];
    		for (; i<length; i++) {
    			if (hasClass(aNodeLists[i], name)) {
    				aEles.push(aNodeLists[i]);
    			}
    		}
    		return aEles;
      }

	var aClassName;
	function hasClass (ele, name) {
		if (ele.className == "") return false;
		aClassName = trim(ele.className).split(" ");
		for (var i=0, length=aClassName.length; i<length; i++) {
			if (aClassName[i] == name) {
				return true;
			}
		}
		return false;
	}

	function trim (string) {
		var regexp = /(^\s*)|(\s*)$/g;
		return string.replace(regexp, '');
	}



共有 人打赏支持
粉丝 34
博文 97
码字总数 43584
×
奥巴码侬
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: