JavaScript DOM のスニペット集

// polyfill (https://developer.mozilla.org/ja/docs/Web/API/Element/matches)
if (!Element.prototype.matches) Element.prototype.matches = Element.prototype.msMatchesSelector;

document.addEventListener('click', function(e){
    if (e.target.matches('.btn, .btn *')) {
        // .btn (.btnそのものか、.btn内の要素) がクリックされたときの処理
    }
});

// polyfill (https://developer.mozilla.org/en-US/docs/Web/API/Element/closest)
if (!Element.prototype.closest) {
    Element.prototype.closest = function(s) {
        let el = this;
        do { if (el.matches(s)) return el; el = el.parentElement || el.parentNode; } while (el !== null && el.nodeType === 1);
        return null;
    };
}

// ホイールスクロール時
document.addEventListener('wheel', function(e){
    // 下スクロール
    if (e.deltaY > 0) {
    }
    // 上スクロール
    else if (e.deltaY < 0) {
    }
});

document.addEventListener('touchmove', function(e){ e.preventDefault() }, { passive: false });

let prevY = null;
document.addEventListener('touchstart', function(e){
    prevY = e.touches[0].clientY;
});
document.addEventListener('touchmove', function(e){
    if (prevY == null) return;

    // 下から上へスワイプ
    if (e.touches[0].clientY < prevY) {
        // 何か処理
        prevY = null;
    }
    // 上から下へスワイプ
    else if (e.touches[0].clientY > prevY) {
        // 何か処理
        prevY = null;
    }

    e.preventDefault();
}, { passive: false });

const viewportWidth = document.documentElement.clientWidth; // ビューポート幅 (スクロールバー除く)
const viewportHeight = document.documentElement.clientHeight; // ビューポート高さ (スクロールバー除く)
const rect = el.getBoundingClientRect(); // 要素の位置 (ビューポート上)
const yOK = (0 <= rect.top && rect.top <= viewportHeight) || (0 <= rect.bottom && rect.bottom <= viewportHeight); // 上辺または下辺がビューポート内
const xOK = (0 <= rect.left && rect.left <= viewportWidth) || (0 <= rect.right && rect.right <= viewportWidth); // 左辺または右辺がビューポート内

if (window.matchMedia('(min-width: 680px)').matches) {
    // 幅680px以上
}
else {

}

const handle = function(list) {
    if (list.matches) {
        // 幅680px以上
    }
    else {
        // 幅680px未満
    }
};
const list = window.matchMedia('(min-width: 680px)');
list.addListener(handle); // 幅変更時確認
handle(list); // 初回確認

if (!Element.prototype.matches) Element.prototype.matches = Element.prototype.msMatchesSelector;
document.addEventListener('click', function(e){
    if (e.target.matches('a[href^="http"]:not([target])')) {
        e.target.relList.add('noopener');
        e.target.target = '_blank';
    }
});

// SVGElement で classList を使用可能にする (IE11)
if (!('classList' in SVGElement)) {
    const classList = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'classList');
    if (classList) Object.defineProperty(SVGElement.prototype, 'classList', classList);
}

/**
 * HTML の特殊文字をエスケープします。
 * @param {string} s エスケープする文字列
 * @return {string} エスケープされた文字列
 */
