HTMLCollection item() 方法
JavaScript基础 2022-06-08 12:12:47小码哥的IT人生shichen
HTMLCollection item() 方法
实例
获取本文档第一个 <p> 元素的 HTML 内容：
function myFunction() {
var x = document.getElementsByTagName("P").item(0);
alert(x.innerHTML);
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>HTMLCollection item() 方法</h1>
<p>item() 方法返回指定索引处的元素。</p>
<p>点击按钮返回本页第一个 P 元素的内容：</p>
<button onclick="myFunction()">输出 P 元素的 innerHTML</button>
<script>
function myFunction() {
var x = document.getElementsByTagName("P");
alert(x.item(0).innerHTML);
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
item() 方法返回 HTMLCollection 中指定索引处的元素。
元素按照它们在源代码中出现的位置进行排序，索引从 0 开始。
也可以使用简写方法，并且会产生相同的结果：
var x = document.getElementsByTagName("P")[0];浏览器支持
| 方法 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| item() | 支持 | 支持 | 支持 | 支持 | 支持 |
语法
HTMLCollection.item(index)
或者：
HTMLCollection[index]
参数值
| 参数 | 类型 | 描述 |
|---|---|---|
| index | Number |
必需。要返回的元素的索引。 注释：索引从 0 开始。 |
更多实例
示例代码：
更改第一个 <p> 元素的 HTML 内容：
document.getElementsByTagName("P").item(0).innerHTML = "Paragraph changed";
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>HTMLCollection item() 方法</h1>
<p>A P element.</p>
<p>Another P element.</p>
<p>A third P element.</p>
<p>单击按钮更改第一个 P 元素的 HTML 内容：</p>
<button onclick="myFunction()">改变内容</button>
<script>
function myFunction() {
document.getElementsByTagName("P")[0].innerHTML = "Paragraph changed";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
循环遍历所有 class="myclass" 的元素，并更改它们的背景颜色：
var x = document.getElementsByClassName("myclass");
for (i = 0; i < x.length; i++) {
x.item(i).style.backgroundColor = "red";
}
完整实例：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>HTMLCollection item() 方法</h1>
<p>A P element.</p>
<p class="myclass">Another P element.</p>
<p class="myclass">A third P element.</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(0).style.backgroundColor = "red";
}
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
获取 <div> 元素中第一个 <p> 元素的 HTML 内容：
var div = document.getElementById("myDIV");
var x = div.getElementsByTagName("P").item(0).innerHTML;
完整实例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 5px;
}
</style>
</head>
<body>
<h1>HTMLCollection item() 方法</h1>
<p>使用 item() 方法获取 DIV 中的第一个 P 元素。</p>
<div id="myDIV">
<p>First p element in div.</p>
<p>Another p element in div.</p>
<p>A third p element in div.</p>
</div>
<p>点击按钮获取 P 元素的内容：</p>
<button onclick="myFunction()">获取内容</button>
<p id="demo"></p>
<script>
function myFunction() {
var div = document.getElementById("myDIV");
var x = div.getElementsByTagName("P").item(0).innerHTML;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
