实现思想：筛选。
- 第一步：划定查找筛选范围；选定所有元素。
- 第二步：遍历每一个被选中的元素。
- 第三步：如果满足了条件，就会将选择的元素放入一个数组。
- 第四步：给出一个返回数组，便于调用。
<body>
<div id="box">
<ul>
<li>1</li>
<li class="box">2</li>
<li>3</li>
<li class="box">4</li>
<li>5</li>
</ul>
</div>
<script>
window.onload = function () {
function getClassName(){
var allElement=document.getElementsByTagName('*');//用*获取所有的元素。
console.log(allElement);
var arr=[];//声明一个数组用来存取获取到元素
for(var i=0;i<allElement.length;i++){
if(allElement[i].className=="box"){
console.log(1);
arr.push(allElement[i]);
}
}
return arr;
}
var aLi=getClassName();
console.log(aLi);
}
</script>
</body>
上述代码基本实现了classname的查找方法，然后就是将此函数封装抽取成为一个方法：具体的实现步骤就是提取公共部分代码。
function getClassName(className){
var allElement=document.getElementsByTagName('*');
var arr=[];
for(var i=0;i<allElement.length;i++){
if(allElement[i].className==className){
arr.push(allElement[i]);
}
}
return arr;
}
在HTML文档中因引入getClassName("box")，就可以得到相应的元素节点。
特殊情况考虑：
- 第一：同一个元素有多个类名的情况，同一个元素有多个重名的情况，会出现多次选中，其实只需要在第一次查找以后如果出现了我们需要的元素后，就可以在循环中加入一个break就可以。
- 第二：同一个document下，出现了多个相同类名元素：例如
<div id="box">
<ul>
<li>1</li>
<li class="box">2</li>
<li>3</li>
<li class="box">4</li>
<li>5</li>
</ul>
</div>
<div id="box">
<ul>
<li>1</li>
<li class="box">2</li>
<li>3</li>
<li class="box">4</li>
<li>5</li>
</ul>
</div>
代码改进：将搜索的区域进行手动删选就可以，具体实现方式如下代码：
function getClassName(arr,TagName,className){
var allElement=arr.getElementsByTagName('TagName');
var arr=[];
for(var i=0;i<allElement.length;i++){
if(allElement[i].className==className){
arr.push(allElement[i]);
}
}
return arr;
}
网友评论