HTML�ւ̃A�N�Z�X���@ - ���̑��̃^�O -

�@div�^�O�ȊO�̃^�O��id�������w�肵getElementById()�Ŋe�폈�����s�����Ƃ��ł��܂��i�T���v�������s�����j�Bbody�^�O�����l�ɏ������s�����Ƃ��ł��܂����Abody�^�O��getElementById()���Adocument.body�Ƃ��ăA�N�Z�X����邱�Ƃ���������܂��B�Ⴆ�Έȉ��̃T���v���͔w�i�F��ύX������̂ł��B�i���ۂ̃T���v�������s�����B���ӁF�X�^�C���V�[�g�łȂ������̃v���p�e�B�ɃA�N�Z�X���Ă��܂��B�X�^�C���V�[�g�ɂ‚��Ă͕ʍ��Ő������܂��j

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>document.body���g�����</title>
<script type="text/javascript"><!--
function setBGColor()
{
document.body.bgColor = "#ffffaf";
}
// --></script>
</head>
<body>
<h1>document.body���g�����</h1>
<form>
<input type="button" value="�w�i�F�����F�ɐݒ�" onClick="setBGColor()"><br>
</form>
</body>
</html>

�@body�^�O��id��t�����ꍇ�ɂ͈ȉ��̂悤�ɂȂ�܂��B�i�T���v�������s�����j

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>body��id���w�肵����</title>
<script type="text/javascript"><!--
function setBGColor()
{
document.getElementById("page0").bgColor = "#ffffaf";
}
// --></script>
</head>
<body id="page0">
<h1>body��id���w�肵����</h1>
<form>
<input type="button" value="�w�i�F�����F�ɐݒ�" onClick="setBGColor()"><br>
</form>
</body>
</html>

�@body�^�O��id��t���郁���b�g�͉��ł��傤���B�X�^�C���V�[�g�ł�body�^�O��id������U�邱�ƂłP�‚̃X�^�C���V�[�g�t�@�C���ŕ����̃y�[�W���C�A�E�g���Ǘ����邱�Ƃ��ł��܂��B���l�ɂP�‚�JavaScript�t�@�C���Ō•ʂ̃y�[�W�ɉ������������L�q���邱�Ƃ��ł��܂��B
�@��L�̃X�N���v�g�ł�body�^�O��bgColor�����ɃA�N�Z�X���Ă��܂������A�^�O�̑����ɃA�N�Z�X����ɂ͒��ڃv���p�e�B�����L�q����ȊO��setAttribute()���g�����Ƃ��ł��܂��B���ڃv���p�e�B���w�肷����@�ƈقȂ�A������ϐ��ɂ��邱�Ƃ��ł��郁���b�g������܂��BsetAttribute()�̍ŏ��̈����ɑ������A���̈����ɐݒ肷��l���w�肵�܂��B�i�T���v�������s�����j

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>setAttribute�ŏ���</title>
<script type="text/javascript"><!--
function setBGColor()
{
document.getElementById("page0").setAttribute("bgColor","#ffffaf");
}
// --></script>
</head>
<body id="page0">
<h1>setAttribute�ŏ���</h1>
<form>
<input type="button" value="�w�i�F�����F�ɐݒ�" onClick="setBGColor()"><br>
</form>
</body>
</html>

�@Ajax�ł̓^�O�����G�ɓ���q�ɂȂ邱�Ƃ�����܂��B�^�O������q�ɂȂ����ꍇ�̃A�N�Z�X���@�����Ă݂܂��傤�B�ȉ��̃T���v����div�^�O����div�^�O����������ꍇ�ł��B����div�^�O�ɂ܂Ƃ߂ăA�N�Z�X����ɂ�ID�����u���O+�A���ԍ��v�ɂ��Ă������@������܂��B���̂悤�ɂ����for���߂�getElementById()���g���Ĉȉ��̂悤�ɂ܂Ƃ߂�div�^�O�ɃA�N�Z�X���邱�Ƃ��ł��܂��B�ȉ��̃T���v���̓{�^�����N���b�N�����div�^�O���̕����𗐐��l�ɂ��܂��B�i�T���v�������s�����j

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>�A��ID���ŏ���</title>
<script type="text/javascript"><!--
function setLayerText()
{
targetName = "layer";
for (i=0; i<5; i++)
{
document.getElementById(targetName+i).innerHTML = Math.random();
}
}
// --></script>
</head>
<body>
<h1>�A��ID���ŏ���</h1>
<form>
<input type="button" value="���C���[���e�ύX" onClick="setLayerText()"><br>
</form>
<div id="layer0">���C���[ 0</div>
<div id="layer1">���C���[ 1</div>
<div id="layer2">���C���[ 2</div>
<div id="layer3">���C���[ 3</div>
<div id="layer4">���C���[ 4</div>
</body>
</html>

�@ID����t���邱�Ƃ��ł����getElemntById()�ʼn����ł��܂����Adiv�̓��e���p�ɂɏ�����������Ajax�ł͌����I�ł͂Ȃ���������܂���B�O�̏͂ł����XML�f�[�^��ǂݍ��ލۂɃm�[�h��H���ăf�[�^�ɃA�N�Z�X���܂����BgetElementById()�łȂ��ȉ��̂悤�ɂ��ăm�[�h�����ǂ��ăf�[�^�ɃA�N�Z�X������@������܂��B�i�T���v�������s�����j

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>�m�[�h�ŏ���</title>
<script type="text/javascript"><!--
function setLayerText()
{
targetName = "layer";
layObj = document.getElementById(targetName);
for (i=0; i<layObj.childNodes.length; i++)
{
if ((layObj.childNodes[i].nodeType == 1) && (layObj.childNodes[i].tagName == "DIV"))
{
layObj.childNodes[i].childNodes[0].nodeValue = Math.random();
}
}
}
// --></script>
</head>
<body>
<h1>�m�[�h�ŏ���</h1>
<form>
<input type="button" value="���C���[���e�ύX" onClick="setLayerText()"><br>
</form>
<div id="layer">
<div>���C���[ 0</div>
<div>���C���[ 1</div>
<div>���C���[ 2</div>
<div>���C���[ 3</div>
<div>���C���[ 4</div>
</div>
</body>
</html>

�@�m�[�h��H����@�ł͗ǂ��ꍇ������܂����A���G�ɂȂ��Ă��܂��ꍇ������܂��B������getElementsByTagName()�𗘗p���Ă݂܂��傤�B�����̃T�C�g��y�[�W�ł�document.getElementsByTagName()�ƋL�q����Ă��܂����A���̏ꍇdocument�I�u�W�F�N�g���ɂ���w�肳�ꂽ�^�O�������‚��̂������܂��B�‚܂�document�I�u�W�F�N�g����ɂ��ď����擾���Ă���킯�ł��B���̊��e��div�^�O�ɂ��邱�ƂŁA�q�v�f�i����q�j�ɂȂ��Ă���div�^�O��C�Ӄ^�O�ɃA�N�Z�X���邱�Ƃ��ł��܂��B��L�̃T���v����getElementsByTagName()���g���Δ��ɊȒP�ȃX�N���v�g�ɂȂ�܂��B�i���ۂ̃T���v�������s�����j

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>getElementsByTagName�ŏ���</title>
<script type="text/javascript"><!--
function setLayerText()
{
targetName = "layer";
layObj = document.getElementById(targetName);
divObj = layObj.getElementsByTagName("div");
for (i=0; i<divObj.length; i++)
{
divObj[i].innerHTML = Math.random();
}
}
// --></script>
</head>
<body>
<h1>getElementsByTagName�ŏ���</h1>
<form>
<input type="button" value="���C���[���e�ύX" onClick="setLayerText()"><br>
</form>
<div id="layer">
<div>���C���[ 0</div>
<div>���C���[ 1</div>
<div>���C���[ 2</div>
<div>���C���[ 3</div>
<div>���C���[ 4</div>
</div>
</body>
</html>

�@��L�̂悤�ɂ���Ɗ�ƂȂ�^�O��ύX���邱�ƂŔėp�����o�܂��B��ƂȂ�I�u�W�F�N�g���֐��̈����Ƃ��ēn���悤�ɂ��邱�Ƃ��ł��邽�߂ł��B�i�������̓��\�b�h��v���p�e�B�Ƃ��ăI�u�W�F�N�g�ɐݒ肷��j�BgetElementsByTagName()��document.getElementById()�����܂����p���܂��傤�B

�@�����ł̓X�^�C���V�[�g�ւ̃A�N�Z�X�ɂ‚��Đ������܂��B

[��܏́@6:�X�^�C���V�[�g�ւ̃A�N�Z�X���@��]
[�ڎ���]

(2006.1.12)