这个href javascript逻辑是如何工作的？

Question

我犯了一个错误,忘了在我写的一些代码中使用属性值:

<a href="http://somesite.org/test-link/1" class="summary-title-link"></a>

var link = document.getElementsByClassName("summary-title-link")[0],
    ele = document.createElement("a");
ele.href = link;

而且我很惊讶地看到它仍然有效.

<a href="http://somesite.org/test-link/1"></a>

在下面这个例子的扩展中,我发现奇怪的是我在使用路径名之前不需要定位href属性？它似乎以某种方式假设我想要来自href属性的路径名.

var link = document.getElementsByClassName("summary-title-link")[0].pathname;

"/test-link/1"

Answer 1

当你将一个锚元素转换为一个字符串时,你实际上得到的href值,或更确切地说是"整个URL",而不是像大多数其他元素那样获得outerHTML,这就是它的工作原理

var href = document.getElementsByClassName("test")[0]; // DOM element

console.log(href.toString()); // gives you "http://google.com"

<a class="test" href="http://google.com">link</a>

锚的这种特殊行为在规范中指定

HTMLHyperlinkElementUtils.toString()

返回包含整个URL的USVString .
它是同义词URLUtils.href,但它不能用于修改值.