
No.2ベストアンサー
- 回答日時:
かいせつですか…。
コードをかくより めんどうだなぁ…--
Array.map は、ある配列をもとに新たな配列を得るために使われます。
Array.filter は、ある配列の中で、条件を満たしたものを得るために使われます。
--
nodeList = document.getElementsByTagName ('xxx');
nodeList = document.getElementById ('xxx').childNodes;
nodeList = document.form[0].elements;
このように集められるノードリストは、一見すると配列を返しているように思えますが、そうではありません。
配列ではないので Array.map などは使えません。
nodeList.forEach (function (e) { alert (e.tagName); });//このコードは走りません。
--
以後、理解しやすいように勝手に解釈します。map 関数は、内部にある。その関数はきっと
Array.map = map;
のようにして、Array に関連付けられている。普通には呼び出せない。その関数を呼び出す方法が、
Array.prototype.map.call (nodeList, cbFunc);
--
getSison 関数は、ルートノードを引数に渡すと、まずその子ノードリストを順に調べ、それ以下のノードリストを配列として返します。
ary = [ [3,4,5], [6,7], [8], [9,10] ,........ ];
戻り値はきっと上のようになるかもしれない。(子ノードの数で配列の大きさが変化する)
この配列を一気に一つの配列にする方法は、ないものだろうか?
配列をつなげる関数は、concat 。
var ary = [0,1,2].concat ([3,4,5], [6,7], [8], [9,10]); // ary = [0,1,2,3,4,5,6,7,8,9]
map と同じように concat 関数そのものを呼び出すには、
var ary = Array.prototype.concat.call ([0,1,2], [3,4,5], [6,7], [8], [9,10]);
しかし、子ノードの数で concat に渡す引数が変化してしまう。
上の式で言えば、getSison 関数で、root ノードの子ノードは、[[3,4,5], [6,7], [8], [9,10]]のような形で配列になって返される(再帰処理で)。
var child = [[3,4,5], [6,7], [8], [9,10]];
var ary = [root];
var rst = Array.prototype.concat.apply (ary, child);
call ではなく、 apply を使って呼び出すと child の配列の数が何個でも concat 関数の引数として渡される。
つまり、引数として渡された配列は、すべて1つになる。
--
>> var sison = getSison (document.getElementById ('hoge')).filter (isTarget);
の、
getSison (document.getElementById ('hoge'))
は、hoge をルートとする子孫ノードを配列として返す。
[hoge, node0, node1, .....]
このリストから、目的のノードを Array.filter で選別する。
--
で、かいせつに なっているだろうか?
回答ありがとうございました。
>かいせつですか…。コードをかくより めんどうだなぁ…
ごめんなさい……
>で、かいせつに なっているだろうか?
詳細ありがとうございました。ものすごく(解説に)なっています。
大変、勉強になりましたー!
No.1
- 回答日時:
またも、jQuery なんて つかわなくても あつめられます。
しそんノードをあつめて、ひつようなノードだけを はいれつにして かえします。
「削除」のほうは、ひとまかせにします。
Array.map と Array.filter が ひつようです。
<!DOCTYPE html>
<title></title>
<meta charset="UTF-8">
<div id="hoge">
<p>
1<em>2</em>3<br>
4
</p>
<p>
5<br>
6
</p>
</div>
<script>
function isTarget (n) {
return ((3 === n.nodeType) || 'BR' === n.tagName);
}
function getSison (n) {
return n.hasChildNodes ()
? Array.prototype.concat.apply ([n],
Array.prototype.map.call (n.childNodes, getSison))
: n;
}
var sison = getSison (document.getElementById ('hoge')).filter (isTarget);
</script>
この回答への補足
かいとうありがとうございました。
だけど、かいているないようがむずかしいので、かいせつしていただくことはかのうでしょうか?
初めの、
filter (isTarget);
では、「テキストかbrタグだったら、新しい配列を作る」、ということなのでしょうか?
getSison関数に渡された引数に子ノードがあったら、
何をしているのでしょうか?
Array.prototype.concat.apply ([n],???
再び、元の関数を呼んでいるので、
Array.prototype.map.call (n.childNodes, getSison))
再帰処理とかなのでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
同じIDで定義した要素の配列を...
-
助けてください‼︎ javascriptで...
-
時計を複数表示する場合
-
jspからjavascriptの変数引継ぎ
-
Perlの配列をJavaScriptに渡せ...
-
Ascition Script2
-
関数でy=g(x)のgとは何の略です...
-
GASでundefinedエラーが出ます
-
functionから別のfunctionを実...
-
C#OpenCv V4にのエラーに関する...
-
Matlabで自作関数をオーバーロード
-
javascriptで複数キーワード検...
-
onclickとonkeypressの重複
-
コールバック関数(?)をループし...
-
クリックすると上に開くアコー...
-
JAVAスクリプトで指定時間以降...
-
cgiでポーリングして取得したデ...
-
onchangeイベントを使ってspan...
-
class指定したHTML要素の背景色...
-
別のSubで宣言されている変数を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
C#テキストボックスの文字を配...
-
jspからjavascriptの変数引継ぎ
-
同じIDで定義した要素の配列を...
-
二次元配列を使って順位をだす...
-
Ascition Script2
-
配列番号を自動的に一括して入...
-
テトリス / 配列をブロックに...
-
空の配列に2次元配列の追加
-
undefinedを表示させない方法は...
-
javascriptで行を抽出したいです。
-
textareaに入力されたデータを...
-
Perlの配列をJavaScriptに渡せ...
-
助けてください‼︎ javascriptで...
-
(google apps script)スプレ...
-
javascript 変数名の連結をしたい
-
Javascript 配列の使い方について
-
JSON形式で取得した8桁の数字を...
-
行列データ?の文字列操作につ...
-
雪を降らせるみたいな、ゆらゆ...
-
配列データの利用方法
おすすめ情報