くれすの開発日記〔JavaScript編〕 このページをアンテナに追加 RSSフィード

2007-11-27久々の更新

[] className 19:53  className - くれすの開発日記〔JavaScript編〕 を含むブックマーク はてなブックマーク -  className - くれすの開発日記〔JavaScript編〕  className - くれすの開発日記〔JavaScript編〕 のブックマークコメント

更新頻度低いので、d.hatena.ne.jp に統合しちゃうかも。

var elem = document.createElement("img");

/* ↓IEで動きません。 */
elem.setAttribute("class", "foo");

/* ↓これが正しい? */
elem.className = "foo";

たまには別のブラウザで見ないとダメだね。

YuichirouYuichirou2007/11/28 01:24DOM HTMLの仕様では、各要素を表すオブジェクトはその要素の属性をプロパティとして指定できるようになっています(例:elm.title = "title属性";)。当然class属性もプロパティとして指定できるのですが、classというワードは言語によってはプロパティに使えない場合がある、というわけでclassNameというプロパティ名が採用されています。

ところで、setAttributeメソッドは上記の名前調節とは無関係に、属性名を第1引数に取ってその属性に値を設定するもののはずなのですが、IEはひどいことに
Element.prototype.setAttribute = function (name, value) { this[name] = value; }
という実装をしているようなのです。つまり第1引数に"class"をつけると、class属性に値を指定するのではなく、対応する要素オブジェクトにclassプロパティを作ってそこに値を代入してしまうのです。
(逆に考えれば、IEだけは「elem.setAttribute("className", "foo");」とするとうまくclass属性に値が指定できるのです!)
そういうヒドい実装があることから、私は属性値の指定は原則プロパティへの代入で行うようにしています。

2007-08-28テーブルテーブルテーブル

[] テーブルを囲ってみる 15:23  テーブルを囲ってみる - くれすの開発日記〔JavaScript編〕 を含むブックマーク はてなブックマーク -  テーブルを囲ってみる - くれすの開発日記〔JavaScript編〕  テーブルを囲ってみる - くれすの開発日記〔JavaScript編〕 のブックマークコメント

ホント、テーブルが三重になったレイアウトとかカンベンして欲しい。誰が保守するわけ?

一応書いたので貼っておく。

javascript:b=document.getElementsByTagName("table");for(i=0;i<b.length;i++){b[i].style.border='1px solid #ff0000';}undefined

一行スクリプト。簡単でした。

kiwrbmlniokiwrbmlnio2011/03/11 14:49bTJGrD <a href="http://xuossazaaftq.com/">xuossazaaftq</a>, [url=http://umksatyqtfif.com/]umksatyqtfif[/url], [link=http://ocnsjdmaiwgo.com/]ocnsjdmaiwgo[/link], http://pupohbkcjrag.com/

2007-07-25ハマリました

[] 子ノードを全部消す 20:04  子ノードを全部消す - くれすの開発日記〔JavaScript編〕 を含むブックマーク はてなブックマーク -  子ノードを全部消す - くれすの開発日記〔JavaScript編〕  子ノードを全部消す - くれすの開発日記〔JavaScript編〕 のブックマークコメント

こんな単純なミスなのかと思う。

とりあえずFirefox 2.0で検証しただけなんだけど。

var html_ul = document.getElementById("foo");
if(html_ul.childNodes && html_ul.childNodes.length) {
    for(var i = 0; i < html_ul.childNodes.length; i++) {
        html_ul.removeChild(html_ul.childNodes[0]);
    }
}

これだと子ノードは全部消えません。このULに、仮に10個の子要素(この場合はLI)があったとすると、半分の5個しか消えません。

要するに、コレがいけないんです。

    for(var i = 0; i < html_ul.childNodes.length; i++) {

removeChildすると、html_ul.childNodes.lengthも減っていくため、iが増えてlengthが減るという奇妙な現象が起こる。

以下のコードならOK。

var html_ul = document.getElementById("foo");
if(html_ul.childNodes && html_ul.childNodes.length) {
    var length = html_ul.childNodes.length;
    for(var i = 0; i < length; i++) {
        html_ul.removeChild(html_ul.childNodes[0]);
    }
}

while(html_ul.childNodes.length) とか書いた方が良いのかなあ。

というか、removeAllChildren みたいなメソッドが欲しい。

fvxkvnxysfvxkvnxys2011/03/11 09:54mm8Ko1 <a href="http://pcrovyoqfums.com/">pcrovyoqfums</a>, [url=http://lsmkirexomok.com/]lsmkirexomok[/url], [link=http://pbbrdnuzmfpk.com/]pbbrdnuzmfpk[/link], http://mkwkspqgamvp.com/

2007-07-15今さらながら

[] 基本の基本だけ@GET編 16:44  基本の基本だけ@GET編 - くれすの開発日記〔JavaScript編〕 を含むブックマーク はてなブックマーク -  基本の基本だけ@GET編 - くれすの開発日記〔JavaScript編〕  基本の基本だけ@GET編 - くれすの開発日記〔JavaScript編〕 のブックマークコメント

引数にコールバック関数渡しちゃうのが一番拡張性あるんじゃないかな、と思ってる。

コールバック関数で処理するDOMパースの方が大変なんだけど。

function ajax(url, query, callback)
{
  var req;
  if(window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  } else if(window.ActiveXObject) {
    req = ActiveXObject('MSXML2.XMLHTTP.3.0');
  }
  if(!req)
    return false;

  req.open("GET", url, true);
  req.onreadystatechange = function() {
    if(req.readyState == 4) {
      if(req.status == 200) {
        if(req.responseXML) {
          callback(req.responseXML);
        }
      }
      else {
        return false;
      }
    }
  }
  req.send(query);
}

Mozillaだとクロスドメイン制約があるから、http:// から書かなくても良いんじゃね?とか思ったり。クロスドメイン制約って外せないんだろうか?一応、JSONでやるという代案はあるけど。

BrandywineBrandywine2011/07/23 13:26I'm not easily impressed. . . but that's impresnsig me! :)

qgjxdwhslqgjxdwhsl2011/07/23 23:05Gm9odA <a href="http://pmdkqszodmez.com/">pmdkqszodmez</a>

2007-06-15クッキー!

[] クッキーを表示する 18:36  クッキーを表示する - くれすの開発日記〔JavaScript編〕 を含むブックマーク はてなブックマーク -  クッキーを表示する - くれすの開発日記〔JavaScript編〕  クッキーを表示する - くれすの開発日記〔JavaScript編〕 のブックマークコメント

サイトから発行されたクッキーを見てみたいなどという人は、開発者のごく一部だと思うけど。

javascript:alert(document.cookie);

これをブラウザURL欄に入力してみましょう。

ブックマークに追加しておくと素敵です。

gboznthdngboznthdn2011/03/11 20:20PN9Xn4 <a href="http://ndukdwqpnrll.com/">ndukdwqpnrll</a>, [url=http://ngngdctsikvo.com/]ngngdctsikvo[/url], [link=http://csvdcsrcrwfk.com/]csvdcsrcrwfk[/link], http://gnjjjlqsbaao.com/