HTML DOM Anchor 对象
HTML DOM Anchor 对象
在 HTML 网页中,超链接是连接一个文档到另一个文档的最常见方式,超链接由 <a>
元素定义。在 HTML DOM 中,超链接由 Anchor 对象 定义。
Anchor 对象表示 HTML 页面中的超链接,它是 Document 对象的一部分。它通过文档中的超链接 <a>
元素创建,可以用来读取和修改超链接的 URL 和其他属性。
创建 Anchor 对象
在 JavaScript 中,可以使用 document.createElement()
方法来创建一个新的 <a>
元素。这个方法可以生成一个具有指定属性和值的新元素。
let newLink = document.createElement("a");
newLink.href = "http://www.example.com";
newLink.innerHTML = "Example Website";
上面的代码可以创建一个新的超链接元素,并设置它的 href
和 innerHTML
属性。
可以使用 document.getElementById()
方法获取一个页面中存在的 <a>
元素,并将其作为 Anchor 对象使用。
<a href="http://www.example.com" id="example">Example Website</a>
let exampleLink = document.getElementById("example");
上述代码会从文档中获取带有 id
属性的元素,并将其赋值给 exampleLink
变量。exampleLink
变量现在表示了页面上的这个超链接对象。
Anchor 对象属性
Anchor 对象有一系列属性,可以用来读取和设置超链接的信息。下面列出了常用的几个属性。
属性:href
href
属性表示超链接的 URL。可以通过这个属性将页面中的超链接指向任何其他网页。
exampleLink.href = "http://www.example2.com";
上述代码会将 exampleLink
链接到指定的新网址。
属性:target
target
属性仅在超链接用于在新浏览器窗口或标签页中打开时使用。设置这个属性可以在用户单击链接时打开新窗口或标签。
exampleLink.target = "_blank";
_blank
值表示在新浏览器窗口或标签页中打开,而 _self
表示在当前窗口或标签页中打开。
属性:title
title
属性用于创建一个鼠标悬停提示,在鼠标移到链接上时,会在浏览器中显示一个工具提示。
exampleLink.title = "这是一个示例链接";
设置 title
属性后,当用户将鼠标移到链接的上方时,浏览器将会显示一个包含指定文本的标题。
Anchor 对象方法
Anchor 对象还有一些方法,可以用来操作超链接。下面列出了常用的方法。
方法:click()
click()
方法用于模拟用户单击链接的操作。
exampleLink.click();
上述代码调用 click()
方法,会模拟用户单击了页面中的 exampleLink
超链接。这将会打开链接的目标网址。
总结
Anchor 对象是 HTML DOM 的一部分,表示 HTML 网页中的超链接。使用 JavaScript,可以读取和修改超链接的属性和方法,以便改变超链接指向的目标,或者模拟用户单击该链接。当编写 JavaScript 以控制超链接时,Anchor 对象是一个非常有用的工具。