定义和用法
item() 方法返回 HTMLCollection 对象中指定索引位置的元素。
元素在 HTMLCollection 对象中的顺序与它们在文档源代码中出现的顺序一样,索引起始位置为 0。
也可以使用以下简写的方式,获取的结果是一样的:
var x = document.getElementsByTagName("P")[0];语法
HTMLCollection.item(index)
或者:
HTMLCollection[index]| 参数 | 类型 | 描述 |
|---|---|---|
| index | Number | 必需,元素的索引值。 注意: 起始位置为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
支付宝
微信