добавление метода js

Question

У меня есть функция js с именем getID, которая в основном return document.getElementById(id)

Я хочу создать другую функцию, getTag, которая будет return getElementsByTagName.

Часть, которую я могу 'Кажется, мне кажется, что я хочу иметь возможность вызывать их так:

getID('myid').getTag('input') =>, так что это вернет все входные элементы внутри элемента с идентификатором myid

Спасибо!

ps: getTag также должен работать, если он вызывается сам по себе, но тогда он будет просто return 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. Для этого вам понадобится следующий фрагмент кода:

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 и предоставляют методы, определенные там.

Хотя вы технически можете улучшать нативные объекты своими собственными методами, лучше этого не делать.

То, что вы пытаетесь сделать, довольно хорошо решено в библиотеках JSКак и в случае с jQuery, я рекомендую вам взглянуть на одну из них, прежде чем тратить время на то, чтобы подражать тому, что они могут сделать.Например, ваша строка кода будет выглядеть так:

$("#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

Единственная реальная проблема с этим подходом(кроме того, что он очень сложен и сложен в отладке) заключается в том, что вы должны обрабатывать результат каждого метода как массив, даже если есть только один результат.Например, чтобы получить элемент по идентификатору, вам нужно будет сделать MyLib.getID('myid')[0].

Однако учтите, что это уже было сделано до .Я рекомендую вам взглянуть на jQuery , хотя бы для того, чтобы увидеть, как они этого добились.Ваш код может быть упрощен до следующего:

$("#myid input")

jQuery более легкий, чем вы думаете, и включение его на страницу не замедлит его.Вам нечего терять, используя его.

Answer 4

Если это не академическое упражнение о том, как объединять методы в 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.

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

Просто используйте свойство DOMElement.prototype.

Вы получите что-то вроде этого:

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

Но вы должны использовать для этого jQuery.Мое решение не работает в IE, извините!