ソース掲示板




すべてから検索

キーワード   条件 表示 現行ログ 過去ログ トピックス 名前 本文

  メンテナンス 前画面に戻る

対象スレッド 件名: HTML内のリンクを取得する方法の解説
名前: lightbox
処理選択
パスワード

件名 HTML内のリンクを取得する方法の解説
名前 lightbox
コメント
[[前提条件として以下のコードを HTML 内に貼り付ける]]
@DIV
<SCRIPT 
	language="javascript"
	type="text/javascript"
	src="http://lightbox.in.coocan.jp/prototype.js">
</SCRIPT>
<SCRIPT 
	language="javascript"
	type="text/javascript"
	src="http://lightbox.in.coocan.jp/getnode.js">
</SCRIPT>
@END
↓リファレンス
http://lightbox.matrix.jp/ginpro/patio.cgi?mode=view2&f=21&no=4&type=ref


1) BODY タグ内の任意の範囲のテキストを取得。
@DIV
<TEXTAREA
	id="data"
	cols="120"
	rows="15"
></TEXTAREA>
@END
  上記定義に対して以下を実行

@DIV
var str = $("data").value;
@END


2) DIV の innerHTML に取得した HTML をセットして、dom で使えるようにする。
@DIV
<DIV id="base" style='display:none'></DIV>
@END
  上記定義に対して以下を実行

@DIV
$("base").innerHTML = str;
@END


3) ノードオブジェクトを作成して一覧よりデータを取得
@DIV
// ノード処理オブジェクト作成( id=base がターゲット )
var n = new Node( "base" );
// DIV 内の A のリストを取得
n.child("A");

// 一覧よりデータ作成
var range;
if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
}
else {
	range = document.createRange();
}
var str = "";
while( n.next() ) {

	if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
		str += n.node.innerText + ",";
		str += n.att("href") + ",";
		str += n.att("target");
	}
	else {
		range.selectNode( n.node );
		str += range.toString() + ",";
		str += n.att("href") + ",";
		if ( n.att("target") == null ) {
		}
		else {
			str += n.att("target");
		}
	}
	obj = document.createTextNode(str);
	$("sql").appendChild(obj);
	$("sql").innerHTML = $("sql").innerHTML + "<br>\n";
	str = "";

}
@END

[[
データとして、テキストのみを取得する為に工夫されています。
IE では、innerText を使い、IE 以外では range オブジェクトを使用しています。
]]


以下は、getnode.js の内容です。
@DIV
var Node = Class.create();
Node.prototype = {   
  initialize : function(element) {
    this.cur = -1;
    var len = arguments.length;
    switch( len ) {
      case 1:
        this.nodes = new Array(1);
        this.nodes[0] = $(element);
        this.length = 1;
        this.node = $(element);
        break;
      case 2:
        this.nodes = document.getElementsByTagName(element);
        this.length = this.nodes.length
        this.node = this.nodes[arguments[1]];
        this.cur = arguments[1]-1;
        break;
    }
    this.nodes = document.getElementsByTagName(element);
  },
  row : function( nIdx ) {
    this.node = this.nodes[nIdx];
  },
  child : function( element ) {
    this.nodes = this.node.getElementsByTagName(element);
    this.length = this.nodes.length
    var len = arguments.length;
    switch( len ) {
      case 1:
        this.node = this.nodes[0];
        this.cur = -1;
        break;
      case 2:
        this.node = this.nodes[arguments[1]];
        this.cur = arguments[1]-1;
        break;
    }
  },
  html : function() {
    return this.node.innerHTML;
  },
  next : function(obj) {
    this.cur++;
    if ( this.cur+1 > this.length ) {
        this.cur--;
        return false;
    }
    this.node = this.nodes[this.cur];
    return true;
  },
  text : function() {
    try {
       var work = this.node.firstChild.nodeValue;
       if ( work == null ) {
         return "";
       }
       else {
         return this.node.firstChild.nodeValue;
       }
    }
    catch ( e ) {
      return "";
    }
  },
  att : function() {
    try {
       var work = this.node.getAttribute(arguments[0]);
    }
    catch ( e ) {
      return "";
    }
     return work;
  }
};
@END