JavaScriptでIDやタグ（DOMオブジェクト）を取得するとき

jQueryを使わないJavaScript本体では ・getElementsByTagName ・getElementsByName ・getElementById の3つのメソッドが使用できます。

DOMオブジェクト取得時には取得の成否を判別する必要があります。

使い方は以下のとおりです。

■ document.getElementsByTagName（タグ名による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タグは存在しません。');
}

■document.getElementsByName（name属性によるDOMオブジェクトの取得）

<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"のタグが存在しません。');
}

■document.getElementById（ID名によるDOMオブジェクトの取得）

<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"のタグが存在しません。');
}

・コメントアウト【 .iim ファイル】

' 先頭がクォーテーションはコメントと見なされます
' コメント 
' コメント

・2秒間ウェイトする（待つ）【 .iim ファイル】

WAIT SECONDS=2

・全てのコマンド実行時に x秒間ウェイトする（待つ）【 .iim ファイル】

SET !REPLAYSPEED SLOW
SET !REPLAYSPEED MEDIUM
SET !REPLAYSPEED FAST

SLOW　　 :　2秒待つ
MEDIUM　:　1秒待つ
FAST　　  :　0秒待つ（待たない。）

・コマンドライン（URL,検索バー）からの実行

マクロ「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>

・JavaScriptからのマクロ実行【 .js ファイル】

var test;
test = "CODE:";
test += "URL GOTO=www.google.com \n";
var rt = iimPlay(test);
alert(rt); // 1 以下の時エラー

・iMacrosの .js からDOMオブジェクトを操作する【 .js ファイル】

window.content.document.getElementById("xxx");

・iMacrosの .js からconsole.log で出力する【 .js ファイル】

window.console.log( 'TEST!!!' );

・iMarcorsにエラーがあった時に止まらないようにする

SET !ERRORIGNORE YES

・iMacrosの1命令ごとのタイムアウトを設定する

（ステップごとのタイムアウトを 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 が使えます （xpath式はダブルクォーテーションで囲むこと）

 TAG XPATH="//*[@id='my_id']/tr/td[3]/div/a"

・target="_blank" のリンクでウィンドウを開くとタブ番号がおかしくなる

firefoxで新規ウィンドウをタブで開く場合 target="_blank" をマクロで踏むとタブ番号がおかしくなりその後のマクロでエラーが出ることがあります。 この場合はリンクを押す代わりにリンク先を取得して imacros で画面遷移しましょう

・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 ←ダウンロードはこちら

js

<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({
revert: true ,
cursor   : 'move' ,
tolerance: 'pointer' ,
update: function(event, ui) {
    var data  = $("#sortable").sortable("serialize");
    var data2 = $('#sortable').sortable('toArray').toString();
    alert(data);
    alert(data2);
}
})
.disableSelection();
});
<script>

html

<ul id="sortable"> 
<li id="list_1">ほげほげ</li> 
<li id="list_2">ふがふが</li> 
<li id="list_3">てすてす</li> 
</ul>

とするだけで、＜li＞要素がドラッグ&ドロップで順番入れ替えできます。
入れ替え後のデータは data（PHP用） , data2（CSV形式） に入るのでそれをプログラムに渡すといいでしょう。
オプションは

revert: true , // アニメーションあり
cursor   : 'move'  // 移動中は十字カーソルに変更,
tolerance: 'pointer' , // 要素が重なった瞬間に入れ替え判定

がオススメです。

オプションの解説 : http://cly7796.net/wp/javascript/try-the-sortable-of-jquery-ui/

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プロパティ | PHP & JavaScript Room

意外に登場する機会が多いので関数として登録しておく

● hidden属性を作成する make_hidden()

/**
 * make_hidden : hiddenを作成する : Version 1.2
 */
function make_hidden(name, value, formname) {
    var q = document.createElement('input');
    q.type = 'hidden';
    q.name = name;
    q.value = value;
    if (formname) {
    	if ( document.forms[formname] == undefined ){
    		console.error( "ERROR: form " + formname + " is not exists." );
    	}
    	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 属性を削除するには以下の関数を使用します

● hidden属性を削除する delete_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);
		}
	}
}

● hidden属性を作成する make_hidden() （既にある存在するフォーム名で作成しようとするとスキップ）

function make_hidden(name, value, formname, override_flag) {
  var q = document.createElement('input');
  q.type = 'hidden';
  q.name = name;
  q.value = value;
  var form_dom;
  if (formname) {
    form_dom = document.forms[formname];
  } else {
    form_dom = document.forms[0];
  }

  if ( ! override_flag ) {
    if (form_dom[name]) {
      console.log('フォーム(' + name + ')が既に存在するのでhiddenを作成しません。');
      return false;
    }
  }

  form_dom.appendChild(q);
  return true;
}

● jQueryを使用してhidden属性を作成する

$('<input>').attr({
    type    : 'hidden',
    name    : 'redirect_url',
    value   : redirect_url
}).appendTo('#after12_form');

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操作