整理常见 DOM 操作

⭐️ 更多前端技术和知识点，搜索订阅号 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)

通过 setAttribute 设置 html 元素的属性

el.setAttribute(attrName, attrValue)

通过 removeAttribute 删除 html 元素的属性

el.removeAttribute(attrName)

html

获取元素 html 代码；传入 true 获取 outerHTML

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

通过 outerHTML 或 innerHTML 覆盖之前的值

outerHTML/innerHTML = newHTMLString

text

获取元素 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

使用一个节点替代另一个节点

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

获取除了自己以外的所有 sibling 节点，包括 next/prev

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

insertAdjacentHTML

在元素内部或外部追加 html 代码；insertAdjacentHTML 接收两个参数，一个是相对位置，一个是 html 字符串。

'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.

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

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)
    }
}