のくす牧場
コンテンツ
牧場内検索
カウンタ
総計:127,685,900人
頁
昨日:no data人
頁
今日:人
頁
最近の注目
人気の最安値情報

元スレ+ JavaScript の質問用スレッド vol.80 +

JavaScript覧 / PC版 /
スレッド評価: スレッド評価について
みんなの評価 :
タグ : - タグè¿1⁄2åŠ + 追加: タグについて ※前スレ・次スレは、スレ番号だけ登録。駄スレにはタグつけず、スレ評価を。荒らしタグにはタグで対抗せず、タグ減点を。
←前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ→ / 要望・削除依頼は掲示板へ / 管理情報はtwitterで

651 = :

onclick属性とか用じゃないの？
type属性は必須だし

652 = :

申し訳ない、なんか勘違いしていた私。 >>651

654 = :

>>648
HTML4.01 ではscript要素の規定値が text/javascript でないため、その指定がないと HTML-lint ではエラーになる。
HTML5 では不要…というか未定義。

655 = :

>>653
getElementsByClassName

656 = :

>>655
IEだったらきかないよ

657 = :

効かないも何もそれ先行実装

659 = :

>>654
HTML-lintはscript要素もトリガになるのか
イベント属性を使わないならデフォルトスクリプト宣言は必要ないように思えるけど

>>656
IE8ならdocument.querySelectorAll('.hoge')
それ以前も対象にするなら全要素ループでチェック

661 = :

getElementsByClassName が IE8- に対応しないのはわかってるが、「getElementByIdのように、classで要素を取得するメソッド」といえば getElementsByClassName だと思う。
getElementsByClassName は IE9 からサポートされる。

Internet Explorer 9 Beta 開発者ガイド
http://msdn.microsoft.com/ja-jp/ie/ff468705.aspx#_DOM_L2_HTML

663 = :

>>660

> ・戻り値はliveなNodeListではなく、ただの配列なので注意
non-live には同意するが、配列だろうか…？

var p = document.querySelectorAll('p');
console.log(Object.prototype.toString.call(p)); // "[object NodeList]"
console.log(p instanceof Array); // false

戻り値は non-live な NodeList だと思ってた。

664 = :

>>663
こうすれば良かった。

console.log(p instanceof NodeList); // true

やはり、戻り値は NodeListインターフェース のオブジェクトな気がする。

665 = :

>>663
あいや、>>658のスクリプトの話＜ただの配列

666 = :

>>665
申し訳ない、アンカー先を読み間違えていたようだ…。

667 = :

non-liveってあとから追加や削除をしても取得したときの情報のままってこと？
変更後に再度取得しなおせば変更後の情報が得られるの？

668 = :

>>667
その通り。

getElementsByClassName()の落とし穴
http://www.insuite.jp/blog/archives/80

670 = :

>>667
ごめん。微妙に間違っていたっぽい。

---
<div class="test">壱</div>
<div class="test">弐</div>
<div class="test">参</div>
<script type="text/javascript"><!--
(function () {
　function byClassName () {
　　var elements = document.getElementsByClassName('test');
　　while (elements.length) {
　　　elements[0].style.color = '#ff0000';
　　　elements[0].className = 'change';
　　}
　}

　var elements = document.querySelectorAll('.test');
　console.log(elements[0].style.color); // ""
　byClassName();
　console.log(elements[0].style.color); // "rgb(255, 0, 0)"
})();
//--></script>
---

live か non-live かっていうのは NodeListインターフェース (わかりやすいところではlength) のみに影響するらしい。
element.style.color など Elementインターフェースの変更は即反映される。

# 自信はないので、鵜呑みにしないで欲しい。(えらい人の解説に期待…。)

671 = :

>>670
NodeListからDOMが消える前提なのがおかしい。
場合によってはtestクラスを残そうとしたりすると無限ループに陥る。
素直に配列（NodeListだけど）の後ろからループ回せばいいじゃん。
要素の順序が勝手に入れ替わったりしないことは保証されてるし。

(function test() {
  var elements = document.getElementsByClassName("test");
  for (var i = elements.length - 1; i >= 0; i--) {
    var e = elements[i];
      e.className = "change";
      e.style.color = "#ff0000";
  }
})();

672 = :

>>671
指摘ごもっとも。
後ろからループ回せば問題ないということに気が付かなかった…。

# デクリメントすると <!-- comment -->内に置けないので、外部スクリプト化するなり、コメントをなくすなりする必要はあるかな。

673 = :

画像のうえにテキストを表示させる方法を教えてください。
一応自分でも挑戦してみたのですが、下の方法だと
画像がクリッカブルじゃなくなってしまいます。(FireFoxで動作確認しています)

function add_note(obj, note) {
var elem = document.createElement("span");
elem.innerHTML = note;
elem.style.position = "absolute";
elem.style.left = obj.offsetLeft;
elem.style.width = obj.width;
elem.style.top = obj.offsetTop;
elem.style.height = obj.height;
var objBody = document.getElementsByTagName("body").item(0);
objBody.appendChild(elem);
}

