亲,请登录 免费注册

js原生查找元素的4种方法

扫描二维码阅读手机版

js原生查找元素的4种方法

1、查找ID:getElementById

查找ID是常用的一种方法,例如:

<div id="div1"></div>
<script>
	var oDiv1 = document.getElementById('div1');
	//这样我们就可以找到这个名字为div1的元素了,并且对他赋值给oDiv1
</script>


2、查找标签集合:getElementsByTagName

getElementsByName通常用来查找标签的集合,也就是找到所有的标签,例如:

<ul id="ul1">
	<li></li>
	<li></li>
	<li></li>
</ul>

我们现在需要找到所有的li,那么可以用

var oUl1 = document.getElementById('ul1');//先找到ul的ID
var aUlLi = oUl1.getElementsByTagName('li');//然后找到所有的li

这样就找到所有的li标签了

getElementsByTagName找出来的标签属于集合,使用时需要加上下标才能使用aUlLi[0],使用第几个li标签,下标就写几,如果使用所有的li标签,可以使用循环,如

for( var i=0;i<aUlLi.length;i++ ){
	aUlLi[i] 
}


3、根据name(名称)获取一组对象的集合:getElementsByName

getElementsByName是用来查找name的集合,例如:

<input name="myt" type="text" value="1">
<input name="myt" type="text" value="2">
<input name="myt" type="text" value="3">
<input name="myt" type="text" value="4">

上面标签当中都有一个同样的name属性,那么我们就可以使用name来查找了

var aMyt = document.getElementsByTagName('myt');//然后找到所有name为myt的标签并且加以控制。使用方法和getElementsByTagName相同


4、根据getElementsByClassName来查找class属性的集合

例如:

<div class="banner"></div>
<div class="banner"></div>
<div class="banner"></div>
<div class="banner"></div>

上面标签当中都有一个同样的class属性,那么我们就可以使用class来查找了

var aMyt = document.getElementsByClassName('banner');//然后找到所有class为banner的标签并且加以控制。使用方法与上面两种标签是一样的

注意:getElementsByClassName是不兼容低版本的浏览器的,我们通常会使用1,2,3种方法加以封装,然后去查找class属性,下面是封装方法:

/*---------getElementsByClassName()使用  查找页面的class元素  开始---------*/
/*
	obj == 父元素,如果没有父元素,可以使用document
	tagName ==  子元素,如果想查找所有的子元素,可以使用'*'
	className == 页面中的class
	使用方法:
	getElementsByClassName(父元素,子元素,页面中的class)
*/
function getElementsByClassName(obj,tagName,className){
	var aEls = obj.getElementsByTagName(tagName);	//obj是什么盒子下的tagName标签
	var arr =[];									//建立一个空的数组
	for(var i=0;i<aEls.length;i++){					//循环下盒子下面有多少tagName标签
		var aClassName = aEls[i].className.split(' ');//如果class的'box box1'中间具有空格,就拆分了
		for(var j=0;j<aClassName.length;j++){		//然后循环拆分的数组里面
			if(aClassName[j ]==className){			//如果这个数组等于我们想要的
				arr.push( aEls[i] );				//那么就加到arr数组里面
				break;								//并且跳出去,避免脑残们的手误给元素增加相同的class
			}	
		}
	}
	return arr;										//最后返回arr给getElementsByClassName
};
/*---------getElementsByClassName()  结束---------*/


关注IT新闻、SEO优化、站长技术、营销、建站,扫描19652站长网二维码,定期送礼品。

微信扫描

安卓扫描

热门精选

  • js原生查找元素的4种方法

    js原生查找元素的4种方法

  • JS之--初识对象和创建对象

    JS之--初识对象和创建对象

  • CSS之--定位

    CSS之--定位

  • js判断分支条件语句

    js判断分支条件语句