RailsなしのナマAjaxメモ - ミームの死骸を待ちながら

とりあえず基本は

$("result").innerHTML = responseHttpObj.responseText;でdiv id="result"のとこにtextなHTML埋め込まれ。画像も同様。
が、innerHTMLではdiv内すべて書き換えてしまうので、オブジェクトをノードにしてみる。

第五章　クライアントサイドの技術：HTMLへのアクセス方法 - div -

function outHTML()
{
imageObj = document.createElement("img");
imageObj.setAttribute("src", "dog.jpg");
document.getElementById("subContent").appendChild(imageObj);
}
// --></script>

createElement()で出力タグを生成、setAttribute()で属性値、document.getElementByIdで"subContent"divに、imageObj(すぐ上で指定)をappendChild（ノードとしてdivタグ内に追加）。子オブジェクトの操作は少し下に書く。

あとはbody中のイベント(clickとか)でonClick="outHTML()"と呼び出してやる。
if(divObj.hasChildNodes() == falseとかやれば、子のない場合のみ追加に。他にcloneNode(), replaceChild()とか。

スタイルシートにアクセス。

アクセスは当然ながらスタイルシート指定しとかないと動かない

<link rel="stylesheet" href="main.css" type="text/css" madia="all">

とか。
positionはabsolute, relative, static(HTMLレイアウト), fixed(ブラウザ座標)が指定可。CSSで決めとく。fixedはブラウザによってはできんかも。body中でsetPos(x, y)とやる。

マウスに付いてくるヤツは、

<!--
function setPos(evt)
{
	if (document.all)
	{
		x = event.x;
		y = event.y;
	}else{
		x = evt.pageX;
		y = evt.pageY;
	}
	document.getElementById("mainContents").style.left = x;
	document.getElementById("mainContents").style.top = y;
}
window.onload = function()
{
	window.document.onmousemove = setPos;
}
// -->

とsetPos関数を設定して、windowが読まれたら(onload)onmonsemoveというイベントに対しsetPos関数を呼んでる。動くたびに座標を取得し、mainContentsっつーdivをその場所に移動させてるわけか。

子から親オブジェクト情報を取得するにはparentNode。

pObj = document.getElementById("child").parentNode;

とすればpObjに親が入る。pObj.idをinnerHTMLで入れたりできる。idは使いどころ無いか。pObj.style.somethingとかか。
これを使えば親のdivに依存せず(ラインを越えて)マウス追跡とか。
逆に、親divから出たら非表示、にすることも。CSS内でclip記述する。it goes as follow

#mainContents {
hogehoge
 clip:rect(0px 402px 302px 0px);
}

ただブラウザごとに違ってくるので、
overflow:scroll（あるいはhidden）とか設定した方が吉、らしい。

イベント

マウス関連がclick, dbclick, mousedown, mouseup, contextmenu(右クリックするとアラート出るのこれか), mouseover, mouseout, mousemove。
ページはload, move。入力フォームはsubmit, reset, change, focus, blur(フォーカス無くなったとき)。いずれもonHogeEventで記述。

ここで、HTMLのタグ内にイベント追加するとアクセシビリティ低下するので、sctipt内で

Obj.onhogeevent = sth

とする。小文字がポイント。イベント解除はsthにnull入れる

Internet Explorer, Firefox, Safari, Operaで動作するマウス座標を取得するスクリプト
 第五章　クライアントサイドの技術：マウスの座標を取得する

window.document.onmousemove = getMouseXY;
function getMouseXY(evt)
{
// x,yとpageX,Y
if (window.createPopup)
{
x = event.x + document.body.scrollLeft;
y = event.y + document.body.scrollTop;
}else{
x = evt.pageX;
y = evt.pageY;
}
document.getElementById("result1").innerHTML = "(x,y) = "+x + ", "+y;
// offsetX,YとlayerX,Y
if (document.all)
{
cx = event.offsetX;
cy = event.offsetY;
}else{
cx = evt.layerX;
cy = evt.layerY;
}
document.getElementById("result2").innerHTML = "(offsetX,offsetY) = "+cx + ", "+cy;
}