logo标签列表

如何向HTML标签添加JavaScript函数？

javascripthtmlfunction
8

只是好奇，想知道。我能给某个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" );
1
当然，你可以将JavaScript函数添加到script标签中。你也可以操纵元素的原型，但我想这不是你要问的。或者是吗？代码看起来像你想要猴子补丁本地HTML元素..? - Teemu
@Teemu 这让我笑了.. 真的是非常好的答案（基于问题）:D - Maverick
@user2265229 不可以，因为你所做的是调用 $() 继承的函数。你需要编写自己的函数（类），并在其上调用函数。例如：Myselector('example') 将与 document.getElementById 具有相同的结果，然后在 Myselector 类中添加像 newAttribute、doSomething 等函数，然后在你的类 Myselector('example').newAttribute('foo'); 上调用它。 - Maverick
@Maverick 谢谢。那回答了我的问题。 - user2265229
1
如果您想要，我可以编写并给您一个示例，这样您就可以将其标记为已解决。但请编辑您的问题，添加您向我解释的内容。 - Maverick
显示剩余3条评论
7个回答
7

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一样将元素包装起来。

1
我认为这回答了我的问题。 - user2265229
4
这是不可能的，因为$（jQuery）和document是定义好的对象，它们有内置的函数。因为当你使用“。”时，你调用一个对象成员。例如Foo.bar() - 调用在对象Foo中定义的函数bar()。所以你需要创建你自己的类/选择器。这里有一个简单的例子： 

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>

1

这有点奇怪且不可取，但是它是可能的。

tag=document.querySelector('#myTag')
tag.test=tag=>{tag.innerText=tag.id};
tag.test(tag);
<html>
<body>
<div id="myTag"></div>
</body>
</html>

0
你应该将 HTML 元素传递给 JavaScript 函数。在函数定义中添加一个元素参数。
function divFunction(el){
     alert(el.innerHTML);
}

使用getElementById引用要用作参数的元素。

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

可以不使用任何库实现。

我用它来验证保存在另一个文件中的模态元素的内容。

这是myModal.html

<div id="myModal"... >
  some content
</div>

<script type="module">
  document.getElementById("myModal").validate = function() {
    console.log("validating");
    //some controls and DOM manipulations
    return true;
  };
</script>

在另一个文件中的mainPage（可能是.cshtml或.php页面），我包含了myModal.html。
我可以访问该函数，因为它是div的函数：
这是MainPage。：
<script type="module">
   let theModal = document.getElementById("myModal");
   let isValid = theModal.validate();
</script>

这样，函数就可以与 div “携带”并且在同一个文件中（不再需要复制和粘贴）

0

您可以向DOM元素添加事件。阅读此页面https://www.w3schools.com/js/js_htmldom_events.asp以获取更多信息，或查看下面的小例子。

function divFunction(){
     alert(document.getElementById("example").innerText);
}
<div id="example" onclick="divFunction()">Hello!</div>

0

你可以使用自定义元素 [1] [2] 来实现这个功能

  1. 创建自定义元素
  2. 在自定义元素类中添加方法
  3. 调用该方法即可
export class CustomElementInput extends HTMLElement {

  log(){
    alert("log")
  }

  // you can even overwrite methods like so
  remove(){
    alert("removing this node")
    super.remove()
  }
}

customElements.define("custom-element-input", CustomElementInput)

// somewhere else...
// in your HTML something like:
// <custom-element-input></custom-element-input> 

const el = document.querySelector("custom-element-input")
el.log() // creates alert()

:)

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接