【更新日 :

【脱jQuery】jQueryを使わずにJavaScriptで要素を操作するメモ

Category: JavaScript

よく使うJavaScriptのコードをピックアップしてまとめました。

要素の取得

//IDを持つ要素を取得
document.getElementById('hoge'); 

//cssセレクタで単一要素を取得
document.querySelector('.hoge');

//cssセレクタで全件取得(Nodelistを返す)
document.querySelectorAll('.hoge');

//body取得
document.body;

//次の要素
elm.nextElementSibling;

//前の要素
elm.previousElementSibling;

//親要素
elm.parentNode;

//親要素よりも上の要素
elm.closest('.hoge');

//子要素(Nodelistを返す)
elm.children;

//最初の子要素
elm.firstElementChild;

//最後の子要素
elm.lastElementChild;


//要素の中身を取得
elm.innerHTML

//要素を取得
elm.outerHTML

//要素のテキストを取得
elm.textContent

querySelectorAll()で取得した要素の処理

複数取得するquerySelectorAll()はNodeListが返ってきますが、そのまま操作はできないためforEachなどループ系の処理と組み合わせて操作します。

const elms = document.querySelectorAll('.hoge');
elms.forEach(function(elm){
  console.log(elm);
});

//IE11を考慮する場合(Nodelistを配列に変換してから利用する)
const elms = Array.prototype.slice.call(document.querySelectorAll('a[href^=http]'),0);
elms.forEach(function(elm){
  console.log(elm);
});

要素が存在するかどうか判別

単一取得のgetElementById()や、querySelector()は要素が存在しなければnullが返ってきますので、そのまま判別に利用できます。

//IDを持つ要素を取得
const elm = document.getElementById('hoge'); 

if(elm){
  // #hogeが存在する場合のみ処理
}

if(!elm){
  // #hogeが存在しない場合のみ処理
}

複数取得するquerySelectorAll()は要素が存在しなければ空のNodeListが返ってきますので、lengthを用いることで判別することができます。

//cssセレクタで全件取得
const elms = document.querySelectorAll('.hoge');

if(targets.length > 0){
  // #hogeが存在する場合のみ処理
}

if(targets.length === 0){
  // #hogeが存在しない場合のみ処理
}

要素の削除・置換・複製

//要素の削除
elm.remove();

//要素の置換
elm.replace(replaceElm);

//要素の複製
elm.cloneNode(true);

要素の挿入

//グループの最後に挿入
elm.parentNode.insertBefore(addElm, null);

//指定した要素の前に挿入
elm.parentNode.insertBefore(addElm, elm);

//指定した要素の前に挿入
elm.before(addElm01, '追加テキスト');

//指定した要素の後に挿入
elm.after(addElm01, '追加テキスト');

//指定した要素内の最初に追加
elm.prepend(addElm01, '追加テキスト');

//指定した要素内の最後に追加
elm.append(addElm01, '追加テキスト');

//要素の指定した位置に追加  {beforebegin}<div>{afterbegin} テキスト {beforeend}</div>{afterend}
elm.insertAdjacentHTML('beforebegin' ,'<div>追加要素</div>');


//jQueryの$.wrap() 簡易
elm = "<div>" + elm.outerHTML + "</div>";

//jQueryの$.wrap() 要素ノードの作成・挿入
const newElm = document.createElement("div");
//IE11の場合
elm.parentNode.insertBefore(newElm, elm);
newElm.appendChild(elm);
//モダンブラウザ
elm.before(newElm);
newElm.append(elm);

classの操作

//classの追加
elm.classList.add('hoge');

//classの削除
elm.classList.remove('hoge');

//classのトグル
elm.classList.toggle('hoge');
//第2引数に条件の設定も可能
elm.classList.toggle('hoge', a > b);

//特定のclassがあるか
if (elm.classList.contains('hoge')) {
  //.hoge を持っている場合の処理
}

属性の操作

//属性の取得
elm.getAttribute('href');

//属性の設定
elm.setAttribute('target', '_blank');

//属性の削除
elm.removeAttribute('href');

//data-hoge-Fuga属性の取得
elm.dataSet.hogeFuga

cssの反映・取得

//cssの反映
elm.style.display = 'block';
elm.style.backgroundColor = '#ccc';

//cssの取得
const styles = getComputedStyle(elm);
const marginTop = parseFloat(styles.marginTop);

イベント設定

//DOMツリーが出来上がったら実行
document.addEventListener('DOMContentLoaded', function(){
});

//ページ読み込みイベント
window.addEventListener('load', function(){
});

//スクロールイベント
window.addEventListener('scroll', function(){
}, {passive: true});

//クリックイベント
elm.addEventListener('click', function(){
});

//クリックイベント1回のみ
elm.addEventListener('click', function(){
},{once: true});


//TransitionEvent e.propertyName(プロパティ名)
//trantion発火イベント(delay開始前) 
elm.addEventListener('trunsitionrun', function(){
});
//trantion開始イベント
elm.addEventListener('trunsitionstart', function(){
});
//trantion終了イベント
elm.addEventListener('trunsitionend', function(e){
//trunsitionstartからの経過時間
e.elapsedTime;
});


//AnimationEvent e.animationName、e.elapsedTime(経過時間)
//css animation開始イベント
elm.addEventListener('animationstart', function(){
});
//AnimationEvent css animation終了イベント
elm.addEventListener('animationend', function(){
});
//AnimationEvent css animation繰り替え医師
elm.addEventListener('animationiteration', function(){
});


//イベント削除
elm.removeEventListener('click', hoge);

幅・高さの取得

//画面の幅・高さ
window.innerWidth
window.innerHeight

//正確な高さ(小数点込み)border, paddingを含み margin は含まない
elm.getBoundingClientRect().height;

//border, paddingを含み margin は含まない幅・高さ
elm.offsetWidth;
elm.offsetHeight;

//paddingを含み border, margin は含まない幅・高さ
elm.clientWidth;
elm.clientHeight;

位置の取得

//スクロール量(ウィンドウの上端)取得
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

//要素の位置取得
elm.getBoundingClientRect().top + scrollTop;
elm.getBoundingClientRect().left + scrollTop;
elm.getBoundingClientRect().right + scrollTop;
elm.getBoundingClientRect().bottom + scrollTop;

数値操作

// 切り捨て
Math.floor();

// 切り上げ
Math.ceil();

// 四捨五入
Math.round();

// 絶対値
Math.abs();
Math.abs('-1');     // 1
Math.abs(-2);       // 2
Math.abs(null);     // 0
Math.abs('');       // 0
Math.abs([]);       // 0
Math.abs([2]);      // 2
Math.abs([1,2]);    // NaN
Math.abs({});       // NaN
Math.abs('string'); // NaN
Math.abs();         // NaN

//数値が小数点を含むか整数かを判定する方法
Number.isInteger(value);

参考リンク

Category : JavaScript