JSメソッド

Question

を追加し、私は基本的にreturn document.getElementById(id)

私は希望return getElementsByTagName別の関数、のgetTagを作りたいですのgetIdという名前のJS機能を持っています。

私が管理するように見えることができない部分は、私は、このようにそれらを呼び出すことができるようにしたいということです。

getID('myid').getTag('input') =>これはidを持つ要素内のすべての入力要素を返しますので、myid

ありがとうございます！

PS：それはそれ自身で呼ばれていた場合のgetTagも仕事をしなければならないだろうが、それはちょうどreturn document.getElementsByTagName

更新します：答えてきたことすべてに

感謝を！これは何がgetID('myid')（HTML要素）によって返されることを必要とするであろう

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

Answer 1

は基本的に、あなたはあなたの各メソッドが含まれており、また、ネイティブ関数によって返されたすべてのデータを格納する単一のオブジェクトを作成するつもりです。それは（テストしていませんが、あなたのアイデアを得る）のようになります。

あなたは、このようにそれを使用することができます

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のは、あなたが考えているよりも軽量であり、そして、あなたのページにそれを含めて、それをスローダウンしません。あなたはそれを使って失うものは何もありません。

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

：

Answer 2

：

 
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; 
    } 
} 

、私はこのようにそれを使用する：私は私のためにうまく機能しているこの、思い付いたご提案を使用してメソッドgetTag()を公開します。これはそうではありません。ブラウザはDOM仕様を実装し、そこに定義されているメソッドを公開します。

技術的には、はですが、独自の方法でネイティブオブジェクトを強化することはできません。

あなたがしようとしていることは、jQueryのようなJSライブラリではうまく解決されていますが、できることを模倣する時間を投資する前にそれらの1つを見ることをお勧めします。たとえば、コード行は、

$("#myid input") 

in jQueryになります。 jQueryはJSライブラリの中で最も広く使われていますが、他にもたくさんあります。

Answer 3

これを行う方法は、Objectのプロトタイプを作成することです。あなたは本当に、のHTMLElementのプロトタイプを作成するために必要なもの、一貫して行うことは非常に困難であるため、

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

しかし、これはすべてオブジェクトを拡大していきます。それを行うには、次のコードが必要になります。すべての専門家はあなたが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 4

だけDOMElement.prototypeプロパティを使用します。より良い解決策は別の引数からのタグ名を取得する関数を作成することです。

あなたはこのような何か買ってあげる：

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

をしかし、あなたは、このためにjQueryを使用する必要があります。

EDIT：私の解決策は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のインスタンスを返します。これにより、あなたはその要素が返されたHTMLにアクセスするためにそのElementプロパティを使用することができます。 Resultオブジェクトには、getTagというメソッドがあります。このメソッドは、そのタグに一致するすべての子要素を親結果から返します。次に、文書要素のgetElementsByTagNameを呼び出す別個のgetTagメソッドを定義します。

はまだしかし... JQueryのは、そんなに簡単に... $("#myId input");

Answer 6

これはJavaScriptでチェーン方法にどのように学術的な運動でなければ（していないようですが、あなたは、単にJavaScriptを学習しているようだが）、あなたがしなければならないすべてはこれですあなたが再利用可能な関数を定義したい場合は、あなたがしなければならないすべてはこれです：

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をインポートする必要がないことは事実です。