HTML DOM rel 属性
JavaScript基础 2022-06-08 15:28:38小码哥的IT人生shichen
HTML DOM rel 属性
定义和用法
rel 属性可设置或返回到目标文档的关系。
rel 和 rev 属性可以同时在 <a> 标签中使用。
rel (relationship) 属性规定了从源文档到目标文档的关系。rev (reverse) 属性规定了从目标文档到当前文档的反向关系。
浏览器可以使用它们改变锚内容的外观，或者自动构建文档浏览菜单。其他工具也可以使用这些属性构建特殊的链接集合、目录和索引等。
语法
anchorObject.rel=relationship
两个属性均可采用下面的值：
| 值 | 描述 |
|---|---|
| appendix | 链接到文档的附录页。 |
| alternate | 链接到一个备选的源。 |
| bookmark | 链接到一个书签。在 web blogs 中常用于 "permalink"。 |
| chapter | 从当前文档链接到一个章节。 |
| contents | 链接到当前文档的内容目录。 |
| copyright | 链接到当前文档的版权或隐私页面。 |
| glossary | 链接到当前文档术语表。 |
| index | 链接到当前文档的索引。 |
| next | 链接到集合中的下一个文档。 |
| prev | 链接到集合中的前一个文档。 |
| section | 链接到文档列表中的一个小节。 |
| start | 链接到当前文档的第一页。 |
| subsection | 链接到当前文档列表中的子小节。（一个小节可拥有多个子小节。） |
| head | 链接到集合中的顶级文档。 |
| toc | 链接到集合的目录。 |
| parent | 链接到源上面的文档。 |
| child | 链接到源下面的文档。 |
实例
下面的例子可返回链接的关系：
<html>
<body>
<p><a id="myAnchor" rel="index"
href="http://www.phpcodeweb.com">Visit phpcodeweb.com</a></p>
<script type="text/javascript">
x=document.getElementById("myAnchor");
document.write(x.rel);
</script>
</body>
</html>TIY
完整实例【取得链接的关系】：
<!DOCTYPE html>
<html>
<body>
<p><a id="myAnchor" rel="nofollow" href="https://www.phpcodeweb.com/">phpcodeweb</a></p>
<p>单击按钮以显示上面链接的 rel 属性的值。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myAnchor").rel;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
