1 分钟学 6 个常见的 DOM 基础操作（一）

大家好，今天我们来花 1 分钟来学习 DOM 相关的基础操作，内容虽然简单，但是还是有必要归纳总结的，希望这些整理对大家有所帮助。

1、判断当前 DOM 是否匹配给定的CSS选择器

判断DOM是否匹配，如果匹配返回 true

代码语言：javascript复制

const matches = function (ele, selector) {
    return (
        ele.matches ||
        ele.matchesSelector ||
        ele.msMatchesSelector ||
        ele.mozMatchesSelector ||
        ele.webkitMatchesSelector ||
        ele.oMatchesSelector
    ).call(ele, selector);
};

2、判断当前元素是否包含给定的样式

代码语言：javascript复制

ele.classList.contains('class-name');

3、确认两个元素的父子关系

有时候我们需要确认当前元素是否给定元素的后代，我们可以这么做。

使用 contains 方法

代码语言：javascript复制

const isDescendant = parent.contains(child);

逐层上找是否匹配

代码语言：javascript复制

// 判断元素是否为某个元素的后代
const isDescendant = function (parent, child) {
    let node = child.parentNode;
    while (node) {
        if (node === parent) {
            return true;
        }

        // 赋值遍历
        node = node.parentNode;
    }

    // 如果未匹配返回 false
    return false;
};

4、判断元素是否进入可视区域

代码语言：javascript复制

const isInViewport = function (ele) {
    const rect = ele.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
};

5、判断代码的运行环境是否在浏览器里

我们可以通过检查 window 和 document 对象的存在性来检测当前代码是否在浏览器中运行

代码语言：javascript复制

const isBrowser = typeof window === 'object' && typeof document === 'object';

6、判断当前浏览器是否原生支持日期选择输入框

以下方法，将判断当前浏览器是否支持日期输入框：

代码语言：javascript复制

const isDateInputSupported = function () {
    // 创建表单输入框元素
    const ele = document.createElement('input');

    // 添加日期属性
    ele.setAttribute('type', 'date');

    const invalidValue = 'not-a-valid-date';

    // Set an invalid value
    ele.setAttribute('value', invalidValue);

    // 如果支持data属性，赋值内容将不起效，将返回空
    return ele.value !== invalidValue;
};

你还可以用同样的方法，来判断 input 表单输入框是否支持 email, range, url 属性。

总结

由于时间原因，今天分享的 DOM 基础操作专题就分享到这里，感谢你的阅读。

来源：https://github.com/1milligram/html-dom

document dom email url window

0 人点赞