您的位置:首页> 前端教程> JS教程
文章导航

getElementsByTagName()

2019-1-20 19:47| 作者: admin| 查看: 1912| 评论: 0|来自: 蚂蚁部落

掌握一个方法的功能,可以首先从它的名称入手,getElementsByTagName由四个单词合成:

(1).get:具有“获取”的意思。

(2).elements:具有“元素”的意思,是复数形式,由此可以推想此方法不止获取一个元素。

(3).by:具有“通过”的意思,表示获取元素的手段。

(4).TagName:具有“标签名称”的意思,比如div、p或者span等

知晓名称的构成,很容易推测功能,此方法可以获取具有指定标签名的元素集合。

特别说明:

(1).方法的返回值是一个集合,即便集合只有一个元素。

(2).集合中元素的索引位置是从0开始。

(3).集合是动态的,可能这一条不好理解,不用担心,后面会有代码演示。

语法结构:

[JavaScript] 纯文本查看 复制代码
elem.getElementsByTagName(tagname)

参数解析:

(1).tagname:必需,标签名称,比如p、div或者span等。

浏览器支持:

(1).IE浏览器支持此方法。

(2).edge浏览器支持此方法。

(3).谷歌浏览器支持此方法。

(4).opera浏览器支持此方法。

(5).火狐浏览器支持此方法。

(6).safria浏览器支持此方法。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
ul,li { list-style:none;} 
</style> 
<script> 
window.onload=function() { 
  let lis = document.getElementsByTagName("li");
  let odiv = document.getElementById("show");
  odiv.innerHTML = lis.length;
} 
</script> 
</head> 
<body> 
<div id="show"></div>
<ul id="box">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
  <li>蚂蚁部落四</li>
  <li>蚂蚁部落五</li>
</ul>
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/20/194849rgsbg98velvdbzld.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码通过方法可以获取页面的li元素集合,然后将集合中元素的数量写入div。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
*{padding:0px;}
ul,li { list-style:none;} 
</style> 
<script> 
window.onload=function() { 
  let lis = document.getElementsByTagName("li");
  let odiv = document.getElementById("show");
  lis[1].style.color="blue";
} 
</script> 
</head> 
<body> 
<ul id="box">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
  <li>蚂蚁部落四</li>
  <li>蚂蚁部落五</li>
</ul>
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/20/194913xxaueehbs90gyyqg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通过索引可以访问集合中的每一个元素,索引是从0开始计算的。

也就是0表示第一个元素,1表示第二个元素,以此类推,length-1表示最后一个元素。

所以上述代码可以将第二个li元素字体颜色设置为蓝色。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
*{padding:0px;}
ul,li { list-style:none;} 
</style> 
<script> 
window.onload=function() { 
  let oul=document.getElementById("box");
  let lis = oul.getElementsByTagName("li");
  let odiv = document.getElementById("show");
  lis[1].style.color="blue";
} 
</script> 
</head> 
<body> 
<ul id="box">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
  <li>蚂蚁部落四</li>
  <li>蚂蚁部落五</li>
</ul>
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/20/194936cz61u48wwwnthb66.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

此方法的功能与前一个代码完全一样,代码分析如下:

(1).很多朋友往往认为此方法的调用者一定是document对象,这其实是一种思维定式。

(2).也可以使用其他对象调用此方法,这样的话就可以在此对象下检索指定标签,可以减少检索范围。

(3).上述代码是在id属性值为"box"的元素下检索li元素,而不是在整个文档,效率更好。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
*{padding:0px;}
ul,li { list-style:none;} 
</style> 
<script> 
window.onload=function() { 
  let lis = document.getElementsByTagName("li");
  let odiv = document.getElementById("show");
  let obt=document.getElementById("bt");
  odiv.innerHTML = lis.length;
  obt.onclick=function(){
    lis[0].remove();
    odiv.innerHTML = lis.length;
  }
} 
</script> 
</head> 
<body> 
<ul id="box">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
  <li>蚂蚁部落四</li>
  <li>蚂蚁部落五</li>
</ul>
<div id="show"></div>
<input type="button" id="bt" value="查看效果"/>
</body> 
</html>

代码分析如下:

(1).默认集合中的li元素有五个,所以div显示数字5。

(2).现在点击按钮,可以删除第一个li元素,你可以发现div的数字变为4。

(3).由此可见,集合是动态的,能够自动感知集合中元素的删除与添加。

认识到这一点非常重要,否则可能会导致一些非常奇怪的现象,并且不容易查找错误。

下面演示一个由于集合动态导致的常见的错误,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
*{padding:0px;}
ul,li { list-style:none;} 
</style> 
<script> 
window.onload=function() { 
  let lis = document.getElementsByTagName("li");
  for(let index=0;index<lis.length;index++){
      lis[index].remove();
  }
} 
</script> 
</head> 
<body> 
<ul id="box">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
  <li>蚂蚁部落四</li>
  <li>蚂蚁部落五</li>
</ul>
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/20/195016prpqsnff6qnrp6qs.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).上述代码的本来目的是通过for循环删除集合中的所有元素。

(2).然而事实,并没有完全删除所有元素,还剩余两个元素被删除、

(3).这就是集合是动态的原因导致的。

(4).当删除第一个元素之后,集合元素数量由五变为四,原来的第二个元素变为第一个元素,index变为1。

(5).第二次循环的时候,删除的不是原来的第二个元素,而是第三个元素,于是导致原来第二个li没有被删除。

(6).此时集合的数量变为三,index变为2。

(7).第三次循环的时候,删除的不是原来的第三个元素,而是原来第五个元素。

只要明白这个动态现象,上述现象就比较容易理解了,解决方案如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
*{padding:0px;}
ul,li { list-style:none;} 
</style> 
<script> 
window.onload=function() { 
  let lis = document.getElementsByTagName("li");
  for(let index=0;lis.length>0;){
      lis[index].remove();
  }
} 
</script> 
</head> 
<body> 
<ul id="box">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
  <li>蚂蚁部落四</li>
  <li>蚂蚁部落五</li>
</ul>
</body> 
</html>

上述代码可以删除所有的li元素,非常简单,每一次循环都可以删除集合中的第一个元素。

只要判断集合的数量只要大于0,说明集合中还有li元素没有被删除,那么继续f循环。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部