Question

嗨我需要使用javascript在我的页面上有效地使用href是空的。我搜索了网站并找到了一些例子，但它对我没用。我必须错过一些我没注意到的东西。有人会指出我的好方向和我的错误。我收到错误“无法获取未定义或空引用的属性'getattribute'。<a>元素与html文件上的<a name="playback" href="">类似。

提前致谢。

我的代码在load事件上运行：

var anchors = document.getElementsByTagName("a");
for (var i = 0; i < anchors.length; i++)
{
     anchors[i].onclick = function() {
         if (anchors == null) {
             alert('null');
         }
         else {
             var link = anchors[i].getAttribute("href");
            //var link= anchors[i].attributes['href']  this line doesn't work too.
             }
        }
    }
}

Answer 1

如果你想这样做，你需要使用闭包，因为你正在使用共享的i变量，当你的处理程序在点击运行时，该变量可能具有最后的迭代值。但是，既然您正在查看该特定锚点，请尝试使用绑定事件侦听器绑定它并使用this.href访问它：

您可以使用addEventListener和旧浏览器支持attachEvent

var anchors = document.getElementsByTagName("a");
for (var i = 0; i < anchors.length; i++) {
    anchors[i].addEventListener('click', function () {
            var link = this.getAttribute("href");
    })
};

<强> Demo

或者：

var anchors = document.getElementsByTagName("a");
for (var i = 0; i < anchors.length; i++) {
    anchors[i].onclick = getHandler(i);
}

function getHandler(i) {
    return function () { //Now each of your handler has its own `i`
         var link = anchors[i].getAttribute("href");
    }
}

<强> Demo

Answer 2

你有一个范围问题。以下代码将输出 3 ：

for (var i = 0; i < 3; i++) {
}
console.log(i); // 3

与上述示例相似，您的onclick在完成循环后被触发。
因此，您的示例中的i将等于anchors.length。

anchors[anchors.length] === undefined。

要解决此问题，您必须创建一个新范围例如，您可以使用立即调用的函数表达式（IIFE）：

var anchors = document.getElementsByTagName("a"); for (var i = 0; i < anchors.length; i++) { (function(j){ anchors[j].onclick = function() { if (anchors == null) { alert('null'); } else { var link = anchors[j].getAttribute("href"); } } } }(i)); }

Answer 3

在您的代码中，对getAttribute的调用位于一个闭包内（即，一个没有名称的“内联”函数），该函数被分配给链接的onlick事件处理程序。因此，代码不会立即被执行 - 它在onclick处理程序触发之前不会运行当触发onclick标头时，会将两件事传递给回调函数：触发事件的元素被分配给函数上下文的this变量 - 事件本身作为第一个参数传递。但是，anchors在该回调的范围内未定义。

所以，使用其中任何一个：

anchors[i].onclick = function () {
    var link = this.getAtrribute("href");
}

anchors[i].onclick = function (event) {
   var link = event.target.getAttribute("href");
}

Answer 4

之前我从未见过getAttribute所以我对它进行了一些测试。事实证明，href和getAttribute("href")完全不同。即href是绝对网址，getAttribute("href")是网页的相对网址。请参阅此fiddle。

代码的问题在于onclick的闭包中捕获了var，当onclick函数运行时，i的值为anchors.length。

解决方案，使用Johannes H.代码的Scratch更好

var anchors = document.getElementsByTagName("a");
for (var i = 0; i < anchors.length; i++) {
  (function () {
    var current = anchors[i]; //Capture the anchor element
    current.onclick = function() {
     var link = current.getAttribute("href");
    };
  } ());
}

Answer 5

请参阅此w3学校页面，了解如何从锚标记中获取href属性。

http://www.w3schools.com/jsref/prop_anchor_href.asp

var anchors = document.getElementsByTagName("a");
for (var i = 0; i < anchors.length; i++)
 {
     anchors[i].onclick = function() {
         if (anchors == null) {
             alert('null');
         }
         else {
             var link = this.href;

             }
       }
}

无法获得href值

5 个答案: