HTML DOM 锚点集合
htmlweb developmentfront end technology更新于 2024/6/11 15:08:17
HTML DOM 锚点集合用于返回 HTML 文档中所有锚点标签 (<a>) 的集合。只有当链接具有关联的 name 属性时，它才会计数。然而，name 属性在当前的 HTML5 中已被弃用。元素的显示顺序与它们在 html 源文档中的顺序相同。
属性
以下是 Anchor 集合的属性。
| 属性 | 描述 |
|---|---|
| length | 它将返回 html 文档中链接 (<a>) 的数量。 |
方法
以下是 Anchor 集合的方法。
| 方法 | 描述 |
|---|---|
| [Index] | 返回指定索引处的链接。索引从 0 开始，按从上到下的顺序排列。如果未找到任何项目，则返回 Null。 |
| item(index) | 返回指定索引处的链接。索引从 0 开始。如果未找到任何项目，则返回 Null。 |
| namedItem(id): | 它将返回集合中指定 id 的链接。如果未找到任何项目，则返回 Null。 |
语法
以下是语法 −
用于获取锚点集合。
document.anchors
注意 − 锚点集合无法设置，因为它们是只读的。
示例
让我们看一个锚点集合的示例 −
<!DOCTYPE html>
<html>
<body>
<a name="example">Sample1</a><br>
<a name="example1">Sample2</a><br>
<a name="example2">Sample3</a><br>
<p>Click the button to get first link text in the above list</p>
<button onclick="getCollection()">Collection</button>
<button onclick="getLength()">Length</button>
<p id="sample"></p>
<script>
function getCollection() {
var x = document.anchors[0].innerHTML;
document.getElementById("sample").innerHTML = x;
}
function getLength() {
var x = document.anchors[0].innerHTML.length;
document.getElementById("sample").innerHTML = x;
}
</script>
</body>
</html>
输出
它将产生以下输出 −
点击"收藏"按钮时 −
点击"长度"按钮时 −
在上面的例子中 −
我们有三个链接，它们的 name 属性分别为 example、example1 和 example2
<a name="example">Sample1</a><br> <a name="example1">Sample2</a><br> <a name="example2">Sample3</a> <br>
然后我们有两个按钮，分别为 collection 和 length，分别用于执行 getCollection() 和 getLength() 函数。
<button onclick="getCollection()">Collection</button> <button onclick="getLength()">Length</button>
getCollection() 函数返回索引位置 0 处的锚标记文本，在本例中为 Sample1。getLength() 函数返回链接文本的长度。此处链接文本为 Sample1，因此返回的长度为 7。
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
