javascript取得したDOM要素の使い方、HTMLCollectionとNodeList【脱jQuery】
2018年の夏、連日の猛暑日、40度を超えるような地域もあるようです。
熱中症にはお気をつけください。
皆さんこんにちは。
脱jQueryの第三弾！
今回は、第一弾の
ネイティブjavascriptでHTMLの要素を取得する！脱jQueryはじめの一歩
で取得したDOM要素、HTMLCollectionやNodeListの使い方です。
そもそもHTMLCollection、NodeListとは
どちらも配列っぽいオブジェクトで、
どちらもプロパティとして「length」が提供されています。
arrayでは無いので同じ様に扱うにはひと工夫必要な場合もあります。
HTMLCollectionはDOMに対する変更が随時反映され、
NodeListは反映されません。
HTMLCollectionにアクセスする
HTMLCollectionに直接アクセスする
HTML
- <ul>
- <li class="foo"></li>
- <li class="foo"></li>
- </ul>
javascript
- var htmlcollection = document.getElementsByClassName('foo');
- console.log(htmlcollection[0]);
arrayのように何番目かを直接指定すればそのままアクセスができます。
アクセスする要素の数と順番が把握できてる場合は有効です。
HTMLCollectionに順番にアクセスする
javascript
- var l = htmlcollection.length;
- for (var i = 0; i < l; i++) {
- console.log(htmlcollection[i]);
- }
document.forEachは使えません。
lengthで総数を取得してforでまわせば全ての要素にアクセスできます。
NodeListにアクセスする
NodeListに直接アクセスする
javascript
- var nodelist = document.querySelectorAll('.foo');
- console.log(nodelist[0]);
NodeListに順番にアクセスする
javascript
- var l = nodelist.length;
- for (var i = 0; i < l; i++) {
- console.log(nodelist[i]);
- }
IE以外でならforEach()が使えますが、
IEと互換性をもたせるなら
Array.prototype.foreachを使います。
javascript
- nodelist.forEach(function(e){
- console.log(e);
- });
- Array.prototype.forEach.call(nodelist, function (item)){
- console.log(item);
- }