function h(s) {
	const map = { '<' : '&lt;', '>' : '&gt;', '&' : '&amp;', '"': '&quot;', '\'' : '&apos;' };
	return String(s).replace(/[<>&"']/g, function(c){ return map[c]; });
}

/**
 * 指定した XPath にマッチした要素を配列で取得します。(例: $x('descendant::comment()'))
 * @param {string} path XPath
 * @param {Node} startNode ルート要素 (未指定の場合 Document)
 * @return {Node[]} 結果ノード配列
 */
function $x(path, startNode) {
    const nodes = [];
    const result = document.evaluate(path, startNode || document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
    for (let i = 0, len = result.snapshotLength; i < len; i++) nodes.push(result.snapshotItem(i));
    return nodes;
}

/**
 * DOM 要素を簡易的に生成します。( 例: newElement('a', { href: '#' }, 'リンクです') )
 * @param {string}          tagName  タグ名
 * @param {Object}          props    プロパティ・属性
 * @param {(Node|string)[]} contents 内容
 * @returns {Element} 生成要素
 */
const newElement = function(tagName, props, contents){
    const el = document.createElement(tagName);
    if (props) { // プロパティ・属性 (基本はプロパティ、一部は属性などで扱います)
        Object.keys(props).forEach(function(k){
            if (/^data-/.test(k)) el.setAttribute(k, props[k]); // data-*
            else if (k == 'class') el.className = props[k]; // class → className
            else el[k] = props[k];
        });
    }
    if (contents) { // 内容 (Node、テキスト、Nodeやテキストが含まれた配列)
        const contentsArray = Array.isArray(contents) ? contents : [contents];
        contentsArray.forEach(function(content){
            const node = content instanceof Node ? content : document.createTextNode(content);
            el.appendChild(node);
        });
    }
    return el;
};

/**
 * HTML文字列から新しい要素を生成します。(例: newElementFromString('<div class="box">test</div>'))
 * ※ <div> を使った簡易的なものです。<div> 内で許可されない要素は生成できません。(DOMParser 等を使用してください)
 * @param {string} htmlString HTML文字列
 * @returns Element
 */
const newElementFromString = function(htmlString) {
    const tmpl = document.createElement('div');
    tmpl.innerHTML = htmlString;
    return tmpl.firstElementChild;
}

/**
 * 対象要素の兄弟要素の中で指定セレクタにマッチする次の要素を取得します。(jQuery の next(selector) に近いものです)
 * @param {Element}   el       対象要素
 * @param {string}    selector 指定セレクタ
 * @returns {Element}          見つかった要素 (存在しない場合 null)
 */
const nextElementSibling = function(el, selector) {
    if (!Element.prototype.matches) Element.prototype.matches = Element.prototype.msMatchesSelector;
    let result = el.nextElementSibling;
    while (result && !result.matches(selector)) result = result.nextElementSibling;
    return result;
};

/**
 * 対象要素の兄弟要素の中で指定セレクタにマッチする前の要素を取得します。(jQuery の prev(selector) に近いものです)
 * @param {Element}   el       対象要素
 * @param {string}    selector 指定セレクタ
 * @returns {Element}          見つかった要素 (存在しない場合 null)
 */
const previousElementSibling = function(el, selector) {
    if (!Element.prototype.matches) Element.prototype.matches = Element.prototype.msMatchesSelector;
    let result = el.previousElementSibling;
    while (result && !result.matches(selector)) result = result.previousElementSibling;
    return result;
};

/**
 * 指定イベントを発火させる簡易的な関数です。(例: trigger(document.body, 'click'))
 * 
 * @param {Object}  target       イベントターゲット
 * @param {string}  name         イベント名 (例: 'click')
 * @param {boolean} [bubbles]    イベントがバブルするか
 * @param {boolean} [cancelable] イベントがキャンセル可能か
 * @param {Object}  [detail]     カスタムイベント時の追加データ
 */
const trigger = function(target, name /*, bubbles = true, cancelable = true, detial = null */) {
    const bubbles = 2 in arguments ? arguments[2] : true; // IE11 ではデフォルト引数が使用できない
    const cancelable = 3 in arguments ? arguments[3] : true;
    const detail = 4 in arguments ? arguments[4] : true;
    const intarface = detail ? 'CustomEvent' : 'Event';
    const event = document.createEvent(intarface); // IE11用にイベントコンストラクタを使用せずにインスタンスを生成します。

    if (intarface == 'CustomEvent') event.initCustomEvent(name, bubbles, cancelable, detail);
    else event.initEvent(name, bubbles, cancelable);
    target.dispatchEvent(event);
};

/**
 * 指定した URL のファイルをダウンロードします。
 * @param url {string} URL
 * @param filename {string} ファイル名
 */
const downloadUrl = function(url, filename) {
    // IE11 は download 属性に対応していないためそのまま開きますが、
    // どうしてもダウンロードにさせたい場合は下記のように Ajax → Blob → Blob 保存 とします。(CORS 制約でエラーになる可能性あり)
    const ie11ForceDownload = true;
    if (ie11ForceDownload && navigator.msSaveOrOpenBlob && !/Edge/.test(navigator.userAgent)) {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.responseType = 'blob';
        xhr.onload = function(e) {
            if (this.status === 200) navigator.msSaveOrOpenBlob(this.response, filename);
        };
        xhr.send();
        return;
    }
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
};

/**
 * テキストをダウンロードします。(downloadUrl() が必要です)
 * @param content {string} 内容
 * @param filename {string} ファイル名
 */
const downloadText = function(content, filename) {
    const blob = new Blob([content]);
    // IE, Edge
    if (navigator.msSaveOrOpenBlob) {
        navigator.msSaveOrOpenBlob(blob, filename);
    }
    // その他
    else {
        const url = URL.createObjectURL(blob);
        downloadUrl(url, filename);
        URL.revokeObjectURL(url);
    }
};

/**
 * Blob をダウンロードします。(downloadUrl() が必要です)
 * @param blob {Blob} Blob オブジェクト
 * @param filename {string} ファイル名
 */
const downloadBlob = function(blob, filename) {
    // IE, Edge
    if (navigator.msSaveOrOpenBlob) {
        navigator.msSaveOrOpenBlob(blob, filename);
    }
    // その他
    else {
        const url = URL.createObjectURL(blob);
        downloadUrl(url, filename);
        URL.revokeObjectURL(url);
    }
};

/**
 * CSV (UTF-8 + BOM) をダウンロードします。(downloadUrl() が必要です)
 * @param content {string} 内容 (CSV化済の文字列)
 * @param filename {string} ファイル名
 */
const downloadCSV = function(content, filename) {
    const bom  = new Uint8Array([0xEF, 0xBB, 0xBF]);
    const blob = new Blob([bom, content], {type: 'text/csv'});
    // IE, Edge
    if (navigator.msSaveOrOpenBlob) {
        navigator.msSaveOrOpenBlob(blob, filename);
    }
    // その他
    else {
        const url = URL.createObjectURL(blob);
        this.downloadUrl(url, filename);
        URL.revokeObjectURL(url);
    }
}