JavaScriptプログラムに関する各種メモ書き:タグ「DOM」での検索

JavaScript の querySelector の書式入門

jQueryが使えない環境やメモリ的にjQueryを使用したくない場合のDOMセレクターにJavaScriptのquerySelectorがとても便利に使えます。

jQueryが使えないiMacros環境でも使用できます。

querySelector()  : セレクターに最初の要素ひとつを返す
querySelectorAll() : セレクターに合致した全ての複数の要素を返す。(DOMオブジェクトの配列で返る)

● JavaScript クエリセレクタの使い方例

・ID・クラス名で指定

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なら取得できるのですが)

・xpathとクエリセレクタの変換

http://bit.ly/2b5BzLI
http://bit.ly/2bht2by

No.1050
08/31 14:09

edit

iMacros
jQuery
DOM
xpath

JavaScript の getElement系メソッドによる HTMLタグ(DOMオブジェクト)の取得

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"のタグが存在しません。');
}
No.979
10/23 16:34

edit

フォーム
DOM
jQuery

ブラウザ自動運転マクロ、iMacrosの細かいテクニック

・コメントアウト【 .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

No.971
04/25 18:31

edit

iMacros
エラー対処
DOM
Firefox

ドラッグ、ドロップで要素を順番変更するjQuery UI Sortableモジュール

ドラッグ、ドロップでテーブルやリスト要素を順番変更する【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({
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形式) に入るのでそれをプログラムに渡すといいでしょう。

No.713
03/30 14:09

edit

jQuery
DOM
Ajax

DOMプロパティ

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

No.557
05/28 01:07

edit

DOM

window.onload 前でも DOM 処理が可能なら通知してくれる domready.js

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/)

domready.js 記述方法

Event.domReady.add(function() {
       alert('DOMツリーの読み込みが完了しました');
});

ちなみに jQuery では $(document).ready() で実装されています。

$(document).ready(function(){
       alert('DOMツリーの読み込みが完了しました');
});

jQueryで $(window).load() と同じ動作をさせる

jQuery.event.add(window, "load", function(){
       alert('全てのデータの読み込みが完了しました');
});

YUIでは onDOMReadyで実装されています。

YAHOO.util.Event.onDOMReady( alert('DOMツリーの読み込みが完了しました') );

prototype.jsでは Version 1.6以降 で contentloaded というメソッドで実装されています

document.observe('contentloaded', function() {
    alert('DOMツリーの読み込みが完了しました');
});

MooTools では domready イベントで実装されています

window.addEvent('domready', function() {
    alert('DOMツリーの読み込みが完了しました');
});
No.550
07/17 13:20

edit

DOM
jQuery
prototype.js
YUI

JavaScript で hidden属性<input type=”hidden” name=”name” value=”value”>を作成する

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

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

// 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 属性を削除するには以下の関数を使用します

■ hidden属性を削除する make_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);
		}
	}
}
No.540
11/27 15:23

edit

DOM
フォーム

DOM要素(<div>タグ)をJavaScriptで削除する

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

No.512
06/14 09:36

edit

DOM

DOMオブジェクト・jQueryオブジェクト をダンプ(テキスト表示)する。

デバッグ時には必ず出くわすのですが、DOMオブジェクトの中身を見たい!という時があります。

・DOMオブジェクトの中身を確認したいときには以下のようにします。

Firefox限定ですが便利。

var serializer = new XMLSerializer();
alert( serializer.serializeToString( dom_obj ) );

・Safari、Chrome, Firefox でオブジェクトの中身を確認したいときには以下のようにします。(出力は「エラーコンソール」)

console.log( object )

Chrome, Firefox でオブジェクトの中身が DOMオブジェクトなのか jQueryオブジェクトなのかを確認したいときは

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 )); }

としてもいいです。


どうせなら groupメソッドを使って

jq_obj =  $("#test01");

console.group('jq_objの中身は↓');
console.log(Object.getPrototypeOf( jq_obj ));
console.log(jq_obj);
console.groupEnd();

とするとメッセージがグループ化されていい感じに見えます。


・jQueryオブジェクトをダンプしたい場合は

http://goo.gl/rXUKI

が便利です。

・その他のオブジェクト(JSON等)、配列、連想配列などをダンプしたい場合は

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) );

便利!!!

No.510
06/13 17:25

edit

DOM
json
配列
jQuery

htmlソースからDOM生成用のJavaScriptコードを吐くツール【DOM Tool】

◆ 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');

No.509
03/18 10:19

edit

DOM