JavaScript��HTML���_�C�i�~�b�N�ɏ���������@����FDOM�̊�{���w�ڂ��i7�j�i1/3 �y�[�W�j

�@�O��́uJavaScript��HTML���_�C�i�~�b�N�ɏ���������@�O���v�ł́A�^�O�v�f��lj�����e�N�j�b�N��������܂����B����͂��̑����ŁA�v�f�̍폜�A�����Ȃǂ̎�舵����������܂��B

�{�A�ڂ́A�\�t�g�o���N�N���G�C�e�B�u���s�́w�W��DOM�X�N���v�e�B���O�x�̂����u��2�� DOM�̊�{�v���A���Ђ̋��‚𓾂ē]�ڂ�����̂ł��B

�{���́ADOM�iDocument Object Model�j��JavaScript�̊֌W�𕪂���₷��������Ă��܂��B����ɁAJavaScript����DOM����āA�����ɂ���HTML��XML�̑��삪�ł���̂����Љ�Ă��܂��B�܂������̂��Ƃ��w�тȂ���A�N���X�u���E�U�΍�̏d�v���������ł���悤�ɂȂ�Ǝv���܂��B

�Ȃ��A Web�ł̘A�ڂƂ��ē]�ڂ���ɓ�����A�኱�\����ύX���Ă���_������܂��i�Ⴆ�΁u�{���́v�Ƃ��Ă��镔���́u�{�A�ڂ́v�Ƃ��Ă��邱�Ƃ�}�łȂǂ̏ȗ��Ȃǁj�B���̓_���������������B

�y�����y�[�W�ցz

�v�f���폜����iremoveChild�j

�@���ł�HTML���ɑ��݂��Ă���v�f���폜����ꍇ�ɂ́AremoveChild���\�b�h���g���܂��B���\�b�h�������Ă��킩�肩�Ǝv���܂����A�q�v�f���폜���郁�\�b�h�ł��̂ŁA��قǂ�insertBefore���\�b�h�Ɠ��l�ɍ폜�Ώۂ̗v�f�̐e�v�f���K�v�ɂȂ�܂��B

�@removeChild���\�b�h�ɂ́A�폜�������v�f�̃m�[�h�I�u�W�F�N�g�������ɗ^���܂��B

removeChild.html
<div id="toc">
�@ <div id="chapter1">DOM</div>
�@ <div id="chapter2">CSS</div>
�@ <div id="chapter3">HTML</div>
</div>
<script type="text/javascript">
�@ /*�i1�jchapter2��DIV�^�O�̗v�f�m�[�h�I�u�W�F�N�g*/
�@ var targetNode = document.getElementById('chapter2');
�@ /*�i2�jchapter2��DIV�^�O�v�f���폜*/
�@ targetNode.parentNode.removeChild(targetNode);
</script>

�@�v�f�̍폜�́A������Q�Ƃ���m�[�h�I�u�W�F�N�g�����p�ӂł���΁A�ƂĂ��ȒP�ɏ����ł��܂��B

�@�i1�j�ł́Aid�����l��"chapter2"���Z�b�g���ꂽDIV�^�O�̗v�f�m�[�h�I�u�W�F�N�g��ϐ�targetNode�Ɋi�[���܂��B

�@�i2�j�ŁAremoveChild���\�b�h�̈�����targetNode��^���܂��B�e�v�f��targetNode.parentNode�ő�p���Ă��܂����Adocument.getElementById('toc')�ł����l�̌��ʂ������܂��B

�@removeChild���\�b�h�́A�����ɗ^�����v�f�m�[�h�I�u�W�F�N�g���ۂ��ƍ폜���܂��B���[�̃m�[�h���珇�ɍ폜����K�v�͂���܂���B�Ⴆ�΁A�T���v����HTML���ׂĂ��폜�������ꍇ�́A�i1�j�����̂悤�ɏ��������邾���Ŏ����ł��܂��B

�@var targetNode = document.getElementById('toc');

�v�f��u��������ireplaceChild�j

�@�������̗v�f���܂������ʂ̗v�f�ɒu��������ɂ́AreplaceChild���\�b�h���g���܂��BreplaceChild���\�b�h�͎q�v�f��u�������郁�\�b�h�ł��̂ŁA�ΏۂƂȂ�v�f�̐e�v�f�̃m�[�h�I�u�W�F�N�g���K�v�ł��B

�@replaceChild���\�b�h��2�‚̈�����^���܂��B1�–ڂɂ͐V���ɒu��������v�f�m�[�h�I�u�W�F�N�g�ŁA2�–ڂɂ͑ΏۂƂȂ�v�f�m�[�h�I�u�W�F�N�g�ł��B

�@�T���v���Ŏg���������Ă����܂��傤�B

replaceChild.html
<div id="toc">
<div id="chapter1">DOM</div>
<div id="chapter2">CSS</div>
<div id="chapter3">HTML</div>
</div>
<script type="text/javascript">
/*�i1�jchapter3��DIV�^�O�v�f�̃m�[�h�I�u�W�F�N�g*/
var targetNode = document.getElementById('chapter3');
/*�i2�j�V����DIV�^�O���쐬*/
var newNode = document.createElement('div');
var textNode = document.createTextNode('�t�^A');
newNode.appendChild(textNode);
newNode.id = 'appendixa';
/*�i3�jchapter3��DIV�^�O��u��������*/
targetNode.parentNode.replaceChild(newNode, targetNode);
</script>

�@���̃T���v���ł́A

�@<div id="chapter3">HTML</div>

���A

�@<div id="appendixa">�t�^A</div>

�ɂ�������u�������܂��B

�@�i1�j�ł́A�u�������̑ΏۂƂȂ�DIV�^�O�̗v�f�m�[�h�I�u�W�F�N�g���AtargetNode�Ɋi�[���܂��B

�@�i2�j�ł́A�V���ɒu��������v�f�m�[�h�I�u�W�F�N�g�𐶐����AnewNode�Ɋi�[���܂��B

�@�i3�j�ŁAtargetNode��newNode�ɂ�������u�������܂��B���̒i�K�ŁAHTML���؂�ւ��܂��B