私的良スレ書庫
不明な単語は2ch用語を / 要望・削除依頼は掲示板へ。不適切な画像報告もこちらへどうぞ。 / 管理情報はtwitterでログインするとレス評価できます。 登録ユーザには一部の画像が表示されますので、問題のある画像や記述を含むレスに「禁」ボタンを押してください。
元スレ+ JavaScript の質問用スレッド vol.117 +
JavaScript スレッド一覧へ / JavaScript とは? / 携帯版 / dat(gz)で取得 / トップメニューみんなの評価 :
レスフィルター : (試験中)
>>622
遅くなってすまなかった
> 問題点を理解して使っていくうえで賢いやり方とかあるかな？
最も確実なのは「全てのノードを置換しなければ実現できない状況でのみ innerHTML を使う」になる
http://jsfiddle.net/Pc87X/1/ やhttp://jsfiddle.net/Pc87X/7/ のようにノードを置換しなくて良いケースでは innerHTML は使わない、ということだ
これなら innerHTML を使わなくても全てのノードを置換しなければいけないのだから問題はない
addEventListener の参照エラーのみに対応するならバブルするイベントは document で定義し、バブルしないイベントは useCapture を利用して document で定義すれば回避できる
ちなみに、jQueryでは useCaptuer を使えないのでバブルしないイベントには対応できない
また、http://jsfiddle.net/Pc87X/9/ のように jQuery.data() に対応できない等、完全な対策にはなっていない
---
ただし、「innerHTML が楽だ」という人は大抵、「ノードを置換しなくて良いケース」や「部分的な置換でよいケース」でもらくだからという理由で全体を置換しようとすることが多い
正直、お勧めはしないが、その場合は下記対策が考えられる
1. チームで参照を保持しているノード情報を共有する
2. 参照が切れてはいけないノードでinnerHTMLを使用した際に例外を投げる仕組みを作る(問題の早期発見)
1. はまあ、当然だな
2. は例えば、下記URLのようにする
http://jsfiddle.net/Pc87X/10/
欠点としては要素ノードの参照にしか対応できていない事か
また、addEventListener のように参照を保持するタイプのメソッドは全てユーザ定義関数でwrapする必要があるので少し手間はかかる
---
ところで、jQuery.data() のように全DOMノードにオブジェクトを格納できる DOM 仕様があって廃案になったと記憶しているのだが、該当仕様をどうしても思い出せない
どなたかご存知の方がいたら教えて頂けないだろうか？
廃案後、代替仕様が出来たかも気になっている
全ノードに js-refered フラグを付けられれば、http://jsfiddle.net/Pc87X/10/ でテキストノードの参照エラーにも対応できるのだが…
遅くなってすまなかった
> 問題点を理解して使っていくうえで賢いやり方とかあるかな？
最も確実なのは「全てのノードを置換しなければ実現できない状況でのみ innerHTML を使う」になる
http://jsfiddle.net/Pc87X/1/ やhttp://jsfiddle.net/Pc87X/7/ のようにノードを置換しなくて良いケースでは innerHTML は使わない、ということだ
これなら innerHTML を使わなくても全てのノードを置換しなければいけないのだから問題はない
addEventListener の参照エラーのみに対応するならバブルするイベントは document で定義し、バブルしないイベントは useCapture を利用して document で定義すれば回避できる
ちなみに、jQueryでは useCaptuer を使えないのでバブルしないイベントには対応できない
また、http://jsfiddle.net/Pc87X/9/ のように jQuery.data() に対応できない等、完全な対策にはなっていない
---
ただし、「innerHTML が楽だ」という人は大抵、「ノードを置換しなくて良いケース」や「部分的な置換でよいケース」でもらくだからという理由で全体を置換しようとすることが多い
正直、お勧めはしないが、その場合は下記対策が考えられる
1. チームで参照を保持しているノード情報を共有する
2. 参照が切れてはいけないノードでinnerHTMLを使用した際に例外を投げる仕組みを作る(問題の早期発見)
1. はまあ、当然だな
2. は例えば、下記URLのようにする
http://jsfiddle.net/Pc87X/10/
欠点としては要素ノードの参照にしか対応できていない事か
また、addEventListener のように参照を保持するタイプのメソッドは全てユーザ定義関数でwrapする必要があるので少し手間はかかる
---
ところで、jQuery.data() のように全DOMノードにオブジェクトを格納できる DOM 仕様があって廃案になったと記憶しているのだが、該当仕様をどうしても思い出せない
どなたかご存知の方がいたら教えて頂けないだろうか？
廃案後、代替仕様が出来たかも気になっている
全ノードに js-refered フラグを付けられれば、http://jsfiddle.net/Pc87X/10/ でテキストノードの参照エラーにも対応できるのだが…
そもそも「省略されているかされていないかを判定する」必要性がわからん
まだやってんの？ いま来た人用にわかりやすい例え思いついたわｗ
innerHTMLには根本的な問題がある
代入演算子=には根本的な問題がある
innerHTMLに代入したら古い値が消えることだ
代入演算子=で代入したら古い値が消えることだ
前の値を残しておきたいときはDOM操作をしなければならない
前の値を残しておきたいときは足し算をしなければいけない
だからinnerHTMLを使ってはならない
だから代入演算子を使ってはならない
★普通の人が考えること
前の値が要らない時はinnerHTMLでいいんじゃねーの？
前の値が要らない時は代入演算子でいいんじゃねーの？
そもそも前の値を捨てて新しい値を入れる時にinnerHTMLを使うんじゃねーの？
そもそも前の値を捨てて新しい値を入れる時に代入演算子を使うんじゃねーの？
innerHTMLには根本的な問題がある
代入演算子=には根本的な問題がある
innerHTMLに代入したら古い値が消えることだ
代入演算子=で代入したら古い値が消えることだ
前の値を残しておきたいときはDOM操作をしなければならない
前の値を残しておきたいときは足し算をしなければいけない
だからinnerHTMLを使ってはならない
だから代入演算子を使ってはならない
★普通の人が考えること
前の値が要らない時はinnerHTMLでいいんじゃねーの？
前の値が要らない時は代入演算子でいいんじゃねーの？
そもそも前の値を捨てて新しい値を入れる時にinnerHTMLを使うんじゃねーの？
そもそも前の値を捨てて新しい値を入れる時に代入演算子を使うんじゃねーの？
>>702
> ただし、「innerHTML が楽だ」という人は大抵、「ノードを置換しなくて良いケース」や
> 「部分的な置換でよいケース」でもらくだからという理由で全体を置換しようとすることが多い
その前提がおかしいんだろ。
なんで置換ありきなんだ？
innerHTMLを使う時に一番多いのは、文字列で新しくHTMLを
生成するときだろ。置換なんかしねぇよ。
> ただし、「innerHTML が楽だ」という人は大抵、「ノードを置換しなくて良いケース」や
> 「部分的な置換でよいケース」でもらくだからという理由で全体を置換しようとすることが多い
その前提がおかしいんだろ。
なんで置換ありきなんだ？
innerHTMLを使う時に一番多いのは、文字列で新しくHTMLを
生成するときだろ。置換なんかしねぇよ。
タブレットでスクロール可能なエリアでスワイプすると、横スクロールするだけでスワイプの動作が取得できません。
どのようなコードを記載すべきでしょうか。下記のようなコードを記載しました。
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript">
$(function(){
$('#scrollswipe').bind('swipe', function(){
alert("swipe");
});
});
</script>
</head>
<body>
<div id="scrollswipe" style="width:200px; height:200px; overflow:scroll;">
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
<h1>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</h1>
<h1>cccccccccccccccccccccccccccccccccccccccccccc</h1>
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
<h1>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</h1>
</div>
</body>
</html>
どのようなコードを記載すべきでしょうか。下記のようなコードを記載しました。
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript">
$(function(){
$('#scrollswipe').bind('swipe', function(){
alert("swipe");
});
});
</script>
</head>
<body>
<div id="scrollswipe" style="width:200px; height:200px; overflow:scroll;">
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
<h1>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</h1>
<h1>cccccccccccccccccccccccccccccccccccccccccccc</h1>
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
<h1>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</h1>
</div>
</body>
</html>
>>712
これ使ってる。自力実装は死ぬと思うよ。
http://cubiq.org/iscroll-5
もしくは、jQuery Mobileだね。
俺が試したリリース初期頃は端末が遅いのと
ライブラリが重いので使うのやめたけど。
これ使ってる。自力実装は死ぬと思うよ。
http://cubiq.org/iscroll-5
もしくは、jQuery Mobileだね。
俺が試したリリース初期頃は端末が遅いのと
ライブラリが重いので使うのやめたけど。
>>639も使わなくていい場面でinnerHTMLを使ってるので五十歩百歩
ノードを置換しなくてもいいのにinnerHTMLを使ってる時点で使い方がなってない
ノードを置換しなくてもいいのにinnerHTMLを使ってる時点で使い方がなってない
1 delete objA;
2 new objB;
結局、innerHTMLは、古いオブジェクトを削除して、
新しいオブジェクトを作っただけかね？
2 new objB;
結局、innerHTMLは、古いオブジェクトを削除して、
新しいオブジェクトを作っただけかね？
xmlHttpRequestでphpを指定した時そのphpはどこで実行されるんですか？
サーバー側かクライアント側にphpごと来るのか
サーバー側かクライアント側にphpごと来るのか
>>718
.html() は内部的に innerHTML を利用しているから innerHTML を使用しているのと同義
.html() は内部的に innerHTML を利用しているから innerHTML を使用しているのと同義
>>719
innerHTML はシリアライズも行う
また、後付で標準化されたので仕様が曖昧で実装依存な処理もそれなりにある
http://domparsing.spec.whatwg.org/#innerhtml
http://msdn.microsoft.com/en-us/library/ie/ms533897.aspx
innerHTML はシリアライズも行う
また、後付で標準化されたので仕様が曖昧で実装依存な処理もそれなりにある
http://domparsing.spec.whatwg.org/#innerhtml
http://msdn.microsoft.com/en-us/library/ie/ms533897.aspx
>>723
シリアライズが何を言っているのかわからないが、
innerHTMLはDOMオブジェクトをシリアライズするのではない。
HTML要素とDOMオブジェクトの違いがわかってない人が多いんだよな。
これ理解するのに、jQueryのdata()メソッドの挙動を勉強するのがいい。
たとえばこんなHTMLがあるとする。
<span id="id" data-value="123">test</span>
これを $('#id').data('value') で参照すると123が返ってくる。
そのあと $('#id').data('value', 456) を実行し、参照したら456が返ってくる。
当たり前の動作に見えるが、ここで$('#id').attr('data-value')を参照すると、返ってくるのは123。
つまり、dataはDOMオブジェクトの値をかえるが、HTML要素は書き換えないということ。
DOMオブジェクトの状態とHTMLは全くの別もの。DOMオブジェクトをシリアライズしたものがHTMLなのではない。
HTML要素を書き換えるとDOMオブジェクトに反映されるが、DOMオブジェクトを書き換えても
HTML要素には反映されない。それがDOMオブジェクトに割り当てるイベントハンドラなど。
jQueryのattr()メソッド（DOMでいえばsetAttribute)は "HTML要素を書き換える" メソッド
on（DOMで言えばaddEventListener）はDOMオブジェクトにイベントハンドラを設定するメソッド
それぞれのメソッドで、影響をあたえるものが、HTML要素だったり、DOMオブジェクトだったりする。
innerHTMLが行うのは、HTML要素の取得と設定で、DOMオブジェクト操作用ではない。
シリアライズが何を言っているのかわからないが、
innerHTMLはDOMオブジェクトをシリアライズするのではない。
HTML要素とDOMオブジェクトの違いがわかってない人が多いんだよな。
これ理解するのに、jQueryのdata()メソッドの挙動を勉強するのがいい。
たとえばこんなHTMLがあるとする。
<span id="id" data-value="123">test</span>
これを $('#id').data('value') で参照すると123が返ってくる。
そのあと $('#id').data('value', 456) を実行し、参照したら456が返ってくる。
当たり前の動作に見えるが、ここで$('#id').attr('data-value')を参照すると、返ってくるのは123。
つまり、dataはDOMオブジェクトの値をかえるが、HTML要素は書き換えないということ。
DOMオブジェクトの状態とHTMLは全くの別もの。DOMオブジェクトをシリアライズしたものがHTMLなのではない。
HTML要素を書き換えるとDOMオブジェクトに反映されるが、DOMオブジェクトを書き換えても
HTML要素には反映されない。それがDOMオブジェクトに割り当てるイベントハンドラなど。
jQueryのattr()メソッド（DOMでいえばsetAttribute)は "HTML要素を書き換える" メソッド
on（DOMで言えばaddEventListener）はDOMオブジェクトにイベントハンドラを設定するメソッド
それぞれのメソッドで、影響をあたえるものが、HTML要素だったり、DOMオブジェクトだったりする。
innerHTMLが行うのは、HTML要素の取得と設定で、DOMオブジェクト操作用ではない。
>>728
えらいえらい。よく気づいたね。
じゃあ、DOMの話だけでするならば、
フォームのvalueが全く同じ挙動をする。
ページが表示されてからinputの内容を入力した時、
valueプロパティ、つまりDOMオブジェクトの値は最新の値だが、
value属性はページが表示された時のまま。
DOMオブジェクトの内容と、属性は関係してそうで関係していない。
jQueryのdataはこの動作を参考にして作られていると考えれば良い。
えらいえらい。よく気づいたね。
じゃあ、DOMの話だけでするならば、
フォームのvalueが全く同じ挙動をする。
ページが表示されてからinputの内容を入力した時、
valueプロパティ、つまりDOMオブジェクトの値は最新の値だが、
value属性はページが表示された時のまま。
DOMオブジェクトの内容と、属性は関係してそうで関係していない。
jQueryのdataはこの動作を参考にして作られていると考えれば良い。
実装依存は困るよな…
っていうかHTMLもCSSもJavaScriptも全ブラウザ全部仕様通り全部動作完全に一緒だったらと思うと
っていうかHTMLもCSSもJavaScriptも全ブラウザ全部仕様通り全部動作完全に一緒だったらと思うと
var tes=$("div");
上はDOMオブジェクトであってますか？
上はDOMオブジェクトであってますか？
>>726
innerHTML は WhiteSpace のノーマライズとか tagName, attributeName の大文字化or小文字化を実装依存で処理してるんだが
この人は何を言ってるのかわからないのになぜ自信満々なんだ
仕様書にも " running the HTML fragment serialization algorithm" とあるが、 読んでいる様子が全くない
innerHTML は WhiteSpace のノーマライズとか tagName, attributeName の大文字化or小文字化を実装依存で処理してるんだが
この人は何を言ってるのかわからないのになぜ自信満々なんだ
仕様書にも " running the HTML fragment serialization algorithm" とあるが、 読んでいる様子が全くない
自分が変なこと言って指摘されても「よくきづいたね」と初めから指摘される事がわかっていた装いをする図々しさがあるぐらいだからな
未知の分野を勉強する事を忘れ、自分の知識をひけらかすのが目的化してるんだろう
少なくとも、このスレではお呼びではない
未知の分野を勉強する事を忘れ、自分の知識をひけらかすのが目的化してるんだろう
少なくとも、このスレではお呼びではない
innerHTML の実装間での違いって主にどんなものがありますか？
>>739
知ってる
知ってる
質問して満足する答えが得られなければ、自分の都合が良いように解釈して先の自分の発言が正しいと主張する人もいるんだよな..
>>739
ばらすな
ばらすな
>>743
「実は答えを引き出すために知ったかぶってたんだぜ」というポーズはいいから
「実は答えを引き出すために知ったかぶってたんだぜ」というポーズはいいから
ファイルのアップロードをしたいのですが対象ブラウザーにIE9があります。
FormData()はIE10からなので画面遷移させずにアップデートを行う場合はiframeなんかを利用するしかないでしょうか？
FormData()はIE10からなので画面遷移させずにアップデートを行う場合はiframeなんかを利用するしかないでしょうか？
送信URLが204 No Contentを返せば画面遷移しないで済むけど。
あるjqueryオブジェクトがactiveElementかどうか調べる
一番いい方法は何ですか？
一番いい方法は何ですか？
$('#test').get(0) === document.activeElement
以上にいい方法ありますか？
以上にいい方法ありますか？
前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ
/ 要望・削除依頼は掲示板へ / 管理情報はtwitterで / 
JavaScript スレッド一覧へ類似してるかもしれないスレッド
- + JavaScript の質問用スレッド vol.113 + (1001) - [97%] - 2014/1/25 12:46
- + JavaScript の質問用スレッド vol.110 + (1001) - [97%] - 2013/10/13 14:01
- + JavaScript の質問用スレッド vol.119 + (1002) - [97%] - 2014/10/3 15:30
- + JavaScript の質問用スレッド vol.118 + (1002) - [97%] - 2014/8/29 22:30
- + JavaScript の質問用スレッド vol.116 + (1002) - [97%] - 2014/7/1 0:45
- + JavaScript の質問用スレッド vol.115 + (1001) - [97%] - 2014/5/29 16:16
- + JavaScript の質問用スレッド vol.114 + (1001) - [97%] - 2014/5/3 10:45
- + JavaScript の質問用スレッド vol.127 + (160) - [97%] - 2021/7/16 9:30
- + JavaScript の質問用スレッド vol.112 + (1001) - [97%] - 2013/11/27 16:46
- + JavaScript の質問用スレッド vol.111 + (1001) - [97%] - 2013/11/4 6:00
- + JavaScript の質問用スレッド vol.113 + (1001) - [97%] - 2014/3/15 21:30
- + JavaScript の質問用スレッド vol.127 + (1001) - [97%] - 2016/2/4 0:15
- + JavaScript の質問用スレッド vol.137 + (1003) - [97%] - 2019/3/26 11:46
- + JavaScript の質問用スレッド vol.107 + (1001) - [97%] - 2013/9/7 10:16
- + JavaScript の質問用スレッド vol.121 + (1001) - [95%] - 2015/1/1 18:30
- + JavaScript の質問用スレッド vol.126 + (952) - [95%] - 2015/11/18 13:15
- + JavaScript の質問用スレッド vol.126 + (348) - [95%] - 2023/1/12 17:00
トップメニューへ / →のくす牧場書庫について