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

1、元素聚焦（focused）时阻止页面滚动

我们可以使用 autofocus=“true” 属性 element.focus() 方法来聚焦某元素。在这两种情况下，浏览器都会自动将元素滚动到视口中。在大多数情况下这不是问题，但有些场景我们希望避免这种行为的场景。

比如，聚焦弹出层的文本元素时，页面会自动滚动到顶部，这并不是我们希望的，我们该如何避免呢？

有两种解决方案可以防止这种行为。

1.1、使用 preventScroll 属性

我们可以将 preventScroll 属性传递给 focus() 方法，如下所示：

element.focus({
    preventScroll: true,
});

但是，并非所有浏览器都完全支持该选项。查看 web-platform-tests 和 Can I use pages。

1.2、定位到当前点（previous point）

此方法在所有浏览器中都起作用。我们在调用focus（）方法之前存储鼠标当前位置，然后滚动到该位置，避免滚动到焦点位置。

const x = window.scrollX;
const y = window.scrollY;
elem.focus();

// Scroll to the previous location
window.scrollTo(x, y);

2、将输入光标定位到输入框的末尾

假设我们有一个代表用户名的文本输入框。还有一个用于更新用户名的编辑按钮。

<input type="text" id="fullName" />
<button id="edit">Edit</button>

有一个常见的要求是单击编辑按钮将焦点放在文本字段上，并将光标移动到它的末尾：

const fullNameEle = document.getElementById('fullName');
const editEle = document.getElementById('edit');

editEle.addEventListener('click', function (e) {
    // Focus on the full name element
    fullNameEle.focus();

    // Move the cursor to the end
    const length = fullNameEle.value.length;
    fullNameEle.setSelectionRange(length, length);
});

3、重定向到另一个页面

location.href = '/the/new/url';

4、重新加载当前页

4.1、重新加载并保留 POST 数据

location.reload();

4.2、重新加载并忽略 POST 数据

location.href = location.href;

5、删除所有子节点

5.1、清空内部 HTML（不推荐）

ele.innerHTML = '';

不推荐使用此方法，因为它不会删除子节点的事件处理程序。因此，如果您管理大量元素，可能会导致内存泄漏。

5.2、删除 DOM 子节点

删除其子节点，直到没有任何子节点为止。

while (node.firstChild) {
    node.removeChild(node.firstChild);
}

6、移除一个元素

6.1、使用 remove 方法

请注意，Internet Explorer 不支持删除方法。

ele.remove();

6.2、使用 removeChild 方法

if (ele.parentNode) {
    ele.parentNode.removeChild(ele);
}

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