在函数中获取元素

Question

我做了：

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

现在我想做：

 element.myFunction();

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

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

Answer 1

在JavaScript中，因为您要声明

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

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

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

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

myFunction(element)

这就是功能

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

Answer 2

如果要将函数与元素链接，则需要扩展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
}

通过这种方法， myFunction()方法内部的this将引用由以下元素选择的元素：

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

JS Fiddle演示，使用HTMLElement原型。

JS Fiddle演示，使用Node原型。

同样的，如果你想要做的就是将元素节点的功能，无需“明确”它作为参数传递：

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

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

JS小提琴演示。

如果您希望对由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小提琴演示。

Answer 3

您可以像这样将自定义函数添加到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'

显然，请谨慎使用该函数的名称，因为您可能不想覆盖任何现有的方法或属性。

Answer 4

是你想要的吗

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

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

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

    </script>

Answer 5

给定

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

看起来您想使用this关键字来具有功能

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

而且，与其设置属性，不如设置element.myFunction(); ，我建议使用Function.prototype.call或Function.prototype.apply ，即

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

Answer 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>

在函数中获取元素

问题描述

6 个解决方案

解决方案1
0

解决方案2
0 2013-10-06 13:54:34

解决方案3
0 已采纳 2013-10-06 13:59:07

解决方案4
0 2013-10-06 13:59:47

解决方案5
0 2013-10-06 14:04:36

解决方案6
-1 2013-10-06 13:46:24

在函数中获取元素

问题描述

6 个解决方案

解决方案1 0

解决方案2 0 2013-10-06 13:54:34

解决方案3 0 已采纳 2013-10-06 13:59:07

解决方案4 0 2013-10-06 13:59:47

解决方案5 0 2013-10-06 14:04:36

解决方案6 -1 2013-10-06 13:46:24

解决方案1
0

解决方案2
0 2013-10-06 13:54:34

解决方案3
0 已采纳 2013-10-06 13:59:07

解决方案4
0 2013-10-06 13:59:47

解决方案5
0 2013-10-06 14:04:36

解决方案6
-1 2013-10-06 13:46:24