定义和用法
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