JavaScript - 通过 DOM 遍历获取 href 属性值

Question

我正在编写客户端JavaScript代码，我必须从href属性中检索URL。

我已经将 DOM 带到了一个点：

document.getElementById('something').getElementsByTagName('td')[3];

哪些输出：

<td><a href="http://example.com"></a></td>

从那里，我如何获得http://example.com？

我尝试使用.getAttribute("href")，但我得到了null。

我错过了什么吗？

Answer 1

td标记没有href属性(没有表单元格具有此属性(;其子a标记具有此属性。

您可以使用查询选择器获取表单元格内的a标记，从中获取href属性。

document.getElementById('something').getElementsByTagName('td')[3].querySelector('a').href;

或者，可以将整个选择组合到查询选择器中。

document.querySelector('#something td:nth-child(3) a').href;

<table id="something">
<td>1</td><td>2</td><td><a href="http://www.example.com">example.com</a></td>
</table>
<script>
console.log(document.querySelector('#something td:nth-child(3) a').href);
</script>

Answer 2

Edit

我想我应该指出(因为这已被接受(，@LGSon在评论中的内容以及@hev1在他们的答案中所做的，这应该以更优雅的方式处理，而不是简单地调用多个 DOM 元素getElement。

下面是获取href值的调用的建议(和更好(版本：

document.querySelector('#something td:nth-child(3) a').href;

原始答案

href属性存在于锚标记 (<a>( 上，锚标记是<td>元素的子元素。您需要使用 DOMchildren属性之类的东西来获取锚点，如下所示：

tdElement = document.getElementById('something').getElementsByTagName('td')[3];
anchor = tdElement.children[0];
anchor.getAttribute("href");

Answer 3

纯粹使用js(不是jquery(，如果您想在选择所需的td标签时专门继续：

td.getElementsByTagName("a")[0].href

td是从示例代码返回的td元素。

Answer 4

<script>
let x = document.getElementById("test").href;
console.log(x);
</script>

您也可以按类或标签获取，但您必须遍历数组，这可能是页面上的大量标签。

也

document.getElementById('something').getElementsByTagName('td')[3].firstElementChild.href