0

嗨，我需要使用 javascript 在我的页面上验证 href 是否为空。我搜索了该站点并找到了一些示例，但它对我不起作用。我一定会错过一些我没有注意到的东西。有人会指出我的好方向和我的错误。我收到错误“无法获取未定义或空引用的属性'getattribute'。<a>元素就像<a name="playback" href="">html文件上的那个。

提前致谢。

我的代码在加载事件上运行：

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.
             }
        }
    }
}
4

5 回答 5

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");
    })
};

演示

或者 ：

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");
    }
}

演示

于 2013-11-12T22:43:07.663 回答
1

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

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

与上面的示例类似，您在循环完成后被onclick触发。 所以在你的例子中等于。
ianchors.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));
}
于 2013-11-12T22:47:20.230 回答
1

在您的代码中，调用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");
}
于 2013-11-12T22:51:44.467 回答
0

我以前从未见过 getAttribute，所以我对它进行了一些测试。事实证明，href两者getAttribute("href")完全不同。即href是绝对url，getAttribute("href")是页面的相对url。看到这个小提琴。

您的代码的问题是 var 在 onclick 的闭包中被捕获，并且当 onclick 函数运行时， will 的值将i是anchors.length。

解决方案，使用Johannes H.His 的代码的 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");
    };
  } ());
}
于 2013-11-12T22:52:33.113 回答
-2

有关如何从锚标记获取 href 属性的信息，请参阅此 w3 学校页面。

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;

             }
       }
}
于 2013-11-12T22:43:24.473 回答