是可以链接的document.getElementById方法吗？

Question

如果我有这个模块的模式：

var MODULE = (function(window){ 
    var myPublicStuff = {}; 

    myPublicStuff.myPublicMethod = function(e){ 
     return e; 
    }; 
    return myPublicStuff; 

})(window); //edit: forgot to put I have this 

这工作：（编辑为清楚起见）

v = document.getElementById('some-element'); //works as expected 
MODULE.myPublicMethod(v); //works. 

但是，这并不工作，

MODULE.myPublicMethod().document.getElementById('some-element'); 

或

document.getElementById('some-element').MODULE.myPublicMethod(). 

我认为如果在狱中的前一个成员返回一个值，你可以链接到下一个链接？这在这里不起作用，但我不知道为什么。

编辑：感谢所有的答案。我想要做的就是获取元素，并通过链接将该方法打印回。就这样。如果我把'btnPrint'放在'btnPrint'中，我想让它给我<button type="button" id="btnPrint" class="btn">...</button>如果我在控制台上得到了ElementById，那么如果我首先为模块使用一个变量（这是有道理的），那就是我所得到的。我只想做同样的事情用链式方法。

编辑：为了完整，这是特拉维斯上的jsfiddle把什么（感谢）：

<button type="button" id="btnPrint" class="btn">...</button> 

Element.prototype.myPublicMethod = function(){ 
//in the prototype scheme that JavaScript uses, 
//the current instance of the Element is *this*, 
//so returning this will return the current Element 
//that we started with. 
return this; 

} 

console.log(document.getElementById("btnPrint").myPublicMethod()); 

我同意。这看起来很糟糕，除非绝对必要

Answer 1

Is document.getElementById a method that can be chained?

是。它返回一个元素（如果没有匹配，则返回undefined）。该元素公开了一组通用函数，并且如果元素是特定类型（例如表单），那么它也可能具有一组特定的函数。

在https://developer.mozilla.org/en-US/docs/Web/API/Element

I want to do this:

v = document.getElementById('some-element'); //works as expected 
MODULE.myPublicMethod(v); 

这里了解更多关于通用元件类型，v很简单，对不对？它只是获得id="some-element"的元素。好的，从那里你将它传递给myPublicMethod(v)。当你这样做时，你所做的只是调用一个函数，该函数返回的值与传入的值相同。除此之外，没有任何分配或存储发生在上面显示的代码中。

你可以在这里做什么，如果你想利用链接设置的，将是再从返回的值访问v元素是这样的：

v = document.getElementById('some-element'); 
var vId = MODULE.myPublicMethod(v).id; 
console.log(vId);// this will log "some-element" to the console 

But this does not work,

MODULE.myPublicMethod().document.getElementById('some-element'); 

所以上面我解释说你正在“调用一个返回相同值的函数”，请记住myPublicMethod里面只有return e;？那么这意味着你使用undefined作为结果，因为在使用这行代码时没有任何东西被传入。换句话说，上面的代码可以检查为undefined.document.getElementById('some-element')，这有希望显然是有问题的。

if I put in 'btnPrint' I want it to give me <button type="button" id="btnPrint" class="btn">...</button>

例如，你的代码编写会做到这一点这样：

var MODULE = (function(window){ 
 
    var myPublicStuff = {}; 
 

 
    myPublicStuff.myPublicMethod = function(e){ 
 
     return e; 
 
    }; 
 
    return myPublicStuff; 
 
})(window); 
 

 
console.log(MODULE.myPublicMethod(document.getElementById('btnPrint')));

<button type="button" id="btnPrint" class="btn">...</button>

Answer 2

为了避免v变量，你需要使用

MODULE.myPublicMethod(document.getElementById('some-element')); 

document是一个全球性的属性（在window对象的），你需要已经返回，从myPublicMethod()到链断了。由于它是身份的功能，你甚至可以做这样的事情

MODULE.myPublicMethod(document).getElementById('some-element'); 
MODULE.myPublicMethod(window).document.getElementById('some-‌​element'); 

Answer 3

你可以从你的函数返回document如果没有参数传递：

var MODULE = (function(window){ 
    var myPublicStuff = {}; 

    myPublicStuff.myPublicMethod = function(e){ 
     return e || document; 
    }; 
    return myPublicStuff; 

})(); 

var text = MODULE.myPublicMethod().getElementById('element').innerHTML; 

console.log(text); 

JSBin