通过标签名称 [this] 获取元素？

Question

首先是一个简短的背景。所以我刚开始练习使用 API's。对于我现在正在使用的那个，我正在加载一个 DIV，其中有很多 link，我必须给出一个新的目的。我设法阻止了默认的 onclick 功能。现在我需要保存点击的 link "innerHTML" 属性。

var nextPage = document.getElementsByTagName("a")[this].innerHTML;

我尝试使用 [this] 定位点击的 link，但没有成功。希望你明白我想做什么。如果是这样，我有什么办法可以解决这个问题吗？

谢谢！

编辑：

     $("#content, a").click(function(event){
 event.preventDefault();

     var x = document.getElementsByTagName("a")[0].innerHTML;
    console.log(x)



 getPage(x);
 });

Answer 1

this.innerHTML 可以完成这项工作，如果我的理解正确的话。

如果您要在其中获取整个 html，则可以将 onclick 事件绑定到锚点本身，如果可能的话，可以对其进行处理。

<a onclick="clicked(this)">Click me</a>
function clicked(element) {
    // Do whatever needed
    // element.innerHTML will change it's innerHTML
}

你也可以点赞以下

$("#content, a").click(function(event){
    event.preventDefault();
    event.target.innerHTML = "Whatever";
})

Answer 2

为此使用 jQuery：

$('a').on('click', function(){
  // this will run with every click, and 'this' will be your clicked item
  console.log(this.innerHTML);

  // although you probably want:
  console.log($(this).attr('href'));
});

使用 jQuery 可以让您的代码更简洁，并统一您在直接使用 DOM api.

处理时可能遇到的跨浏览器兼容性问题

Answer 3

首先 document.getElementsByTagName("a")[this].innerHTML; 将 return undefined 因为它将 return html 节点的集合并且它必须传递索引而不是 this.

因为您已经点击了一次，您可以试试这个代码：

function yourClickFunction(event) {
  var target = event.target || event.srcElement;
  var nextPage = target.innerHTML;
}

Answer 4

您可以使用常见的 class（下例中的 link）来附加点击事件，然后只需使用 this.innerHTML 到 return 您点击的文本link.

希望对您有所帮助。

var classname = document.getElementsByClassName("link");

var clickFunction = function(){
  //Prevent default
  if ( event.preventDefault ) event.preventDefault();
  event.returnValue = false;
  
  //Get text
  console.log(this.innerHTML);
}

for(var i=0;i<classname.length;i++){
  classname[i].addEventListener('click', clickFunction, false);
}

<a href='link-1' class='link'>Link 1</a>
<a href='link-2' class='link'>Link 2</a>
<a href='link-3' class='link'>Link 3</a>

Answer 5

您可以向所有 a 标签元素添加 onclick 侦听器

var links = document.getElementsByTagName('a');
for (var i = 0, il = links.length; i < il; i++) {
  links[i].onclick = clickHandler;
}

function clickHandler(event) {
  console.log(this.innerHTML);
}

<a>Link a</a>
<a>Link b</a>

Answer 6

document.getElementsByTagName("a") 给你一个 HTMLAnchorElement 数组。数组的索引是从 0 到 n 的整数值。

this 在你的上下文中我认为它是 windows 对象（你的代码示例有点短所以我不得不猜测一下）

使用 window 作为需要整数的数组的索引当然不会给你任何东西。或者 undefined 准确地说。

有两种可能的方法可以满足您的需求：

onclick 处理程序

function hello(elem) {
  console.log("you clicked on '" + elem.innerHTML + "'")
}

<a href="#" onclick="hello(this)">click me</a>

我在这里使用 onclick 属性并将 this 上下文从 html 作为参数传递给我正在调用的函数。这很重要。
现在我可以通过引用收到的参数对被点击的元素进行操作。

出于某些原因或原因，我不建议使用此方法。但是既然你在问题中提到了 onclick 属性 ...

单击事件处理程序

这是我的首选解决方案

function hello(evt) {
  var elem = event.target || event.srcElement;
  console.log("you clicked on '" + elem.innerHTML + "'");
}

var link = document.getElementsByTagName("a")[0]
link.addEventListener("click", hello)

<a href="#">click me</a>

此处 html 中没有代码（或对代码的引用）。您改为从代码中检索 HTMLAnchorElement 并将侦听器附加到 click 事件。
现在只要单击 link 就会调用事件处理程序，默认情况下它将接收一个事件对象。您可以从该对象中提取 target（生成事件的对象）并访问其属性。

通过标签名称 [this] 获取元素？

get element by tag name [this]?

javascript

jquery

this

getelementsbytagname

onclick 处理程序

单击事件处理程序