分享 6 个常见的 DOM 基础操作

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

ct_nodetree1

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

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

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

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

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

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

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

使用 contains 方法

const isDescendant = parent.contains(child);

逐层上找是否匹配

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

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

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

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

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 对象的存在性来检测当前代码是否在浏览器中运行

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

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

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

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 相关的基础操作的第二部分,内容虽然简单,但是还是有必要归纳总结的,希望这些整理对大家有所帮助。

1、判断浏览器是否支持触摸事件(touch events)

判断当前浏览器是否支持 touch events,示例代码如下:

const touchSupported = "ontouchstart" in window || (window.DocumentTouch && document instanceof DocumentTouch);

2、克隆DOM元素

const cloned = ele.cloneNode(true);

使用 cloneNode(true) 方法将会深拷贝给定的 DOM 元素,所有的属性包含子节点的属性和事件都将拷贝。(即它还将递归复制当前节点的所有子孙节点。)

如果使用 false 将拷贝DOM元素的节点,并不会复制其属性和值。

const cloned = ele.cloneNode(false);

3、计算文本输入框(textarea)的字符串长度

假设我们 HTML 页面只包含了一个文本输入框 textarea  和  div  显示文本长度的容器,提示用户已输入的字符串长度。

<textarea id="message"></textarea>
<div id="counter"></div>

3.1 使用 maxlength 属性

使用 maxlength 属性限制用户文本输入内容的长度

<textarea maxlength="200" id="message"></textarea>

3.2 计算用户已输入的内容长度

使用input 事件监听文本输入框内容的改变,并计算文本输入的长度,代码如下:

const messageEle = document.getElementById("message");
const counterEle = document.getElementById("counter");

messageEle.addEventListener("input", function (e) {
    const target = e.target;

    // Get the `maxlength` attribute
    const maxLength = target.getAttribute("maxlength");

    // Count the current number of characters
    const currentLength = target.value.length;

    counterEle.innerHTML = `${currentLength}/${maxLength}`;
});
小贴士: 你也许会使用 keyup 监听事件,它可能在以下场景不起作用 1、将文本拖入到输入框 2、点击鼠标右键复制文本内容到输入框

4、创建 DOM 元素

4.1 创建DOM元素

const ele = document.createElement("div");

4.2 创建文本元素

const ele = document.createTextNode("Hello World!");

5、添加只执行 1 次的事件

5.1 使用 once 属性

绑定 DOM 事件时,我们可以在第三个参数上,添加  { once: true } 属性,确保此事件只执行 1 次。

const handler = function (e) {
    // The event handler
};
ele.addEventListener("event-name", handler, { once: true });

小贴士: IE不支持此属性

5.2 移除元素指定的事件

const handler = function (e) {
    // The event handler
    // Do something ...

    // Remove the handler
    e.target.removeEventListener(e.type, handler);
};

ele.addEventListener("event-name", handler);

6、监测指定元素的外部点击

有时我们需要监测是不是在指定的元素的外部点击,比如弹出层,我们在弹出层的外部空白处点击,用于关闭弹出层,就需要监测外部点击的判断。

document.addEventListener("click", function (evt) {
    const isClickedOutside = !ele.contains(evt.target);

    // `isClickedOutside` 返回 true 则表示点击事件发生在指定元素的外部
});

总结

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

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