getelementbytag(getElementBytagname)
getelementbytagname("div")方法可以获取所有的DIV元素，但是获取到集合后，如何进一步获取class属性为特
原生JS有3种方式来获取元素:
getElementById('id') getElementsByName('name') getElementsByTagName('tag') getElementById是获取元素最快的方式,但我们不能给每个HTML元素都加以ID吧,所以我们需要一个很方便的通过className来获取元素 function getElementsByClassName(className,tagName){ var ele=[],all=document.getElementsByTagName(tagName||"*"); for(var i=0;iall.length;i++){ if(all[i].className==className){ ele[ele.length]=all[i]; } } return ele; } console.log(getElementsByClassName("entry")); console.log(getElementsByClassName("entry","div"));
实现原理很简单,通过getElementsByTagName获取到一个元素集合,如果传入了tagname这个参数就根据传入的
tagname来获取,否则获取所有的元素,然后再一个一个元素来匹配classname是否相等..
上面这个方法很粗糙,能实现我们的基本需求,如果我们要获取的元素有多个 classname怎么办?
明显通过className==是不行了
所以我们只要把上面两篇文章的hasclass函数搬过来就OK了，我们再次来改造下我们的getElementsByClassName函数
function getElementsByClassName(className,tagName){ var ele=[],all=document.getElementsByTagName(tagName||"*"); for(var i=0;iall.length;i++){ if(all[i].className.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'))){ ele[ele.length]=all[i]; } } return ele; }
这样就能处理一个元素含有多个classname的情况了
JS:有个getElementByTag()的具体怎么写,是什么?
是getElentsByTagName()
1，这里的Element后面是有个s的。
2，Tag后面有个Name，而且首字母大写。
3，由第一条知道，这里获取的是一组元素，即使这个页面上只有一个这样的标签，获取的还是一组，如果想单独访问每个元素，可以使用下标的方式。下标是从0开始的。
关于js问题：getElementByTagName有些加[0]，有些不加[0]，具体是怎么用法？
getElementByTagName返回的是符合 tag name的所有元素，是一个数组，
加【0】的意思，是取这个数组的第一个元素
JavaScript getElementByTag和getElementByName的区别
因为name重复了吧，ByTag是根据标签的名称获取标签，ByName是根据标签的name属性获取标签
js如何在指定的div内使用getElementsByTagName获取元素
在指定的div内使用getElementsByTagName获取元素的主要代码为：
getElementById(div_id).getElementsByTagName(tag_name);
示例如下：
1、HTML结构
div?id="test"
id=test:?spanGlen/spanspanTane/spanspanJohn/spanspanRalph/span
/div
div?id="test1"
id=test0:?spanGlen1/spanspanTane1/spanspanJohn1/spanspanRalph1/span
/div
input?type='button'?value='获取id为test的div下的span'?onClick="fun()"/
2、javascript代码
function?fun(){
obj?=?document.getElementById("test").getElementsByTagName("span");
str=?[];
for(i=0;iobj.length;i++){
str.push(obj[i].innerHTML);
}
alert(str);
}
3、效果演示