HTMLCollection item() 方法 | DOM对象

返回到:DOM对象:DOM HTMLCollection

定义和用法

item() 方法返回 HTMLCollection 对象中指定索引位置的元素。

元素在 HTMLCollection 对象中的顺序与它们在文档源代码中出现的顺序一样,索引起始位置为 0。

也可以使用以下简写的方式,获取的结果是一样的:

var x = document.getElementsByTagName("P")[0];

语法

HTMLCollection.item(index)

或者:

HTMLCollection[index]
参数类型描述
indexNumber必需,元素的索引值。

注意: 起始位置为0,最后一位元素索引为 HTMLCollection.length-1,index 需要在这个范围内。

所有主要浏览器都支持 item() 方法

实例

DEMO1:修改第一个 p 元素的 HTML 内容。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程(Web176.com)</title>
</head>
<body>

<h1>HTMLCollection item() 方法</h1>

<p>第一个 p 元素</p>
<p>第二个 p 元素</p>
<p>第三个 p 元素</p>

<p>点击按钮修改第一个 p 元素的内容。</p>

<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
  document.getElementsByTagName("P")[0].innerHTML = "段落已修改";
}
</script>

</body>
</html>

DEMO2:循环输出所有 class=”myclass 的元素并修改它们的背景颜色。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程(Web176.com)</title>
</head>
<body>

<h1>HTMLCollection item() 方法</h1>

<p>第一个 p 元素</p>
<p class="myclass">第二个 p 元素</p>
<p class="myclass">第三个 p 元素</p>

<p>点击按钮修改所有 class="myclass" 元素的内容并添加背景颜色:</p>

<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
  var x, i;
  x = document.getElementsByClassName("myclass");
  for (i = 0; i < x.length; i++) {
    x.item(i).style.backgroundColor = "red";
  }
}
</script>

</body>
</html>

DEMO3:获取第一个 p 元素的 HTML 内容并插入到 div 元素中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程(Web176.com)</title>
<style>
div {
  border: 1px solid black;
  margin: 5px;
}
</style>
</head>
<body>

<h1>HTMLCollection item() 方法</h1>

<p>使用 item() 方法获取第一个 p 元素并插入到 div 中。</p>

<div id="myDIV">
  <p>第一个 p 元素</p>
  <p>第二个 p 元素</p>
  <p>第三个 p 元素</p>
</div>

<p>点击按钮获取 p 元素的内容:</p>

<button onclick="myFunction()">点我</button>

<div id="demo"></div>

<script>
function myFunction() {
  var div = document.getElementById("myDIV");
  var x = div.getElementsByTagName("P").item(0).innerHTML;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

作者:terry,如若转载,请注明出处:https://www.web176.com/javascriptbook/domtips/3763.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年9月16日 下午4:07
下一篇 2021年9月23日 下午4:20

相关推荐

发表回复

登录后才能评论