DOM查询方法

DOM查询方法概述

DOM查询是JavaScript操作网页元素的基础，通过选择器或遍历方法获取文档中的节点对象。浏览器提供了多种API来实现精确查找，从简单的ID匹配到复杂的CSS选择器查询。

getElementById()

通过元素ID属性获取单个节点，这是最直接的查询方式：

const header = document.getElementById('main-header');
console.log(header.textContent); // 输出标题文本

注意事项：

• ID在文档中应当唯一
• 不存在时返回null
• 性能最优的查询方法

getElementsByClassName()

根据class属性获取动态HTML集合：

const buttons = document.getElementsByClassName('btn');
Array.from(buttons).forEach(btn => {
  btn.addEventListener('click', handleClick);
});

特点：

• 返回的是实时集合
• 多个class用空格分隔
• IE9+支持

getElementsByTagName()

通过标签名获取元素集合：

const images = document.getElementsByTagName('img');
for (let img of images) {
  img.setAttribute('loading', 'lazy');
}

典型应用场景：

• 批量修改同类元素
• 表格行操作
• 表单字段处理

querySelector()

CSS选择器查询的现代方法，返回第一个匹配元素：

const primaryBtn = document.querySelector('.btn.primary');
const firstListItem = document.querySelector('ul li:first-child');

选择器示例：

• #content ID选择器
• input[type="text"] 属性选择器
• div > p 子元素选择器

querySelectorAll()

返回所有匹配元素的静态NodeList：

document.querySelectorAll('.tooltip').forEach(tooltip => {
  tooltip.classList.add('fade-in');
});

与getElementsBy的区别：

• 返回非实时集合
• 支持复杂CSS3选择器
• 可配合forEach遍历

遍历方法

通过节点关系进行查找：

// 父节点查询
const parent = document.querySelector('li').parentNode;

// 子节点查询
const children = document.getElementById('container').children;

// 兄弟节点查询
const nextSibling = document.querySelector('.active').nextElementSibling;

常用属性：

• firstChild/lastChild
• previousSibling/nextSibling
• childNodes/children

特殊集合访问

文档级快捷访问方式：

// 表单元素集合
const emailInput = document.forms['login'].elements['email'];

// 图片集合
const galleryImages = document.images;

// 锚点链接集合
const internalLinks = document.links;

其他集合：

• document.scripts
• document.styleSheets
• document.embeds

性能优化建议

1. 缓存查询结果：

// 避免重复查询
const navItems = document.querySelectorAll('.nav-item');

2. 缩小查询范围：

// 在特定容器内查询
const sidebarLinks = document.getElementById('sidebar')
  .querySelectorAll('a');

3. 选择高效方法：

• ID查询优先用getElementById
• 简单选择器性能优于复杂选择器

动态监控变化

MutationObserver监听DOM变动：

const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    console.log('节点变化：', mutation.addedNodes);
  });
});

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

观察配置选项：

• 属性变化监控
• 子节点增减
• 字符数据变化

框架中的DOM查询

现代框架的封装方法：

React示例：

function Component() {
  const divRef = useRef(null);
  
  useEffect(() => {
    console.log(divRef.current.getBoundingClientRect());
  }, []);

  return <div ref={divRef}>内容</div>;
}

Vue示例：

<template>
  <ul ref="list">
    <li v-for="item in items">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  mounted() {
    this.$refs.list.style.padding = '20px';
  }
}
</script>

常见问题解决

1. 处理动态加载内容：

function waitForElement(selector) {
  return new Promise(resolve => {
    if (document.querySelector(selector)) {
      return resolve(document.querySelector(selector));
    }

    const observer = new MutationObserver(() => {
      if (document.querySelector(selector)) {
        observer.disconnect();
        resolve(document.querySelector(selector));
      }
    });

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

2. 跨iframe查询：

const iframeDoc = document.getElementById('frame').contentDocument;
const iframeElement = iframeDoc.querySelector('.content');

3. Shadow DOM穿透：

const host = document.querySelector('custom-element');
const shadowInput = host.shadowRoot.querySelector('input');