JavaScript getElementsByTagName()

红太狼 2020-05-27 12:42 495阅读 0赞

# JavaScript getElementsByTagName()

首先从其名称入手，getElementsByTagName 由四个单词合成：

（1）.get：具有“获取”的意思。

（2）.elements：具有“元素”的意思，是复数形式，由此推想此方法可以获取多个元素。

（3）.by：具有“通过”的意思，表示获取元素的手段。

（4）.TagName：具有 “标签名称” 的意思，比如 div 、p 或者 span 等

顾名思义，getElementsByTagName() 方法可以获取指定标签名的元素集合。

集合的主要特点总结如下：

（1）.集合是动态的，自动感知集合元素的增加或者减少的变化。

（2）.集合中元素通过索引进行访问，索引值从 0 开始计算。

语法结构：

```javascript
node.getElementsByClassName(classname)
```

语法解析：

（1）.node：可以是普通的 dom 元素节点，也可以是 document 。

（2）.tagname：必需，标签名称，比如 p、div 或者 span 等。

**浏览器支持：**

（1）.IE 浏览器支持此方法。

（2）.edge 浏览器支持此方法。

（3）.谷歌浏览器支持此方法。

（4）.opera 浏览器支持此方法。

（5）.火狐浏览器支持此方法。

（6）.safari 浏览器支持此方法。

**代码实例：**

```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style>
ul {
  width :150px;
  list-style-type: none;
  border: 2px dotted green;
  padding-left:10px
}
ul li {
  height :25px;
  line-height :25px;
  font-size :12px;
  padding: 0;
}
#show {
  width :160px;
  border: 2px dotted green;
  text-align: center;
  font-size: 12px;
}
</style>
<script> 
window.onload = ()=> { 
  let lis = document.getElementsByTagName("li");
  let oDiv = document.getElementById("show");
  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>
</body> 
</html>
```

通过 getElementsByTagName() 获取页面的 li 元素集合，然后将集合中 li 元素的数量写入 div。

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

0 表示第一个元素，1 表示第二个元素，以此类推，length-1 表示最后一个元素。

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

此代码功能与前一个代码完全一样，分析如下：

（1）.很多朋友认为此方法的调用者一定是 document 对象，事实并非如此。

（2）.也可以使用其他元素节点对象调用此方法，可以减少检索范围，效率更高。

```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style>
ul {
  width :150px;
  list-style-type: none;
  border: 2px dotted green;
  padding-left:10px
}
ul li {
  height :25px;
  line-height :25px;
  font-size :12px;
  padding: 0;
}
#show {
  width :160px;
  border: 2px dotted green;
  text-align: center;
  font-size: 12px;
}
</style> 
<script> 
window.onload = ()=> { 
  let lis = document.getElementsByTagName("li");
  let oDiv = document.getElementById("show");
  let oBt = document.getElementById("bt");
  oDiv.innerHTML = lis.length;
  oBt.onclick = ()=> {
    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.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style>
ul {
  width :150px;
  list-style-type: none;
  border: 2px dotted green;
  padding-left:10px
}
ul li {
  height :25px;
  line-height :25px;
  font-size :12px;
  padding: 0;
}
</style>
<script> 
window.onload = ()=> { 
  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>
```

代码分析如下：

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

（2）.然而事实，并没有完全删除所有元素，还剩余两个元素未被删除。

（3）.这就是集合是动态的原因导致的。

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

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

（6）.此时集合的数量变为三，index 变为 2。

（7）.第三次循环的时候，删除的不是原来的第三个元素，而是原来第五个元素。

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

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

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