| 次のページ >>

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

入力したXPathにマッチした要素をハイライトし要素数を表示するブックマークレット

HighlightXPath

ブックマークレットを実行すると出てくる画面左上のボックスに XPath を入力すると、 上の画像のように赤い枠で強調表示されます。 入力用のボックスのすぐ右側に出ている数字は XPath にマッチした要素の数です。

Firefox 3.6.10、Google Chrome 7.0.517.24 beta で動作確認しました。

参考(外部リンク)

スポンサーサイト

JavaScript: 子要素に入ったときに mouseout 用の処理をさせないようにする

行儀の良い方法かどうかは分からないです。 とりあえずメモ。


document.getElementById("foo").addEventListener(
  "mouseout"
, function(e) {
    // e.currentTarget => リスナを設定した要素(子要素ではない)
    var rect = e.currentTarget.getClientRects()[0]; // とりあえず [0] で……

    // 内側にある場合は何もしない
    if(    e.clientX >= rect.left
        && e.clientX <= rect.right
        && e.clientY >= rect.top
        && e.clientY <= rect.bottom
    ){
      return;
    }

    // mouseout 用の処理
  }
, false
);

追記 20100724

……というのをやっつけで書いてお茶を濁したのですが、 見るからに微妙です。。。 そこで、javascript mouseout child などのキーワードで検索し直してみたところ いろいろ出てきました。 とりあえず一番上に出ていた記事へ誘導しておきます。

onMouseOut fix on nested elements – JavaScript « Web Development – Programming – Coding Recipes

追記 20100828
子要素が object 要素の場合 event.toElement, event.relatedTarget では取得できない (Firefox 3.6.8)ので、 event.rangeParent を使うのが良いかも。

Javascript: オブジェクトからコンストラクタ名(クラス名)を得る

obj.constructor.name で取得できますが MDC では nameプロパティは「非標準」とされています。 ちょっと試してみたところ Firefox、Google Chrome では同じように動きます。

function puts(x){ document.write( x + "\n" ); }

function Foo(){}
var x = new Foo();

puts("<pre>");

puts( typeof x.constructor  ); //=> "function"
puts( x.constructor         ); //=> "function Foo() {\n}"
puts( x.constructor == Foo  ); //=> true
puts( x.constructor === Foo ); //=> true

puts( "----" );

puts( typeof x.constructor.name   ); //=> "string"
puts( x.constructor.name          ); //=> "Foo"

puts( "----" );

puts( ("a").constructor.name          ); //=> "String"
puts( (1).constructor.name            ); //=> "Number"
puts( (Infinity).constructor.name     ); //=> "Number"
puts( ({}).constructor.name           ); //=> "Object"
puts( ([]).constructor.name           ); //=> "Array"
puts( (function(){}).constructor.name ); //=> "Function"
puts( (true).constructor.name         ); //=> "Boolean"
//puts( (null).constructor.name       ); //=> null has no properties
//puts( (undefined).constructor.name  ); //=> undefined has no properties

puts("</pre>");

JsUnit: テスト実行とエラーメッセージ表示をキーボード操作で行う

JsUnit を使う場合、 エディタでコード書く→ブラウザでテストという一連の操作の途中で どうしてもマウス操作が必要になる場面があり、とてもだるいのでどうにかしたい。


自分が使う場合、操作の 9割は (1)テストの実行 (2)エラーメッセージの表示。 の 2つ。その他の操作はたまにしか行わないので、マウス操作でも構わない。


jsunit/app/main-data.html の 以下の行をコメントアウト。

giveFocusToTestFileNameField();

同じく jsunit/app/main-data.html の body 要素の最後に以下を追加。

新たに生成して画面左上に配置した input 要素 keyCapture でキー入力を拾い、 r, a キーでそれぞれテスト実行、エラーメッセージの表示(Show all)を行うようにした。 keyCapture からフォーカスが外れた場合はマウスでフォーカスを戻すかページをリロードする。

<script type="text/javascript">
(function(){
  var keyCapture = document.createElement("input");
  
  (function(rules){
    for(var key in rules){
      keyCapture.style[key] = rules[key];
    }
  })({
    border: "solid 1px red"
  , width: "20px"
  , height: "20px"
  , position: "absolute"
  , left: "10px"
  , top: "10px"
  });
  
  document.getElementsByTagName("body")[0].appendChild(keyCapture);
  keyCapture.focus();
  
  var operateByKeyInput = function(event){
    switch(event.keyCode){
      case 65: // a
        top.testManager.getUiManager().showMessagesForAllProblemTests();
        break;
      case 82: // r
        top.startTests();
        break;
    }
  };
  
  keyCapture.onkeydown = operateByKeyInput;
})();
</script>

あと、ページのロード時に自動でテストを行う方法を 併用すると便利 → testRunner.htmlの引数(js.nice-777.com)

(solved) Javascriptのエラー: Node cannot be inserted at the specified point in the hierarchy / NS_ERROR_DOM_HIERARCHY_REQUEST_ERR

環境

Firefox 3.5.6

状況と原因

appendChild の実行時に
Exception... "Node cannot be inserted at the specified point in the hierarchy" code: "3" nsresult: "0x80530003 (NS_ERROR_DOM_HIERARCHY_REQUEST_ERR)" (略)
といったエラーメッセージが出る。

次のコードで再現する。

foo = document.createElement("p");
bar = document.createElement("p");

// エラーは出ない。
try{
  foo.appendChild( bar );
}catch(e){
  console.log([ 1, e ]);
}

// 循環的な親子関係。エラーが出る。
try{
  bar.appendChild( foo );
}catch(e){
  console.log([ 2, e ]);
}

// 自身へ子として自身を追加。エラーが出る。
try{
  foo.appendChild( foo );
}catch(e){
  console.log([ 3, e ]);
}

このように要素間で階層構造に矛盾が生じる時に出るエラーらしい。 上記以外にもNGなパターンがあるかも。



** ホームに戻る

| 次のページ >>
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。