jQueryが使えない環境やメモリ的にjQueryを使用したくない場合のDOMセレクターにJavaScriptのquerySelectorがとても便利に使えます。
jQueryが使えないiMacros環境でも使用できます。
querySelector() : セレクターに最初の要素ひとつを返す
querySelectorAll() : セレクターに合致した全ての複数の要素を返す。(DOMオブジェクトの配列で返る)
window.document.querySelector("#my_id");
window.document.querySelector(".my_class");
window.document.querySelector([class='my_class']);
window.document.querySelector("input[type='checkbox']");
window.document.querySelector("table[class='shipInfo'] tr td:nth-of-type(1)");
window.document.querySelector("tr > td");
window.document.querySelectorAll(".my_class");
window.document.querySelector( 'tag:contains("●●●")' );
↑これは使用できません。 (Xpathなら取得できるのですが)
JavaScriptでIDやタグ(DOMオブジェクト)を取得するとき
jQueryを使わないJavaScript本体では ・getElementsByTagName ・getElementsByName ・getElementById の3つのメソッドが使用できます。
DOMオブジェクト取得時には取得の成否を判別する必要があります。
使い方は以下のとおりです。
<a href="#">テスト</a>
var obj_array = window.document.getElementsByTagName('a');
if (obj_array.length > 0){
alert('Aタグは存在します。');
for ( var i=0; i<obj_array.length; i++){
alert(obj_array[i].innerText);
}
}
else{
alert('Aタグは存在しません。');
}
<input type="text" name="hoge_name">
if (window.document.getElementsByName("hoge_name").length > 0){
alert('name="hoge_name"のタグが存在します。');
}
if (window.document.getElementsByName("fuga_name").length > 0){
alert('name="fuga_name"のタグが存在します。');
}
else{
alert('name="fuga_name"のタグが存在しません。');
}
<div id="hoge_id"></div>
if (window.document.getElementById("hoge_id")){
alert('id="hoge_id"のタグが存在します。');
}
if (window.document.getElementById("fuga_id")){
alert('id="hoge_id"のタグが存在します。');
}
else{
alert('id="hoge_id"のタグが存在しません。');
}
' 先頭がクォーテーションはコメントと見なされます
' コメント
' コメント
WAIT SECONDS=2
SET !REPLAYSPEED SLOW
SET !REPLAYSPEED MEDIUM
SET !REPLAYSPEED FAST
SLOW : 2秒待つ
MEDIUM : 1秒待つ
FAST : 0秒待つ(待たない。)
マクロ「mymacro.iim」を実行します。
imacros://run/?m=mymacro.iim
実は拡張子 .js のマクロも実行できます
imacros://run/?m=mymacro.js
フォルダ「myfolder」の中に入った「mymacro.iim」を実行するには「/」を「%5C」で置き換えます
imacros://run/?m=myfolder%5Cmymacro.iim
Aタグを使ってHTMLから起動することもできます
<a href="imacros://run/?m=myfolder%5Cmymacro.iim">マクロ起動</a>
var test;
test = "CODE:";
test += "URL GOTO=www.google.com \n";
var rt = iimPlay(test);
alert(rt); // 1 以下の時エラー
window.content.document.getElementById("xxx");
window.console.log( 'TEST!!!' );
SET !ERRORIGNORE YES
(ステップごとのタイムアウトを 2秒 に設定する)
SET !TIMEOUT_STEP 2
(ページ読み込みのタイムアウトを 1秒 に設定する)
SET !TIMEOUT_PAGE 1
(スペースの代わりに <SP> を入力します。)
TAG POS=1 TYPE=INPUT:TEXT FORM=ACTION:myform.php ATTR=* CONTENT=日本語<SP>太郎
普通に xpath が使えます (xpath式はダブルクォーテーションで囲むこと)
TAG XPATH="//*[@id='my_id']/tr/td[3]/div/a"
firefoxで新規ウィンドウをタブで開く場合 target="_blank" をマクロで踏むとタブ番号がおかしくなりその後のマクロでエラーが出ることがあります。 この場合はリンクを押す代わりにリンク先を取得して imacros で画面遷移しましょう
http://qiita.com/nori4k/items/2e55bc346062d5c490b8
リファレンス http://imacros.doorblog.jp
ドラッグ、ドロップでテーブルやリスト要素を順番変更する【jQuery UI Sortableモジュール】というのがあります。
■ JQUERY SORTABLE
http://jqueryui.com/demos/sortable/
http://jqueryui.com/download ←ダウンロードはこちら
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.xxxxx.js"></script> <script type="text/javascript"> $(function(){ $("#sortable").sortable({ update: function(event, ui) { var data = $("#sortable").sortable("serialize"); var data2 = $('#sortable').sortable('toArray').toString(); alert(data); alert(data2); } }) .disableSelection(); }); <script>
<ul id="sortable"> <li id="list_1">ほげほげ</li> <li id="list_2">ふがふが</li> <li id="list_3">てすてす</li> </ul>
とするだけで、<li>要素がドラッグ&ドロップで順番入れ替えできます。
入れ替え後のデータは data(PHP用) , data2(CSV形式) に入るのでそれをプログラムに渡すといいでしょう。
DOMプロパティ一覧
attributes[] 〔ノードの属性リストを取得〕
childNodes[] 〔子ノードのリストを取得〕
className 〔クラス名の取得・設定〕
dir 〔テキスト・ディレクションの取得・設定〕
firstChild 〔最初の子ノードを取得〕
id 〔ID名の取得・設定〕
innerHTML 〔ノード内のHTML要素の取得・設定〕
innerText / textContent 〔ノード内のプレーンテキストの取得・設定〕
lang 〔言語コードの取得・設定〕
lastChild 〔最後の子ノードを取得〕
localName 〔ローカル名の取得〕
namespaceURI 〔名前空間のURIの取得〕
previousSibling/nextSibling 〔直前・直後にある兄弟ノードを取得 :: Mac風OSメニュー〕
nodeName 〔ノードの名前を取得〕
nodeType 〔ノードの型を取得〕
nodeValue 〔ノードの値を取得〕
ownerDocument 〔オーナードキュメントを取得〕
parentNode 〔親ノードを取得〕
prefix 〔名前空間の識別子を取得〕
tagName 〔タグ名の取得・設定〕
title 〔タイトル属性の取得・設定〕
JavaScriptでDOM操作を行うときはDOMツリーの完成を待ってから処理を行う必要があるため
window.onload を待って処理を行う必要があります。
しかし window.onload は全てのファイルの読み込み完了時に発生するイベントなので、DOMツリーの完成だけを待っている場合画像の読み込み等も待たなくてはならず、無駄が生じます。
そこでDOMツリーの完成を待つイベントを発生させるライブラリ domready.js ↓
[window.onload 前でも DOM 処理が可能なら通知してくれる domready.js - METAREAL](http://weblog.metareal.org/2007/07/10/domready-js-cross-browser-ondomcontentloaded/)
Event.domReady.add(function() { alert('DOMツリーの読み込みが完了しました'); });
$(document).ready(function(){ alert('DOMツリーの読み込みが完了しました'); });
jQuery.event.add(window, "load", function(){ alert('全てのデータの読み込みが完了しました'); });
YAHOO.util.Event.onDOMReady( alert('DOMツリーの読み込みが完了しました') );
document.observe('contentloaded', function() { alert('DOMツリーの読み込みが完了しました'); });
window.addEvent('domready', function() { alert('DOMツリーの読み込みが完了しました'); });
意外に登場する機会が多いので関数として登録しておく
// make_hidden : hiddenを作成する : Version 1.1 function make_hidden( name, value, formname ){ var q = document.createElement('input'); q.type = 'hidden'; q.name = name; q.value = value; if (formname){ document.forms[formname].appendChild(q); } else{ document.forms[0].appendChild(q); } }
使い方:引数は( '名前' , '値', 'フォーム名' )
make_hidden('id', '1234');
とすると
<input type="hidden" name="id" value="1234">
が作成されます。
またHTMLファイル内に複数の<form>タグが存在する場合はフォーム名を指定して呼び出せばOK。
<form name="FM"></form> <form name="SFM"></form>
の二つのフォームが存在する場合
make_hidden('id', '1234', 'SFM');
とすると name="SFM" の方にhiddenが作成されます
また作成した hidden 属性を削除するには以下の関数を使用します
// delete_hidden : hiddenを削除する : Version 1.1 function delete_hidden( name, value, formname ){ var dom_obj_array = window.document.getElementsByName(name); for (var i=0; i<dom_obj_array.length; i++){ if ( dom_obj_array[i].value === value ){ element = dom_obj_array[i]; element.parentNode.removeChild(element); } } }
DOM要素をJavaScriptで削除するには次のようにします。
次のような html 構造になっている場合
<div id="hoge">
<div id="aaa">テストA</div>
<div id="bbb">テストB</div>
<div id="ccc">テストC</div>
</div>
id="hoge" を削除するには
_delete_element('hoge');
function _delete_element( id_name ){
var dom_obj = document.getElementById(id_name);
var dom_obj_parent = dom_obj.parentNode;
dom_obj_parent.removeChild(dom_obj);
}
子要素 id="aaa" id="bbb" id="ccc" を削除するには次のようにします。
_delete_child_element('hoge');
function _delete_child_element( id_name ){
var dom_obj = document.getElementById(id_name);
while (dom_obj) dom_obj.removeChild(dom_obj.firstChild);
}
こちらにもっと詳しく書いてあります : ライブラリを使わない素のJavaScriptでDOM操作
デバッグ時には必ず出くわすのですが、DOMオブジェクトの中身を見たい!という時があります。
Firefox限定ですが便利。
var serializer = new XMLSerializer(); alert( serializer.serializeToString( dom_obj ) );
console.log( object )
console.log( Object.getPrototypeOf( $("#test01") ) ); console.log( Object.getPrototypeOf( document.getElementById('test01') ) );
とします。 jQueryの場合は【jQuery】、DOMオブジェクトの場合は 【HTML.......】と表示されます。
ただ、そもそもオブジェクト以外の者を渡した場合場合にエラーとなりますので、
if (Object.prototype.toString.call(my_obj)==='[object Object]'){ console.log(Object.getPrototypeOf( my_obj )); }
としてもいいです。
jq_obj = $("#test01"); console.group('jq_objの中身は↓'); console.log(Object.getPrototypeOf( jq_obj )); console.log(jq_obj); console.groupEnd();
とするとメッセージがグループ化されていい感じに見えます。
http://goo.gl/rXUKI
が便利です。
JKL.Dumper が便利です↓
http://www.kawa.net/works/js/jkl/dumper.html
使い方(オブジェクト hoge の中身をダンプする)
<script type="text/javascript" src="jkl-dumper.js"></script>
var hoge = [1,2,3,4,5]; alert( new JKL.Dumper().dump(hoge) );
便利!!!
◆ DOM Tool
http://goo.gl/qz5UKT
便利です。
htmlソースを入力して【Create DOM Statements】ボタンを押すと
DOM生成用のJavaScriptコードを吐いてくれます。
例:<div id="text"></div>というhtmlコードを JavaScript で実行したい。
HTML:
<div id="test"></div>
OUTPUT:
var div1=document.createElement('div'); div1.setAttribute('id','test');