あの年直したDOMを覚えていますか?

一般的なDOM操作の整理
⭐10.より多くの先端技術と知識点、サブスクリプション番号の検索JS 購読
フレームワークが多く使われていますが、DOMを操作する純粋なJS文法を覚えていますか?この文章を読んで,往復してみよう.
操作className
addClass
要素にclassを追加し、classList属性を使用します.この属性はDOMTokenListオブジェクトを返します.オブジェクトにはaddメソッドがあり、classを追加できます.この属性がなければclassNameを使用して文字列の接続を行います.

function addClass(el, className) {
    el.classList ? el.classList.add(className) : el.className += ` ${className}`
}

hasClass
classが存在するかどうかを確認します

function hasClass(el, className) {
    return el.classList ? el.classList.contains(className) : el.className.split(' ').includes(className)
}

removeClass
要素のclassを削除

function removeClass(el, className) {
    if (el.classList) {
        el.classList.remove(className)
    } else {
        const classList = el.className.split(' ')
        classList.splice(classList.indexOf(className), 1)
        el.className = classList
    }
}

toggleClass
toggle状況に応じてclassを設定またはキャンセル

function toggleClass(el, className) {
    if (el.classList) {
        el.classList.toggle(className)
    } else {
        const classList = el.className.split(' ')
        if (classList.includes(className)) {
            classList.splice(classList.indexOf(className), 1)
            el.className = classList.join(' ')
        } else {
            el.className += ` ${className}`
        }
    }
}

要素の属性と値
attr
getAttributeでhtml要素のプロパティを取得するel.getAttribute(attrName)
html要素の属性をsetAttributeで設定するel.setAttribute(attrName, attrValue)
html要素の属性をremoveAttributeで削除el.removeAttribute(attrName)
html
要素htmlコードを取得する;入力true outerHTMLの取得

function html(el, ifOuter = false) {
    return ifOuter ? el.outerHTML : el.innerHTML
}

outerHTMLまたはinnerHTMLで上書きする前の値outerHTML/innerHTML = newHTMLString
テキスト
要素contentTextを取得し、互換性innerTextを考慮el.contentText || el.innerText
contentTextまたはinnerTextで値を割り当てて上書きする前の値el.contentText/innerText = newVal
parse
HTML文字列を解析し、createContextualFragmentメソッドを使用してdocument-fragmentを作成します.

function parse(htmlString) {
    const range = document.createRange()
    const parse = range.createContextualFragment.bind(range)
    return parse(htmlString)
}

親子関係ノードの操作
parent
親要素の取得el.parentNode
closest
elから、内から外へ、最初の一致selectorの祖先要素(自身を含む)を取得し、matchesメソッドを使用して、互換性を処理する必要があります.

function closest(el, selector) {
    const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector

    if (matchesSelector.call(el, selector)) {
        return el
    } else {
        el = el.parentElement
        return closest(el, selector)
    }
}

appendChild
エレメントの後に新しいエレメントを追加し、appendChildメソッドをそのまま使用すればよい

function appendChild(parentNode, newEl) {
    parentNode.appendChild(newEl)
}

insertBefore
要素の前に新しい要素を挿入し、insertBeforeを直接使用すればいいです.parentNodeで呼び出すには、refElが参照ノードを表します.

function insertBefore(parentNode, newEl, refEl) {
    parentNode.insertBefore(newEl, refEl)
}

children
要素の下にあるすべてのアノテーション以外のノードを取得

function children(el) {
    return [...el.children].filter(item => item.nodeType != 8)
}

またはquerySeclectorAllを使用する
removeChildren
要素のすべてのサブ要素を削除

function remove(el) {
    el.firstChild && el.removeChild(el.firstChild) && remove(el)
}

hasChild
エレメントの下にエレメントが含まれているかどうかを確認し、selectorセレクタ文字列またはnodeノードに転送します.

function hasChild(el, child) {
    if (typeof child === 'string') {
        return el.querySelector(child) !== null
    } else {
        return el !== child && el.contains(child)
    }
}

hasChildNodes
エレメントにサブエレメントがあるかどうかを確認parentNode.hasChildNodes
removeChild
要素によって指定されたサブ要素を削除

function removeChild(parentNode, childNode) {
    return parentNode.removeChild(childNode)
}

replaceChild
別のノードの代わりに1つのノードを使用

function replaceChild(parentNode, newNode, oldNode) {
    return parentNode.replaceChild(newNode, oldNode)
}

firstChild
エレメントの最初のサブノードの取得parentNode.firstChild
lastChild
エレメントの最初のサブノードの取得parentNode.lastChild
兄弟関係ノードの操作
elementSibling
次または前のnodeTypeをELEMENT_として取得NODEのノード、next/prevElementSibling互換性を使用するには、next/prevSiblingを再帰的に呼び出す必要があります

function elementSibling(el, prev = false) {
    if (prev) {
        if (el.previousElementSibling) return el.previousElementSibling
        el = el.previousSibling
        if (el && el.nodeType === 1) {
            return el
        } else {
            return elementSibling(el, true)
        }
    } else {
        if (el.nextElementSibling) return el.nextElementSibling
        el = el.nextSibling
        if (el && el.nodeType === 1) {
            return el
        } else {
            return elementSibling(el)
        }
    }
}

siblings
next/prevを含む自分以外のすべてのsiblingノードを取得

function siblings(el) {
    return [...el.parentNode.children].filter(item => item !== el)
}

insertAdjacentHTML
要素の内部または外部にhtmlコードを追加する.insertAdjacentHTMLは、相対位置とhtml文字列の2つのパラメータを受信します.

'beforebegin': Before the element itself.

'afterbegin': Just inside the element, before its first child.

'beforeend': Just inside the element, after its last child.

'afterend': After the element itself.

  
  foo
  

function insertAdjacentHTML(el, pos, html) {
    el.insertAdjacentHTML(pos, html)
}

ノードのフィルタリングとパス
cloneNode
nodeノードをクローンし、ifDeepがデプスクローンに転送されたかどうかを確認します.

function cloneNode(el, ifDeep = true) {
    return el.cloneNode(ifDeep)
}

forEach
css Selectorに基づいて要素リストを取得し、各要素に対してコールバック関数をトリガーします.

function forEach(selector, cb) {
    [...document.querySelectorAll(selector)].forEach(cb)
}

filter
selectorに基づいてフィルタコールバック関数の条件を満たす要素を取得する

function filter(selector, cb) {
    return [...document.querySelectorAll(selector)].filter(cb)
}

matchSelector
要素がselectorで選択した要素であるかどうかを確認します.

function matchSelector(el, selector) {
    if (el.matches) {
        return el.matches(selector)
    } else {
        return [...el.parentNode.querySelectorAll(selector)].some(item => item === el)
    }
}

私の購読番号に注目して、不定期にJSに関する技術文章を送って、技術だけを話してゴシップを話さないでください.