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

最新推荐文章于 2023-07-16 11:32:09 发布

前端达人

最新推荐文章于 2023-07-16 11:32:09 发布

阅读量613

点赞数

文章标签： js javascript java css python

本文链接：https://blog.csdn.net/Ed7zgeE9X/article/details/123342992

版权

大家好，今天我们来花 1 分钟来学习 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 则表示点击事件发生在指定元素的外部
});