使用原生JavaScript模拟getElementByClassName

最近在工作中,由于有一个插件必须使用jquery-pack.js,而这个包又是非常古老的jquery,所以又的函数是无法使用的,例如$()选择器以及parent()都取不到标签的内容,所以没办法,只能用原生的JavaScript了,为了实现这个功能,我得通过HTML标签的Class来获得标签的DOM结构。在JavaScript 内建的核心中,document对象及element对象总共可以通过三个方式来获取其下的元素,分别是:getElementById(‘id’) 、getElementsByName(‘name’) 、getElementsByTagName(‘tag’)  。可是在设计网页时,最常常需要使用到的class却没有相对应的方法可以去获取className相同的元素。不过我们可以自己写一个,代码以很简单:

function getElementByClassName(tagName, className)
{
	var tag = document.getElementsByTagName(tagName);
	var tagAll = [];
	for (var i = 0; i < tag.length; i++) {
		if (tag[i].className.indexOf(className) != -1) {
			tagAll[tagAll.length] = tag[i];
		}
	}
	return tagAll;
}

原理就是通过获取指定的标签,使用getElementsByTagName来获取标签的内容,然后根据标签的className跟传进来的参数进行对比,如果相等就放入数组中最后返回。

 

Tonitech版权所有 | 转载请注明出处: http://www.tonitech.com/1604.html

《使用原生JavaScript模拟getElementByClassName》有5个想法

  1. 不错不错,但是~
    1.函数名应该是getElementsByClassName
    2.className应该是第一个参数,因为你的函数名决定的,
    tagName应该是个可选的参数,也就是说
    getElemtntsByClassName(className, tagName = null) //不能这么写,只是表达一下
    3.当没有tagName时,var tag = tagName ? $(tagName) : $(body);
    4.有几个变量的命名不太好

    建议这样修改:
    function getElementsByClassName(className, tagName)
    {
    if (typeof className != “string” || className == “”)
    throws “There must be a class name!”;

    var tags, matchedTags;
    if (tagName)
    tags = document.getElementsByTagName(tagName);
    else
    tags = document.getElementsByTagName(*);

    matchedTags = [];
    for (var i = 0; i < tags.length; i++) { if (tags[i].className.indexOf(className) != -1) { matchedTags.push(tags[i]); } } return matchedTags; }

发表评论