获取函数内的元素答案

【问题标题】：Get element within function获取函数内的元素
【发布时间】：2013-10-06 13:41:35
【问题描述】：

我做到了：

var element = document.getElementById('myelement');

现在我想做：

 element.myFunction();

但我不知道如何在函数中获取元素。我该怎么做？

function myFunction() {
// Get element here?
}

【问题讨论】：

你需要使用参数。
你为什么要“做”element.myFunction()？你想达到什么目的？你的问题没有多大意义。
@Pointy 我认为它看起来比 myFunction(element) 更干净，而且我看到它与其他 javascript 函数一起使用。
@user2252246 这两种结构的含义不同。
@Pointy 我正在使用该函数来更改元素，并将其作为参数传递并不清楚。

标签： javascript function element

【解决方案1】：

您可以像这样向HTMLElement 对象的原型添加自定义函数：

HTMLElement.prototype.customFunc = function(){
    // within this function, 'this' will refer 
    // to the element that it was called on
};

这意味着任何元素都可以作为方法访问customFunc 函数。例如：

HTMLElement.prototype.customFunc = function(){
    console.log(this.id);
};

// now assuming your HTML contains #myElement and #anotherElem:
document.getElementById('myElement').customFunc(); // displays 'myElement'
document.getElementById('anotherElem').customFunc(); // displays 'anotherElem'

显然，请注意函数的命名，因为您可能不想覆盖任何预先存在的方法或属性。

【讨论】：

谢谢！我使用了这个解决方案。我只创建了自己的名为“Element”的函数，而不是使用 HTMLElement。这样我就不必小心了，我可以完全控制。（使用了一点 MDN：developer.mozilla.org/en-US/docs/Web/JavaScript/…）

【解决方案2】：

在 javascript 中，因为您要声明

var element = document.getElementById('myelement');

您已经在全局范围内拥有该元素，因此您可以在函数中简单地调用它

function myFunction() {
  // Do something with your element
}

编辑：如果您是在另一个函数中声明您的元素，或者如果您想对不同的元素使用相同的函数，则必须使用参数。这是电话：

myFunction(element)

这就是函数

function myFunction(element) {
  // Do something with your element
}

【讨论】：

该函数的想法是我可以对不同的元素再次使用相同的代码。使用它作为参数并不能清楚地表明我编辑/更改了元素。
是的，请查看我的回复的编辑。如果将元素作为函数本身的参数传递，则可以使用元素
我这样做了，但感觉好像并不清楚我编辑/更改了元素。它看起来像坏/不清楚的代码。虽然 element.myFunction() 清楚地显示了我在做什么。又搜索了一下，发现需要添加一个方法，但是不确定是否可以。

【解决方案3】：

这是你想要的

    <input type = "button" value = "Next" id = "btnNext" />

    <script>
    HTMLElement.prototype.myFunction = function()
    {
        alert(this.id);
    }

    var elem = document.getElementById("btnNext");
    elem.myFunction();

    </script>

【讨论】：

这就是我想要的！我改变了一点（见上面的答案）。谢谢！

【解决方案4】：

给定

var element = document.getElementById('myelement');

看起来你想要一个使用this关键字的函数

function myFunction() {
    console.log(this); // logs `this` (which will be `element`)
}

我建议使用Function.prototype.call 或Function.prototype.apply，而不是设置属性以便element.myFunction();，即

myFunction.call(element); // element gets logged

【讨论】：

【解决方案5】：

如果你想用元素链接你的函数，那么你需要扩展 HTMLElement 或 Node 对象的原型：

HTMLElement.prototype.myFunction = function (parameters) {
    var elementToActOn = this;
    elementToActOn.style.color = 'green';
    return this; // for further chaining
}

或者：

Node.prototype.myFunction = function (parameters) {
    var elementToActOn = this;
    elementToActOn.style.color = 'green';
    return this; // for further chaining
}

使用这种方法this，在myFunction() 方法中，将引用由以下对象选择的元素：

document.getElementById('elementID').myFunction();

JS Fiddle demo，使用HTMLElement 原型。

JS Fiddle demo，使用 Node 原型。

同样，如果您只想将元素节点传递给函数而不“显式”地将其作为参数传递：

function myFunction () {
    this.style.color = 'red';
}

document.getElementById('elementID').addEventListener('click', myFunction);

JS Fiddle demo.

如果您希望对getElementsByTagName()、getElementsByClassName() 或querySelectorAll()（以及其他）选择的多个元素进行操作，那么您需要扩展NodeList 原型，例如：

NodeList.prototype.myFunction = function (parameters) {
    var elements = this;
    [].forEach.call(elements, function(a){
        a.style.color = 'green';
    });
    return this; // for chaining
}

/* calling the function, with a simple demonstration of why you might want to
   chain, by returning 'this': */
var len = document.getElementsByClassName('elementClass').myFunction().length;
console.log(len);

JS Fiddle demo.

【讨论】：

【解决方案6】：

你应该试试这个，我将举一个带有 onclick 的 div 的例子

<script>

function myfunc(){
getElementById('sample').whatever function u want
}
</script>

你可以在体内使用 -

<body>
<div id="sample" onclick="myfunc()">The function will happen onclicking the div</div>
</body>

【讨论】：