8

カスタム タグを使用してアプリケーションのセクションを定義しているので、次のようなものがあります。

<mysection>

   <form>
       <input name="myfield">
   </form>

</mysection>

私は以下を使用しており、タグを取得できます（コンソールに出力され、すべてがグルーヴィーです）

var parent = document.getElementsByTagName('mysection');

私が抱えている問題は、名前で子フィールドを見つけることです:

var myfield = parent.getElementsByName("myfield");

...「myfield」という名前の入力を持つ可能性のある他の「セクション」を取り上げたくありません。

編集：

var parent = document.getElementsByTagName('mysection')[0];

提案され、セクションの内容をコンソールに返しますがgetElementsByName、エラーがスローされます。

Uncaught TypeError: Object #<NodeList> has no method 'getElementsByName'
4

4 に答える 4

10

を使用getElementsByTagName()しgetElementsByName()て NodeList を返す場合、次のようにリストの最初の要素を取得する必要があります。

var parent = document.getElementsByTagName('mysection')[0];
var myfield = parent.getElementsByName("myfield")[0];

編集

あなたは正しかっgetElementsByNameた、要素には無効です。あなたがやろうとしているように、その機能をローカライズする方法がわかりません。のみで動作するようですdocument。getElementsByNameローカライズされたスコープで使用する場合は、独自の実装を作成する必要がある場合があります。

2 回目の編集

いいことに、私はあなたのためにその実装を作成しました:D ここにすべての「栄光」があります。

Element.prototype.getElementsByName = function (arg) {
    var returnList = [];
    (function BuildReturn(startPoint) {
        for (var child in startPoint) {
            if (startPoint[child].nodeType != 1) continue; //not an element
            if (startPoint[child].getAttribute("name") == arg) returnList.push(startPoint[child]);
            if (startPoint[child].childNodes.length > 0) {
                BuildReturn(startPoint[child].childNodes);
            }
        }
    })(this.childNodes);
    return returnList;
};
var parent = document.getElementsByTagName('mysection')[0];
var myfield = parent.getElementsByName("myfield")[0];

小さな修正

その子ではなく要素を再帰に誤って渡していました。上記のコードは、現在渡された適切な引数で編集されています。作業フィドルを参照してください: http://jsfiddle.net/js6NP/5/

于 2012-12-16T21:02:56.057 に答える
9

私は実際にこれを処理するためのはるかに簡単な方法を見つけました:

document.querySelectorAll('mysection [name="myfield"]');

ここでは、指定されたセクション内のフィールドのみを変更する例を見ることができます: http://jsfiddle.net/fluidbyte/kph6H/

qSA は最新のブラウザーをサポートし、IE8 まで互換性があります。

于 2012-12-18T14:44:37.143 に答える
3

getElementsByNameDOM 要素参照では機能しません。代わりにquerySelectorまたはを使用してください。querySelectorAll例:

var parent  = document.getElementsByTagName('mysection')[0];
var myfield = parent.querySelector("[name='myfield']");
于 2020-02-14T02:22:01.323 に答える
1

代わりに ID を使用してください。

<mysection>
    <form>
         <input name="myfield" id="fieldName">
    </form>
</mysection>

var myfield = document.getElementById("fieldName");

IDはページ上で一意である必要があります。したがって、正しい要素にアクセスするのに問題はありません。

本当に名前/タグ名を使用する必要がgetElementsByTagNameあり、両方が常に a (要素が見つからない場合は空のもの)getElementsByNameを返す場合。array配列内の要素にアクセスするのと同じように、正しい要素にアクセスできます:
document.getElementsByTagName('mysection')[0];tagname を持つ最初の要素の場合mysection。

于 2012-12-16T21:03:06.030 に答える