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

1、判断浏览器是否支持触摸事件

判断当前浏览器是否支持 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 基础操作专题就分享到这里，感谢你的阅读。

版权声明

注：本文属于原创文章，版权属于「前端达人」公众号及 qianduandaren.com 所有，未经授权，谢绝一切形式的转载