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 。

我错过了什么吗？

原文由 hnvasa 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

编辑

我想我应该指出（因为这已被接受）@LGSon 在评论中提出的内容和@hev1 在他们的回答中提出的内容，这应该以比简单调用更优雅的方式处理 getElement 在多个 DOM 元素上。

这是获取 href 值的调用的建议（并且更好）版本：

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

## 原始答案

`href` 属性存在于锚标记（ `<a>` ）上，它是 `<td>` 元素的子元素。您需要使用 DOM `children` 属性来获取锚点，如下所示：

tdElement = document.getElementById(‘something’).getElementsByTagName(‘td’)[3]; anchor = tdElement.children[0]; anchor.getAttribute(“href”);

”`

原文由 Tim Klein 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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>

原文由 Unmitigated 发布，翻译遵循 CC BY-SA 4.0 许可协议