HTML JavaScript获取href和onclick

在本文中，我们将介绍如何使用HTML和JavaScript获取href和onclick属性，并提供相关示例。

阅读更多：HTML 教程

获取href属性

在HTML中，href属性用于指定链接的目标地址。通过JavaScript，我们可以轻松地获取并使用这个属性。

要获取元素的href属性，我们可以使用getElementById或getElementsByClassName等方法，然后使用getAttribute方法获取href的值。例如：

<!-- HTML -->
<a href="http://www.example.com" id="myLink">点击这里</a>

<script>
  // JavaScript
  var myElement = document.getElementById("myLink");
  var hrefValue = myElement.getAttribute("href");
  console.log(hrefValue); // 输出：http://www.example.com
</script>

在上面的示例中，我们首先通过getElementById方法获取具有id为”myLink”的元素，然后使用getAttribute方法获取该元素的href属性的值。最后，我们将href的值打印到浏览器的控制台中。

我们还可以使用更通用的方法如querySelector来获取元素的href属性：

<!-- HTML -->
<a href="http://www.example.com" class="myLink">点击这里</a>

<script>
  // JavaScript
  var myElement = document.querySelector(".myLink");
  var hrefValue = myElement.getAttribute("href");
  console.log(hrefValue); // 输出：http://www.example.com
</script>

在上述示例中，我们通过querySelector方法使用类选择器”.myLink”获取具有class为”myLink”的元素，然后获取其href属性的值。

获取onclick属性

onclick属性用于指定元素被点击时要执行的JavaScript代码。同样，我们可以使用JavaScript来获取和处理onclick属性。

要获取元素的onclick属性，我们可以使用与获取href属性相似的方法。例如：

<!-- HTML -->
<button onclick="myFunction()">点击这里</button>

<script>
  // JavaScript
  var myElement = document.getElementsByTagName("button")[0];
  var onclickValue = myElement.getAttribute("onclick");
  console.log(onclickValue); // 输出：myFunction()
</script>

在上面的示例中，我们通过getElementsByTagName方法获取第一个button元素，然后使用getAttribute方法获取该元素的onclick属性的值。最后，我们将onclick的值打印到浏览器的控制台中。

同样，我们也可以使用querySelector来获取元素的onclick属性：

<!-- HTML -->
<button onclick="myFunction()">点击这里</button>

<script>
  // JavaScript
  var myElement = document.querySelector("button");
  var onclickValue = myElement.getAttribute("onclick");
  console.log(onclickValue); // 输出：myFunction()
</script>

在上述示例中，我们通过querySelector方法获取第一个button元素，并获取其onclick属性的值。