javascript - 如何将javascript函数添加到html标签？

Question

只是好奇，想知道。我可以向某些 html 标记添加 javascript 函数吗？例如，如果我有这样的 div 标签:

<div id="example">Hello!</div>

并希望添加提醒每个 div 内部值的功能，例如:

function divFunction(){
     alert(/*some div content*/);
}

所以，它可以这样执行:

<div id="example">Hello!</div>
<script>
     document.getElementById("example").divFunction();
</script>

我的问题的重点是为某个标签添加一些新的属性或功能。就像如果有:

document.getElementById("example").innerHTML;

是否可以:

document.getElementById("example").newAttribute;

是什么让我感到好奇，因为 jQuery 可以做这样的事情:

$( "#result" ).load( "ajax/test.html" );

Answer 1

DOM 元素就像具有某些属性的 javascript 对象，因此您可以添加一个新属性，在您的例子中是一个新函数。

这是一个例子:

var element = document.querySelector('#example');

function bindToNode(node, name, fn) {
  node[name] = fn.bind(node);
}

bindToNode(element, 'logValue', function() {
  console.log(this.textContent);
});

element.logValue();

<div id="example">
  Hello!
</div>

但是你不应该乱用 DOM 元素，更好的方法是像 jQuery 那样包装元素。