DOM����̎嗬�ɂȂ邩�I�H �Z���N�^API���g�����Ȃ����F�A�ځF�l�C���ɐ������鏉�߂Ă�HTML5�J��

DOM�ŗv�f���擾����̂ɁA�ώG�Œ����L�q�͂����s�v�B�V���v����CSS�Z���N�^�̍\�����g���ĊȒP�Ɏ擾�ł���B

» 2011�N10��07�� 00��00�� ���J
[�i�I�L�i�ďC�F�R�c�ˊ��j�CWINGS�v���W�F�N�g�ihttp://www.wings.msn.to/�j]
AځFlCɐ鏉߂ĂHTML5J
ƖAvInsider^Insider.NET

powered by Insider.NET

uAځFlCɐ鏉߂ĂHTML5JṽCfbNX

�A�ږڎ�

�@�]���AJavaScript�ł́A�ȉ��̂悤�ȃ��\�b�h�𗘗p���āA����Ώۂ̗v�f����肵�Ă����B

  • getElementById���\�b�h�FID�̒l���L�[�Ƀm�[�h���擾����B
  • getElementsByTagName���\�b�h�F�v�f�����L�[�Ƀm�[�h���擾����B
  • getElementsByClassName���\�b�h�Fclass�����̒l���L�[�Ƀm�[�h���擾����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";
}

�Z���N�^API���g�p���Ȃ��ꍇ�̗v�f�̎擾��

�@��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

�y�R�����z�Z���N�^API Level 2

�@�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

  • matchesSelector���\�b�h�F�h�L�������g��v�f�ɑ΂��ăZ���N�^����v���邩�𔻒肷��B
  • queryScopedSelector�^queryScopedSelectorAll���\�b�h�FCSS�Z���N�^Level 4�Œ�`����Ă���:scope�^���N���X�𗘗p���ĊY������m�[�h��m�[�h���X�g���擾����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���[���̊�{

�@������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

�}1�@�T���v�����s����̉��

�@���ۂ̏����̓��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

�Z���N�^API���g�p�����T���v���iselector_api.htm�j

�@����ł̓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

�}2�@1�–ڂ̃��X�g���ڂ��N���b�N�����Ƃ��̉�ʁiquerySelector���\�b�h�g�p���̋����j

�@�}3��2�–ڂ̃��X�g���ڂ��N���b�N�����ۂ̋����ŁA��Ԗڂ̃��X�g���ڂ̔w�i�F�����F�ɕύX����Ă���B

�}3�@2�–ڂ̃��X�g���ڂ��N���b�N�����Ƃ��̉�ʁiquerySelectorAll���\�b�h�g�p���̋����j

�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

�}4�@3�–ڂ̃��X�g���ڂ��N���b�N�����Ƃ��̉�ʁiquerySelectorAll���\�b�h�g�p���̋����j

�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

�}5�@4�–ڂ̃��X�g���ڂ��N���b�N�����Ƃ��̉�ʁiquerySelectorAll���\�b�h�g�p���̋����j

�@�}6��5�–ڂ̃��X�g���ڂ��N���b�N�����ۂ̋����ŁA�S�ẴA���o���̈�̒��ŁA��H�A���o���݂̂̕\���ɕύX���Ă���B

�}6�@5�–ڂ̃��X�g���ڂ��N���b�N�����Ƃ��̉�ʁiquerySelectorAll���\�b�h�g�p���̋����j

�@�}5��4�–ڂ̃��X�g���ڂ��N���b�N�����ۂ̋����ŁA�S�ẴA���o���̈�̒��ŁA���َq�A���o���݂̂̕\���ɕύX���Ă���B

�}7�@6�–ڂ̃��X�g���ڂ�I�������Ƃ��̉�ʁiquerySelectorAll���\�b�h�g�p���̋����j

�@�ȏ�̃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

uAځFlCɐ鏉߂ĂHTML5JṽCfbNX

�u�A�ځF�l�C���ɐ������鏉�߂Ă�HTML5�J���v

Copyright© Digital Advantage Corp. All Rights Reserved.

'; this.insertTarget = document.querySelector('#cmsBody .subscription') || document.querySelector('#cmsBody .inner'); }; BodyAdIMSWithCCE.prototype = Object.create(BodyAdContent.prototype); BodyAdIMSWithCCE.prototype.activate = function () { refreshGam('InArtSpecialLink'); } // global reference window.itm = itm; //entry point BodyAdEventBase.polyfill(); const bodyAdManager = BodyAdManager.getInstance(); bodyAdManager.addEventListener(BodyAdManager.EVENTS.READY, function (ev) { bodyAdManager.loadAdvertise(); }); bodyAdManager.init(); })();
�X�|���T�[����̂��m�点PR

���ڂ̃e�[�}

Microsoft  WindowsőO2025
AI for GWjAO
[R[h^m[R[h Zg by IT - ITGWjArWlX̒SŊ􂷂gD
Cloud Native Central by IT - XP[uȔ\͂gD
�V�X�e���J���m�E�n�E �y�����i�r�zPR
���Ȃ��ɂ������߂̋L��PR

RSS�ɂ‚���

�A�C�e�B���f�B�AID�ɂ‚���

���[���}�K�W���o�^

��IT�̃��[���}�K�W���́A �������A���ׂĖ����ł��B���Ѓ��[���}�K�W�������w�ǂ��������B