DOM�ŗv�f���擾����̂ɁA�ώG�Œ����L�q�͂����s�v�B�V���v����CSS�Z���N�^�̍\�����g���ĊȒP�Ɏ擾�ł���B
powered by Insider.NET
�@�]���AJavaScript�ł́A�ȉ��̂悤�ȃ��\�b�h�𗘗p���āA����Ώۂ̗v�f����肵�Ă����B
�@�������A���̕��@�ŕ��G�ȍ\����HTML��������v�f�����o���ꍇ�A�R�[�h�����G�ɂȂ�₷���Ƃ����ۑ���������B�Ⴆ�A�ȉ��͏]����getElementXxxxx���\�b�h�𗘗p�����v�f�̎擾�Ⴞ�B
// ��Ԗڂ�<li>�v�f���擾�����
var li = document.getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
if (i % 2 == 0)
li[i].style.background = "yellow";
}
�@��L��JavaScript�R�[�h�ł́A��Ԗڂ̗v�f����肷�邽�߂ɑS�ẴC���f�b�N�X�ԍ���if���Ŕ��肳���Ă���B�ق��ɂ������l��class�����ɂ���ėv�f���i�荞�ނȂ�A�����悤�Ȕ��莮���������o�����ǎҏ����ɂ����邾�낤�B�u�����ƊȒP�ɓ���v�f���擾�ł���v�u�d���������\�Ȍ�����������v�ƒN�����v�����͂����B�@�����ō����ł́A�u�Z���N�^�v�ƌĂ��L�@�����p�����ꂪ�����Ă��Ă���B�Z���N�^�Ƃ́AHTML���������̗v�f���A�K�w�\����class�i�N���X�j�⑮���A���ԂȂǂ̏����Ŏ擾���邽�߂̃N�G���̂��ƁB��������CSS�ł͗��p����Ă���L�@���B�O�����C�u�����ɂ͂Ȃ邪�AjQuery�ł��Z���N�^���g�p���邱�ƂŁAclass��ID�Ȃǂ��w�肵�ăV���v���ɗv�f�ɃA�N�Z�X�ł���B�@������HTML5�ł����悢��A�W���̎d�l�Ƃ��ăZ���N�^API����`���ꂽ�B�Z���N�^API�́uCSS�Z���N�^�Ƀ}�b�`�����v�f���擾���邽�߂̃��\�b�h�v���B����𗘗p���邱�ƂŁAjQuery�ɗ��邱�ƂȂ��A�W���I��JavaScript�݂̂�jQuery�̂悤�ȗv�f�̎擾���ł���悤�ɂȂ�B
�@�udocument.getElementXxxxx�v�Ƃ����L�q���Z���N�^API�ւƒu�������Ă������ƂŁAJavaScript�R�[�h�̗ʎ��̂��팸�������߁A�ێ琫�A�ǐ������シ��Ƃ��������b�g�����邾�낤�B
�@�Ȃ��A�Z���N�^API��Level 1��Level 2�ɕ��ނ���Ă��邪�A�{�e�ł͌��݂̎�v�u���E�U�Ŏ����ς݂ƂȂ�Level 1�ɂ��ĉ������B�܂��̓Z���N�^API�̎��������A�Z���N�^API�͎��̕\�̂Ƃ���A���݁A�����[�X����Ă����v�u���E�U�ł͂قƂ�ǎ����ς݂��B
�u���E�U | �Ή��o�[�W���� |
---|---|
Internet Explorer | 8�ȍ~ |
Firefox | 3.5�ȍ~ |
Chrome | 4�ȍ~ |
Safari | 3.1�ȍ~ |
Opera | 10.0�ȍ~ |
��v�u���E�U�ɂ�����Z���N�^API Level 1�̎����� |
�@�Z���N�^API�͊ȒP�ɗ��p�ł��A�Y�������̃R�[�h���������肷��̂ŁAWeb�J���҂̐��Y�������߂�API�ƂȂ�B�Z���N�^API Level 1�ɂ�2��ނ̃��\�b�h�݂̂����݂���B���ꂼ��ȉ��̋@�\��ۗL���Ă���B
���\�b�h | �T�v |
---|---|
querySelector("CSS�Z���N�^") | CSS�Z���N�^���L�[�ɍŏ��ɊY�������m�[�h���擾 |
querySelectorAll("CSS�Z���N�^") | CSS�Z���N�^���L�[�Ƀ}�b�`�����S�Ẵm�[�h���m�[�h���X�g�i�ȉ��ANodeList�j�`���Ŏ擾 |
�Z���N�^API�̃��\�b�h�ƊT�v |
�@�Ȃ��AquerySelectorAll���\�b�h�͖߂�l�Ƃ���NodeList��Ԃ����A���̂Ƃ��擾�ł���NodeList�͐ÓI��NodeList�ƂȂ�B�ÓI�Ƃ́A���\�b�h���Ăяo�������_�ł̏�Ԃ��ێ�����邱�Ƃ��A�t�ɓ��I�Ƃ́A���\�b�h���Ăяo�������DOM�iDocument Object Model�j�̍\���ω������f����邱�Ƃ������B���I��NodeList�ł́A�Ăяo����̑���ɂ���Č��ʂ��ϓ�����\��������̂ŁA���ӂ��Ăق����B
�@�Z���N�^API Level 2�́ADOM���ŃZ���N�^��]���ł���悤��API�����낦�Ă���B���݂͊J���Ҍ��������[�X�łł̂ݎ������i��ł��邪�A�߂������A���p�ł���悤�ɂȂ�@�\�Ƃ��ē��̕Ћ��ɂł��u���Ă����Ƃ悢���낤�B
�@���݁A�\�肳��Ă���Z���N�^API Level 2�̃��\�b�h��3����B
�@�u:scope�v�́A�͈͂����肵����v�������s�����߂̋^���N���X�ł���B
���ǂ͈̔͂ɓK�p�����邩����肷��CSS�Z���N�^
�@�Z���N�^API��������Ɨ�������ɂ́A�܂�CSS�Z���N�^�̒m�����K�v�ɂȂ�B�܂��́ACSS�Z���N�^�ɂ��Ă����炢�����Ă݂悤�B�ȉ��́A�ȒP��CSS�̗�ł���B
p { font-style: italic; } �i1�j
.highlight { background-color: yellow; } �i2�j
�@������CSS���[���́A�Z���N�^�ƃv���p�e�B�̓K�p���琬�藧�B�i1�j�́A�S�Ă�<p>�v�f�̕�������C�^���b�N�̂ɂ��A�i2�j��class�������uhighlight�v�ł���v�f�ɑ��Ĕw�i�̐F�����F�ɂ���B�ȉ��ɁACSS3�Ŏg�p�ł����ȃZ���N�^���܂Ƃ߂Ă݂��B
�Z���N�^ | �Z���N�^�L�q�� | �T�v |
---|---|---|
���j�o�[�T���E�Z���N�^ | * | �S�Ă̗v�f�ɃX�^�C����K�p���� |
�^�C�v�E�Z���N�^ | a p div �i��L�̂悤��HTML�^�O�̖��O�j |
�L�q�����v�f�ɃX�^�C����K�p���� |
ID�Z���N�^ | #ID�� | �L�q����ID�ƈ�v����v�f�ɃX�^�C����K�p���� |
�N���X�E�Z���N�^ | .�N���X�l | �L�q�����N���X�ƈ�v����v�f�ɃX�^�C����K�p���� |
�O���[�v�E�Z���N�^ | h1, h2, h3 | �R���}���g�p���ĕ����̗v�f�ɃX�^�C�����ꊇ�K�p���� |
�q�Z���N�^ | div > p ul > li |
�u>�v���g�p���Đe�v�f�̒����ɂ���q�v�f�ɑ��ăX�^�C����K�p���� |
�^���N���X�E�Z���N�^ | :visited :hover �v�f:nth-child |
�L�q�����^���N���X�̗v�f�ɃX�^�C�����ꊇ�K�p���� |
�����Z���N�^ | input[type="email"] div[margin] |
�Y���̑����܂��́A�����Ƒ����l����v����v�f�ɑ��ăX�^�C����K�p���� |
CSS�Z���N�^�̎�ނƊT�v |
�@���ڂ��Ă������������̂́A�Ō�̑����Z���N�^���B�����Z���N�^�́A�v�f�Ŏ����ꂽ�����ɂ��či�荞�݂��s���B�ق��ɂ������Z���N�^�ɂ͑O����v�A������v�A�����v�ɂ��w����ł���B��{�I�ȍ\���͈ȉ��̂Ƃ��肾�B
�Z���N�^ | �擾����v�f |
---|---|
�v�f[����] | ���������݂���v�f |
�v�f[����='�����l'] | �����Ƒ����l����v����v�f |
�v�f[����^='val'] | �����l���uval�v�i���C�ӂ̕�����j����n�܂�v�f |
�v�f[����$='val'] | �����l���uval�v�ŏI���v�f |
�v�f[����*='val'] | �����l���uval�v���܂ޗv�f |
�����Z���N�^�̍\���� |
�@�����Z���N�^��ID��class�i�N���X�j�ȊO�ɂ��A�C�ӂ̑����ŗv�f�𒊏o�ł���̂��������B����ł́A���ۂ�CSS�Z���N�^���g�p���ăZ���N�^API���g�p�������Љ��B
��querySelector�^querySelectorAll���\�b�h�F�Z���N�^�ŖړI�̗v�f�����o��
�@��������́AquerySelector�^querySelectorAll���\�b�h�𗘗p�����A��̓I�ȃT���v�������Ă����B�T���v�����������玎�����̂ŁA�Z���N�^API����������Ă���u���E�U��œ����̊����Ă������������B�@�T���v�������s����ƁA�ӏ��������X�g�Ɖ摜���z�u���ꂽ�g���\�������B���X�g���̍��ڂ��N���b�N���邱�ƂŁA���ꂼ��̗v�f���ω�����B���s����̉�ʂ͐}1�̂Ƃ���B
�@���ۂ̏����̓��e�͈ȉ��̂Ƃ��肾�B
�c�c�ȗ��c�c
<p>�I���������ڂ̏����̎��s���A�I�������A���o���̂ݕ\�������܂��B</p>
<ul>
<li><a href="#" onclick="selectLi()" >3�ڂ�LI�v�f�̔w�i��ԂɕύX</a></li>
<li><a href="#" onclick="selectLiOdd()" >���LI�v�f�̔w�i�����ɕύX</a></li>
<li><a href="#" onclick="selectPadding()" >Padding�w��</a></li>
<li><a href="#" onclick="selctContents('animal')" >�����A���o��</a></li>
<li><a href="#" onclick="selctContents('meal')" >��H�A���o��</a></li>
<li><a href="#" onclick="selctContents('sweets')" >���َq�A���o��</a></li>
</ul>
<hr />
<!-- �i1�j<span>�v�f��<img>�v�f�ɂ�����ȈՃA���o�� -->
<h3 class="animal">�����A���o��</h3>
<span class="animal" style="width:700px; height:210px; display:block; background-color:green; padding:10px;">
<img src="cat1.jpg" />
</span>
<h3 class="meal">���уA���o��</h3>
<span class="meal" style="width:700px; height:300px; display:block; background-color:blue; padding:10px;">
<img src="�O�F��.jpg" />
<img src="�n���o�[�K�[.jpg" />
</span>
<h3 class="sweets">���َq�A���o��</h3>
<span class="sweets" style="width:700px; height:300px; display:block; background-color:yellow; padding:10px;">
<img src="�`�[�Y�P�[�L.jpg" />
<img src="�z�b�g�P�[�L.jpg" />
</span>
<h3 class="animal">�����A���o��2</h3>
<span class="animal" style="width:700px; height:210px; display:block; background-color:red; padding:10px;">
<img src="�F.jpg" />
</span>
<script type="text/javascript">
// �i2�j�����ɂ��Ă͂܂�<li>�v�f�ɔw�i�F���w��
function selectLi() {
// �^���N���X�ŁA3�ڂ�<li>�v�f���擾
var li = document.querySelector('li:nth-child(3)');
li.style.background = "red";
}
// �����ɂ��Ă͂܂�<li>�v�f�ɔw�i�F���w��
function selectLiOdd() {
// �^���N���X�ŁA���<li>�v�f���擾
var li = document.querySelectorAll('li:nth-child(odd)');
for (var i = 0; i < li.length; i++) {
li[i].style.background = "yellow";
}
}
// �i3�j<span>�v�f������<img>�v�f�Ƀp�f�B���O���w��
function selectPadding() {
// <span>�v�f������<img>�v�f��S�Ď擾
var img = document.querySelectorAll('span > img');
for (var i = 0; i < img.length; i++) {
img[i].style.padding = "15px";
}
}
// �i4�j�y�[�W��̃R���e���c�̕\���^��\���𐧌�
function selctContents(clsName) {
// <h3>�v�f��<span>�v�f��S�Ď擾
var hide = document.querySelectorAll('h3, span');
for (var i = 0; i < hide.length; i++) {
hide[i].style.display = "none";
}
// �������Ɏw�肳�ꂽ�N���X���̗v�f��S�Ď擾
var disp = document.querySelectorAll("." + clsName);
for (var i = 0; i < disp.length; i++) {
disp[i].style.display = "block";
}
}
</script>
�c�c�ȗ��c�c
�@����ł̓R�[�h�̐��������悤�B
�i1�j<span>�v�f��<img>�v�f�ɂ�����ȈՃA���o��
�@<span>�v�f��<img>�v�f�ɂ́A���ꂼ��class���ɃA���o�����Ƃ��ĕ�����₷�����̂�ݒ肵�Ă���B����͐ݒ肵���l���Z���N�^�Ƃ��ė��p����B
�i2�j�����ɂ��Ă͂܂�<li>�v�f�ɔw�i�F���w��
�@������́AquerySelector���\�b�h��querySelectorAll���\�b�h��p���ėv�f���擾���Ă���B
�@querySelector���\�b�h�́A�ŏ��ɊY�������v�f�݂̂��擾����B�uli:nth-child(3)�v�Ƃ���CSS�Z���N�^�́A�S�Ă�<li>�v�f�̂����A���̐e�v�f�i����L�̃R�[�h��ł�<ul>�v�f�j���猩��3�Ԗڂ̎q�v�f�ƂȂ�<li>�v�f�i������̗�ł́uPadding�w��v�Ƃ������X�g���ځj���擾���A���̌�̃R�[�h�ɂ�肻�̗v�f�̔w�i�F��ݒ肵�Ă���B
�@querySelectorAll���\�b�h�́A�Y������v�f�S�Ă�NodeList�Ŏ擾����BCSS�Z���N�^�͏�L�Ɠ��l�̋L�ڂ����Ă��邪�A�������̕����ɂ͊���w���uodd�v��p���Ċ�Ԗڂ�<li>�v�f���擾���A���[�v���ŁANodeList�̊e�v�f�ɑ��ď��ɔw�i�F��ݒ肵�Ă���B�@�}2�͍ŏ��̃��X�g���ڂ��N���b�N�����ۂ̋����ŁA3�ڂ̍��ڂ̔w�i�F���ԐF�ɕύX����Ă���B
�@�}3��2�ڂ̃��X�g���ڂ��N���b�N�����ۂ̋����ŁA��Ԗڂ̃��X�g���ڂ̔w�i�F�����F�ɕύX����Ă���B
�i3�j<span>�v�f������<img>�v�f�Ƀp�f�B���O���w��
�@��{�I�ȋL�q�́i2�j�Ɠ��l���B�uspan > img�v�Ƃ���CSS�Z���N�^�ɂ��A�q�Z���N�^��p����<span>�v�f������<img>�v�f���w�肵�Ă���B�}4��3�ڂ̃��X�g���ڂ��N���b�N�����ۂ̋����ŁA�摜�ɑ��ăp�f�B���O�i���]���j��lj����Ă���B
�i4�j�y�[�W��̃R���e���c�̕\���^��\���𐧌�
�@��{�I�ȋL�q���@�́i2�j��i3�j�Ɠ��l���B�������Ƃ��ăA���o���f���邽�߂̃N���X����p�ӂ��Ă���B��ɁA�uh3, span�v�Ƃ����O���[�v�E�Z���N�^�ɂ��A�S�Ă�<h3>�v�f��<span>�v�f���擾���Ă���B���̌�A�擾�����e�v�f���\���ɐݒ肵�Ă���B�����āu.�N���X���v�Ƃ���CSS�Z���N�^�ɂ��A�������Ƃ��ēn���ꂽ�N���X�������v�f��S�Ď擾���Ă���B���̌�A�e�v�f��\���ɐݒ肵�Ă���B�@�}5��4�ڂ̃��X�g���ڂ��N���b�N�����ۂ̋����ŁA�S�ẴA���o���̈�̒��ŁA�����A���o���݂̂�\������悤�ɕύX���Ă���B
�@�}6��5�ڂ̃��X�g���ڂ��N���b�N�����ۂ̋����ŁA�S�ẴA���o���̈�̒��ŁA��H�A���o���݂̂̕\���ɕύX���Ă���B
�@�}5��4�ڂ̃��X�g���ڂ��N���b�N�����ۂ̋����ŁA�S�ẴA���o���̈�̒��ŁA���َq�A���o���݂̂̕\���ɕύX���Ă���B
�@�ȏ�̃R�[�h�Ⴉ��A�v�f�̎擾���e�Ղɂł��Ă��邱�Ƃ��m�F�ł����̂ł͂Ȃ����낤���B
�@����́ADOM����̎嗬�ɂȂ�ł��낤�Z���N�^API�ɂ��ďЉ���BjQuery���g����ꍇ�͊��p�̏ꂪ���Ȃ���������Ȃ����A������getElementXxxxx���\�b�h���g�p���Ă���悤�ȏł́A�\���͂ɗD��A�V���v���ɗv�f���擾�ł���Z���N�^API�͏\���ɗL�p�ł��낤�B��������قڑS�Ẵu���E�U��Level 1�̎����͂���Ă���̂ŁA�ϋɓI�ɑg�ݍ���ł������Ƃ����X�X���������B
�@����́A���A���^�C��Web���������邽�߂�WebSocket���Љ��B���y���݂ɁB
Copyright© Digital Advantage Corp. All Rights Reserved.