Array.prototype.forEach.call()とは何でしょうか?
arrayは配列のことですよね。
prototypeについては
https://developer.mozilla.org/ja/JavaScript/Refe …
に説明があり、
forEachについては
https://developer.mozilla.org/ja/JavaScript/Refe …
に説明があり、
callについては
http://www.scollabo.com/banban/jsindex/sample/sa …
に説明がありましたが、何が何だかさっぱりです。
また、Array.prototype.forEach.call()の場合は
「array」+「prototype」+「forEach」+「call」
それぞれの説明を混ぜたものということになるのでしょうか。
<dd>を押すと”書き変えました”というテキストに書き変えるコードを書いてみました。
理解できてないので動きません。
アドバイスを頂けないでしょうか。
<html lang="ja">
<head>
<script type="text/javascript">
function click() {
var element = node.ownerDocument;
var qsA = element.querySelectorAll ('#sample > dd');
Array.prototype.forEach.call (qsA, function () {qsA.nodeText = "書き変えました"});
}
</script>
</head>
<body>
<dl id="sample">
<dt>サンプル1</dt>
<dd onclick="click()">11111</dd>
<dt>サンプル2</dt>
<dd onclick="click()">22222</dd>
</dl>
</body>
</html>
No.2ベストアンサー
- 回答日時:
> <dd onclick="click()">の部分を<dd onclick="click(event)">に変更し
> 実行しましたが書き換えられませんでした。
あ~、のうないいんたーぷりんたのせいのうがわるくて、もうしわけない。
function click () { ~
かんすうめいがわるい。Alick とか Blick とか Click とかてきとうにかえてください。
いろいろとこむずかしい、しらべたせつめいをならべられても、よくわかりません!(まじ。)
> (3)~
> というようにできますか?
つくってうごかしてみればいいのでは?
そうやってながれをりかいするほうがよいとおもいます。
(わたしはいまもそうですが、そういうときはいまだに alert をつかいまくります。)
document は、ぐろーばるですが、 いべんとがおきた「もとの document」 と、おなじとはかぎらない。
No.1
- 回答日時:
それって、わたしがかいたから?
・・・。
かんすうに、とくていのパラメータをわたすには、ひきすうとしてわたすほうほうと、
function hoge (arg0, arg1, arg2) {
alert (arg0);
alert (arg1);
alert (arg2);
}
hoge (1,2,3);
this をりようするほうほうがあります。
function hoge () {
alert (this.arg0);
alert (this.arg1);
alert (this.arg2);
}
var p = { arg0: 1, arg1: 2, arg2: 3 };
hoge.call (p);
forEach をりようするならば、
function hoge (n) {
alert (n);
}
var ary = [1,2,3];
ary.forEach (hoge);
うえの ary は、はいれつ (Array) ですが、
var ary2 = document.querySelectorAll ('#sample > dd');
この ary2 は、はいれつのようで はいれつではなく、
「(いきていない)のーどりすと」です
はいれつではないので、forEach をつかえないのです。
ではどうするか?
ちょっとごかいがあるかもしれませんが、おそれずにたとえると
Array オブジェクトに prototype でつなげてある forEach かんすうそのものを
よびだしてつかえばよいのです。
よびだすには、ary2 を、this にしてつかうので
Array.prototype.forEach.call (ary2, hoge);
こうすることで、ary2 にある ddようそ1つ1つにたいして、かんすう hoge の
だい1ひきすうとしてよびだし、じっこうすることができるようになるのです。
もしこの hoge に、さらなるあたいをぱらめーたとしてわたしたいばあいは、
それにも this をつかいます
var p = { arg0: 1, arg1: 2, arg2: 3 };
Array.prototype.forEach.call (ary2, hoge, p);
--
いべんとしょりのだい1ひきすうは、event ときまっているそうです
<dd onclick="click()">11111</dd>
ではなく、
<dd onclick="click(event)">11111</dd>
と、しましょうか。
function click (event) {
var dd = event.target; // dd = element
dd.textContent = '書き変えました';
}
--
もし、dd ようそすべてをかきかえたいなら
function click (event) {
var dd = event.target;
var doc = dd.ownerDocument;
var dds = doc.querySelectorAll ('#sample > dd');
Array.prototype.forEach.call (dds, function (e) {
e.textContent = '書き変えました';
});
}
function click (event) {
var dd = event.target; //(1)
var doc = dd.ownerDocument; //(2)
var dds = doc.querySelectorAll ('#sample > dd');
Array.prototype.forEach.call (dds, function (e) { //(3)
e.textContent = '書き変えました';
});
}
<dd onclick="click()">の部分を<dd onclick="click(event)">に変更し
実行しましたが書き換えられませんでした。
(1)var dd = event.target;
調べると「targetプロパティはイベントが発生したWindowオブジェクト、Documentオブジェクト、HTMLElementオブジェクトへの参照」。つまり、自分が作成したオブジェクト以外に標準でオブジェクトが用意されていて、そのプログラムを使って何かの処理を自動的にしてくれる。targetプロパティを使わない場合に標準のオブジェクトを参照するには、document.getElementById("dd")ですか???
(2)「ownerDocument プロパティは、ノードが含まれるトップレベルのドキュメントオブジェクトを返す」ということのようです。
ドキュメントオブジェクトは、ページに関するあらゆる情報がオブジェクトとしてまとめられていて、それを利用することができる。
ノードは、DOM側で見たときの全ての要素の呼び方。
html側で見たときの<p>はPタグと呼び、DOM側ではそれを要素ノードと呼ぶ。
ノードが含まれるトップレベルのドキュメントオブジェクトとは…<html>タグのこと。
もしdocument.getElementById("dd")を使った場合はownerDocumentは不要。
つまり、ownerDocumentは簡単にいろいろ使える便利なものということ。
ですか???
(3) Array.prototype.forEach.callに直接関数を書かずに、
var func = function (e) {e.textContent = '書き変えました';};
Array.prototype.forEach.call (dds, func);
というようにできますか?
また、
「もしこの hoge に、さらなるあたいをぱらめーたとしてわたしたいばあいは、
それにも this をつかいます」という部分ですが、
Array.prototype.forEach.call (ary2, hoge, p);
つまり
Array.prototype.forEach.call (this, 関数, this);
さらにhoge(関数)に対してパラメータを複数追加したいときは
Array.prototype.forEach.call (this, 関数, this, this, …);
とするということでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP PHP MySql 画像を取得 1 2022/06/04 14:05
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- PHP PHP MySQLに画像を直接保存 2 2022/06/05 11:50
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- HTML・CSS HTMLのdlとul どちらが正しいと思いますか 3 2023/02/23 11:20
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
hoge の謎
-
「オブジェクトが必要です。」...
-
プログラミングのペーパーテス...
-
javascriptで文字挿入でtoggle...
-
関数でy=g(x)のgとは何の略です...
-
C#テキストボックスの文字を配...
-
google apps scriptの終了のさせ方
-
要素名がスペースを含む場合のj...
-
javascriptでのURLの引数
-
jqGridについて
-
任意の座標をクリックさせるには
-
javascriptでiframeのURL変更は?
-
VBAのIE操作でframe構造のサイ...
-
TexでΣの添え字の位置直し
-
GASでundefinedエラーが出ます
-
javascriptエラーの解決策について
-
今年を取得する方法はありますか?
-
jQueryの"return false"の役割...
-
DIV内のDIV要素を移動する。
-
順列生成アルゴリズムについて...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Boolean型配列中のTrueの有無を...
-
Linux バイナリ実行できない "...
-
ASP+アクセスでのSQLコメントに...
-
ボタンをクリックすると数が増...
-
【正規表現】【javascript】CR...
-
【Jquery】changeイベント毎にa...
-
「オブジェクトが必要です。」...
-
Excel VBA の ChangeFileAccess
-
Vb.netのグローバル変数の宣言...
-
MFCのキャプション変更
-
onclick指定関数の引数へローカ...
-
同じ型【ハイフンと数字】だけ...
-
static constメンバ変数(配列)...
-
javascriptで文字挿入でtoggle...
-
サブウインドウから親ウインド...
-
URLの一部をコピーできるブック...
-
Javascriptグローバル変数の値...
-
複数ファイルで使うグローバル...
-
window.onloadでのfunction
-
全部のアクセスを指定したペー...
おすすめ情報