如何将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 那样包装元素。

Answer 2

这是不可能的，因为 $ (jQuery) 和 document 是在内置函数中定义的对象。

因为当你使用时.你调用的是一个对象成员。

Foo.bar()- 调用内部bar()定义的函数和 object 。Foo

所以你必须创建你的类/选择器。

这是一个简单的例子：

class select {
	constructor(selector) {
  	this._element = document.getElementById(selector);
  }
  
  // Functions
  
  colorMe() {
  	this._element.style.backgroundColor = "red";
  }

  moveMe(x) {
    this._element.style.marginTop = x;
  }
}

var elem = new select("example");

elem.colorMe();
elem.moveMe("50px");

<div id="example">
  This is an example
</div>