添加js方法

Question

我有一个名为 getID 的 js 函数，它基本上是返回 document.getElementById(id)

我想创建另一个函数 getTag，它将返回 getElementsByTagName。

我似乎无法管理的部分是我希望能够像这样调用它们：

getID('myid').getTag('input') =>;所以这将返回 id 为 myid 的元素内的所有输入元素，

谢谢！

ps：如果 getTag 是由它自己调用的，那么它也必须工作，但它只会返回 document.getElementsByTagName

更新：

感谢所有回复！根据你的建议，我想出了这个，这对我来说很有效：

function getEl(){
    return new getElement();
}

function getElement() {
    var scope = document;

    this.by = function(data){
        if (data.id)    scope = scope.getElementById(data.id);
        if (data.tag)   scope = scope.getElementsByTagName(data.tag);

        return scope;
    }
}

我这样使用它：

var inputs = getEl().by({id:"msg", tag:"input"});

Answer 1

实现这一点的方法是创建对象原型。为此，您需要以下代码：

Object.prototype.getTag = function(tagName) {
    return this.getElementsByTagName(tagName);
}

但是，这将展开所有对象，因为您真正需要原型化的 HTMLElement 很难一致地完成。所有专家都同意您应该永远不要扩展对象原型 。更好的解决方案是创建一个从另一个参数获取标签名称的函数：

function getTag(tagName, element) {
    return (element || document).getElementsByTagName(tagName);
}

// Usage
var oneTag = getTag('input', getID('myid')); // All inputs tags from within the myid element
var twoTag = getTag('input'); // All inputs on the page

Answer 2

这要求 getID('myid')（HTML 元素）返回的任何内容都公开名为 getTag() 的方法。事实并非如此。浏览器实现 DOM 规范并公开其中定义的方法。

虽然从技术上讲您可以使用自己的方法增强本机对象，但最好不要这样做。

您尝试做的事情已经在 jQuery 等 JS 库中得到了相当好的解决，我建议您在花时间模仿它们可以做什么之前先看看其中一个。例如，您的代码行将变为：

$("#myid input")

在 jQuery 中。 jQuery 恰好是使用最广泛的 JS 库，还有很多其他库。

Answer 3

基本上，您将创建一个包含每个方法的单个对象，并存储本机函数返回的所有数据。它看起来像这样（未经测试，但您明白了）：

var MyLib = {
    getID: function(id) {
        var element = document.getElementById(id);
        this.length = 1;
        this[0] = element;
        return this;
    },
    getTag: function(tag) {
        var elements;
        if (this.length) {
            for (var i = 0; i < this.length; i++) {
                var byTag = this[i].getElementsByTagName(tag);
                for (var j = 0; j < byTag.length; j++) {
                    elements.push(byTag[j]);
                }
            }
        }
        for (var i = 0; i < elements.length; i++) {
            this[i] = elements[i];
        }
        this.length = elements.length;
        return this;
    }
};

然后您可以像这样使用它：

var elements = MyLib.getID('myid').getTag('input');
for (var i = 0; i < elements.length; i++)
    console.log(elements[i]); // Do something

这种方法的唯一真正问题（除了它非常棘手且难以调试）是您必须处理每个方法的结果就像一个数组，即使只有一个结果。例如，要通过 ID 获取元素，您必须执行 MyLib.getID('myid')[0]。

但请注意，之前已经这样做过。我建议您看看 jQuery，看看他们是如何实现这一点的。您的代码可以简化为：

$("#myid input")

jQuery 比您想象的更轻量级，将其包含在您的页面上不会减慢速度。使用它您不会有任何损失。

Answer 4

只需使用 DOMElement.prototype 属性即可。

你会得到类似这样的结果：

function getTag(tagName) {
    return document.getElementsByTagName(tagName);
}
DOMElement.prototype.getTag = function(tagName) {
    return this.getElementsByTagName(tagName);
}

但是你应该使用 jQuery。

编辑：我的解决方案不适用于 IE，抱歉！

Answer 5

您可以按如下方式定义它：

var Result = function(el)
{
  this.Element = el;
};

Result.prototype.getTag = function(tagName)
{
  return this.Element.getElementsByTagName(tagName);
};

var getTag = function(tagName)
{
  return document.getElementsByTagName(tagName);
};

var getID = function(id)
{
  var el = document.getElementById(id);
  return new Result(el);
};

调用 getID 将返回 Result 的实例，然后您可以使用其 Element 属性来访问返回 HTML 元素。 Result 对象有一个名为 getTag 的方法，它将返回父结果中与该标记匹配的所有子元素。然后，我们还定义一个单独的 getTag 方法，该方法调用文档元素的 getElementsByTagName。

尽管如此...JQuery 更容易... $("#myId input");

Answer 6

除非这是一个关于如何在 JavaScript 中链接方法的学术练习（似乎不是，你似乎只是在学习 JavaScript），否则你所要做的就是：

var elements = document.getElementById("someIdName");
var elementsByTag = elements.getElementsByTagName("someTagName");
for (i=0; i< elementsByTag.length; i++) {
    alert('found an element');
}

如果你想定义一个可重用的函数，你所拥有的一切要做的是：

function myFunction(idName,tagName) {
    var elements = document.getElementById(idName);
    var elementsByTag = elements.getElementsByTagName(tagName);
    for (i=0; i< elementsByTag.length; i++) {
        alert('found a ' + tagName + ' element within element of id ' + idName);
    }
}

确实，如果这是您页面上需要的所有 JavaScript 功能，那么就不需要导入 jQuery。