你知道的和你不知道的DOM操作技巧-CSDN博客

本文链接：https://blog.csdn.net/zhaodash97/article/details/140329261

你知道的和你不知道的DOM操作技巧

亲爱的前端小伙伴们，今天我们来聊聊那些你可能知道或者不知道的DOM操作技巧。作为一名前端开发者，如果你还在为DOM操作头疼，那么这篇文章绝对能让你茅塞顿开。让我们一起来探索一下DOM的奥秘吧！

1. 选择元素的新姿势

还在用document.getElementById()和document.getElementsByClassName()吗？那你就太out了！现代浏览器早就支持querySelector和querySelectorAll这两个强大的方法了。

// 老派写法
const oldSchool = document.getElementById('myElement');

// 新潮写法
const newCool = document.querySelector('#myElement');

// 选择多个元素
const elements = document.querySelectorAll('.myClass');

这两个方法不仅语法简洁，而且支持复杂的CSS选择器。你甚至可以这样玩：

// 选择所有带有data-awesome属性的div元素中的第一个p元素
const awesomeP = document.querySelector('div[data-awesome] p:first-child');

2. 创建元素的小技巧

创建元素时，不要只盯着document.createElement()看。来看看这个黑魔法：

const div = document.createElement('div');
div.innerHTML = '<p>Hello</p><span>World</span>';

// 等效于
const template = document.createElement('template');
template.innerHTML = '<div><p>Hello</p><span>World</span></div>';
const div = template.content.firstElementChild;

使用template元素可以一次性创建复杂的DOM结构，而且性能更好。这简直是懒人福音啊！

3. 事件委托，你真的会用吗？

事件委托是一种常见的优化技巧，但很多人可能只是知道个皮毛。让我们来深入探讨一下：

document.getElementById('parent').addEventListener('click', function(e) {
    if (e.target.matches('.child')) {
        console.log('Child clicked!');
    }
});

这段代码看起来没问题，但如果.child元素内部还有其他元素呢？e.target可能就不是.child了。来看看改进版：

document.getElementById('parent').addEventListener('click', function(e) {
    const child = e.target.closest('.child');
    if (child && this.contains(child)) {
        console.log('Child or its descendant clicked!');
    }
});

使用closest()方法可以找到最近的匹配元素，contains()则确保找到的元素确实在监听器所在的元素内部。这样就万无一失了！

4. DOM操作的性能优化

DOM操作是昂贵的，特别是当你需要频繁更新DOM时。这里有几个小技巧可以帮你提升性能：

4.1 使用文档片段

const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
    const el = document.createElement('div');
    el.textContent = `Item ${i}`;
    fragment.appendChild(el);
}
document.body.appendChild(fragment);

使用DocumentFragment可以在内存中操作DOM，最后一次性添加到文档中，大大减少了页面重绘的次数。

4.2 批量更新样式

// 糟糕的写法
const el = document.getElementById('myElement');
el.style.width = '100px';
el.style.height = '100px';
el.style.backgroundColor = 'red';

// 优秀的写法
const el = document.getElementById('myElement');
el.classList.add('my-class');

// CSS
.my-class {
    width: 100px;
    height: 100px;
    background-color: red;
}

通过添加类名一次性应用多个样式，可以减少浏览器的重排和重绘。

5. 你不知道的DOM API

现代浏览器提供了许多强大但鲜为人知的DOM API，让我们来看几个有趣的：

5.1 IntersectionObserver

想知道元素是否进入视口吗？不需要再监听滚动事件了，IntersectionObserver来帮你：

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            console.log('Element is visible!');
        }
    });
});

observer.observe(document.querySelector('#myElement'));

这个API不仅可以用来实现懒加载，还能做出各种炫酷的滚动效果。

5.2 MutationObserver

想监听DOM变化吗？MutationObserver就是为此而生的：

const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
        console.log('DOM changed!');
    });
});

observer.observe(document.body, {
    childList: true,
    subtree: true
});

这个API可以帮你监控DOM的变化，对于需要响应DOM动态变化的场景非常有用。

5.3 ResizeObserver

元素大小变化也能监听？没错，ResizeObserver就是干这个的：

const observer = new ResizeObserver(entries => {
    entries.forEach(entry => {
        console.log('Element size changed!');
    });
});

observer.observe(document.querySelector('#myElement'));