<a href="..."><img src="..." onload="add_note(this, 'aaaaa')"></a>

675 = :

>>672
i-- → i-=1じゃね。

>>673
js以前の問題に見える。<a>でくくらないってのはだめなのか？

676 = :

今どきJSのコードをコメントで囲う必要ってあるの？
コードを表示してしまうのって携帯ぐらいだと思ってた。

678 = :

>>676
5年前の携帯でもscriptとnoscriptを認識するぞ・・

679 = :

あ、ごめん。
「画像がクリッカブルになってしまいます。」って読み間違えてた。

1,z-index指定。（で出来るはず。）
2,<a href="..."><span style="ほにゃらら">aaaa</span><img src="..."></a>
jsでやる必要がなければ2でいいと思うけどな。jsがoffの人とかも見れるし。

681 = :

>>676
XHTMLに厳密に従うと、本当にコメントになってスクリプトが無い事になるから
今時ならもうやらん方がいい。

682 = :

>>681
そーなのかーって思ったけど、全部jsファイルで外部化すればいんじゃね？って思った
とりあえず今後は<!--を外すことにする

683 = :

>>678
ドコモ携帯はstyle要素の中身すら晒してしまうで

684 = :

>>676
ブラウザとしてなら必要ないかもしれないが、他のパーサー通すときにコメントアウトしていないと困るパターンはある。
XHTMLなら外部スクリプト化するか、CDATAセクションを使うべき。
XMLパーサーを通した時にどのようなノードを生成するか考えてみるといい。

685 = :

XHTML文書は <>& をエスケープしてもいいが、メンテが面倒になる。

<p>foo</p>
<script type="application/javascript">
(function () {
　var p = document.getElementsByTagName('p');
　for (var i = 0, l = p.length; i < l; i++) {
　　p[i].className = 'foo';
　}
})();
</script>

# "Content-Type: text/html" を出力するなんちゃってXHTML文書はXHTMLにする意味があるのか、と思うこの頃…。

686 = :

id付きの要素がスクリプトによってドキュメントに追加されるのですが
追加される以前にdocument.getElementByIdで取得しようとしてもnullになります
追加されたかどうか判断するにはどうすればいいですか？
nullじゃなくなるまでずっとループを回すんですか？

687 = :

ところで、「今時 = XHTML」なのかな？
docomoなどの携帯電話で扱われるXHTML文書は XHTML 1.x や XHTML5 とかけ離れた仕様だと思っていて、それを今時というのには抵抗があるのだが…。

688 = :

>>686
ちょっと何をやりたいのかよくわからない。
必要な処理を行うときに getElementById の返り値をみるだけだと思うんだけど…。

689 = :

別のスクリプトによって、任意のタイミングでそのidの付いた要素がドキュメントに挿入されます
挿入されたその要素に対して何か操作をしたいので
その要素が挿入されたかどうかはどうやって判断すればいいのかなと

690 = :

XHTMLはオワコン

691 = :

>>686,689
getElementById は該当要素がなかったときにnull を返す。
操作時に getElementById の戻り値が null でなかったら処理をするようにすればいい。

692 = :

つまりnullじゃなくなるまでループを回すってことですか？

693 = :

>>690
終わってないよ！XHTML5 が残ってるよ！(HTML5 の方が注目度高いだろうけど。)
# XHTML書く人はIEなんか無視すればいいと思う。IE無視できない人はHTML書けばいいと思う。

>>692
idの付いた要素をドキュメントに挿入したタイミングで処理を行えばいいじゃなイカ。
処理のタイミングの問題としか思えないのにそれに類する情報がないので何とも言えない。
コードかURLを開示してもらうのが手っ取り早いかと。

あと、連投するならレス番をつけないと流れを追いづらい。

694 = :

>>692
たとえばJavaScriptでFlashを埋め込んで、
Flashのロードが完了したらJavaScriptからFlashを操作するときとか、
俺はsetTimeoutで100～200msごとくらいにロード状況をチェックして、
ロード完了時に操作を受け付けるようにしてる。
で、30秒～1分くらい経ってもロードできないときは中断してエラーを吐くようにする。

696 = :

setIntervalは時間がきたら有無を言わさず処理しちゃうから、
処理が重複するリスクがあったりする
こういう場合はsetTimeoutで一回一回チェックしたほうがいいと思うよ

697 = :

どうでもいい話だが、>>693をイカ娘が打ってると思うとなごんだｗ

698 = :

DOMNodeInsertedってそういう時に使うんじゃないの？


←前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ→ / 要望・削除依頼は掲示板へ / 管理情報はtwitterで / JavaScript一覧へ
スレッド評価: スレッド評価について
みんなの評価 :
タグ : - タグè¿1⁄2åŠ + 追加: タグについて ※前スレ・次スレは、スレ番号だけ登録。駄スレにはタグつけず、スレ評価を。荒らしタグにはタグで対抗せず、タグ減点を。

類似してるかもしれないスレッド

トップメニューへ / →のくす牧場書庫について