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

1、在元素之后或之前插入给定的 HTML

1.1、之后插入

在 ele 元素后插入 html：

ele.insertAdjacentHTML('afterend', html);

1.2、之前插入

在 ele 元素之前插入 html：

ele.insertAdjacentHTML('beforebegin', html);

2、循环 nodelist 列表

假设 elements 是一个匹配给定选择器的 NodeList：

const elements = document.querySelectorAll(...);

您可以使用以下方法之一循环 DOM 元素：

2.1、使用 ES6 扩展运算符

[...elements].forEach(function(ele) {
    ...
});

2.2、使用数组方法

// `Array.from` is not supported on IE
Array.from(elements).forEach(function(ele) {
    ...
});

// Or
[].forEach.call(elements, function(ele) {
    ...
});

// Or
[].slice.call(elements, 0).forEach(function(ele) {
    ...
});

2.3、使用forEach方法

如果您不必支持 Internet Explorer，请使用 forEach 方法：

elements.forEach(function(ele) {
    ...
});

3、附加到元素

将 ele 元素添加到目标元素的开头：

target.insertBefore(ele, target.firstChild);

4、点击 Shift and Enter 换行

默认情况下，按 Enter 或 Shift 和 Enter 将在 textarea 文本框生成新的一行。

在某些情况下，例如内联可编辑元素或消息传递应用程序（聊天程序），您希望在用户按下 Enter 时提交数据。换行的唯一方法是按 Shift 和 Enter。

假设我们有以下 textarea 文本输入框：

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

为了防止按下 Enter 键的默认行为，我们可以处理 keydown 事件：

const ele = document.getElementById('message');

ele.addEventListener('keydown', function (e) {
    // Get the code of pressed key
    const keyCode = e.which || e.keyCode;

    // 13 represents the Enter key
    if (keyCode === 13 && !e.shiftKey) {
        // Don't generate a new line
        e.preventDefault();

        // Do something else such as send the message to back-end
        // ...
    }
});

5、打开弹层时防止页面内容滚动

// Disable scrolling on the `body` element when opening a modal
document.body.style.overflow = 'hidden';

// Allow to scroll when closing the modal
document.body.style.removeProperty('overflow');

6、阻止默认的操作事件

6.1、在事件上添加返回 false

ele.onclick = function(e) {
    // Do some thing
    ...
    return false;
};

或者在单行代码里直接调用

<form>
    <button type="submit" onclick="return false">Click</button>
</form>

我不推荐这种方法，因为：

• 返回 false 没有意义
• 它不适用于 addEventListener() 方法

6.2、使用 preventDefault() 方法

此方法适用于内联属性：

<button type="submit" onclick="event.preventDefault()">Click</button>

event handlers

ele.onclick = function(e) {
    e.preventDefault();

    // Do some thing
    ...
};

ele.addEventListener('click', function(e) {
    e.preventDefault();
    ...
});

注意：

• 我们在创建选项卡时，点击链接时取消默认事件行为。
• 例如，我们提交表单时，想先验证表单。
• 将文件拖放到给定区域时，请勿打开文件或下载文件。

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