Question

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

我想创建另一个函数getTag return getElementsByTagName。

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

getID('myid').getTag('input') =＆gt;所以这将返回元素内{id 1 {}}

的所有输入元素

谢谢！

ps：getTag也必须工作，如果它由它自己调用，但它只会myid

更新：

感谢所有回复！根据你的建议，我提出了这个建议，这对我很有用：

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。为此，您需要以下代码：

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

然而，这将扩展所有对象，因为您真正需要原型的一个HTMLElement很难一致地完成。所有专家都同意你应该never expand the Object prototype。一个更好的解决方案是创建一个从另一个参数获取标记名称的函数：

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。

添加一个js方法

6 个答案: