Question

我正在尝试编写一个greasemonkey脚本，它在按钮上添加一个onClick侦听器（在下面定义）并执行一些特定的操作。我试图使用document.getElementsByTagName获取此按钮obj，但它返回null。我尝试迭代document.anchors并返回null。如何获取此元素对象并向其添加onclick事件。

<a class="editicon" aria-label="Edit this field" role="button" href="#"><img src="https://url-to/images/edit.png?3423434"></a>

已经有一个onclick添加到这个对象，我不想替换它。

更新

添加我的Greasemonkey脚本

// ==UserScript==
// @name        cr
// @namespace   my_namespace
// @version     1
// @grant       none
// ==/UserScript==

(function(){
  console.log('test ...')
  var editicon = document.getElementsByTagName('editicon');
  console.log(editicon);
})();

Answer 1

首先，您的问题涉及一个按钮，但您的代码不包含一个按钮。不使用<a>元素，然后使用href="#"禁用其原生导航功能，使用实际的<button>元素在语义上会更好。

其次，您不应该使用内联HTML事件属性（onclick，onmouseover等）：

创建＆＃34;意大利面条代码＆＃34;不会扩展，难以阅读，导致重复，并且不遵循 "separation of concerns" 方法。
围绕您的事件属性值创建全局匿名包装函数，以更改代码的this绑定。
请勿使用 W3C Event Standard of using the addEventListener() API。

现在，有 several ways to get a reference to a DOM element ，有些比其他更好，具体取决于您的HTML结构以及您尝试获取的元素数量。 document.getElementsByTagName() 会返回找到的所有元素的 "node list" 。即使没有找到任何元素，您仍然可以将此列表作为返回的对象（当没有找到元素时，列表将为空）。要从结果中提取特定元素，您需要将索引传递到该列表，即 "array-like" object 。此外，getElementsByTagName会返回＆＃34;直播＆＃34;节点列表，意味着它将在每次交互时重新扫描文档，以确保提供最新的列表。虽然这在某些情况下可能是有益的，但它会带来性能成本。

例如，这将提取文档中的第一个a元素：

var myElement = document.getElementsByTagName("a")[0];

但是，既然你只期望一个元素，那就太过分了。要获得一个元素，并且该元素上有id属性，您可以/应该使用： document.getElementById("theIdHere"); ，因为getElementById()通常是最快的方式在HTML结构中查找单个元素。

此外，还有其他方法可以获取一个或多个元素，例如 querySelector() 和 querySelectorAll() ，它们允许您使用CSS选择器JavaScript查询中的语法。

有关您的代码，请参阅以下代码段：

＆＃13;

// Get a reference to the first <button> element in the document
var b = document.querySelector("button");

// Or, if the element has an id, the best solution would be:
var b = document.getElementById("btn");

// Add a click event handler to the element
b.addEventListener("click", handleClick);

// Function that will be called when anchor is clicked
function handleClick(){
  alert("You clicked me!");
}

＆＃13;

button { background-color:rgba(0,0,0,0); }
img { width: 50px; }

＆＃13;

<button class="editicon" aria-label="Edit this field" role="button"  id="btn"><img src="https://s-media-cache-ak0.pinimg.com/736x/5a/42/c6/5a42c6224e3ce7fa9837965270bfcdd9--smiley-face-images-smiley-faces.jpg"></button>

＆＃13;

在课堂上添加onclick事件

1 个答案: