30秒代码项目：JavaScript DOM查询实用技巧大全-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01053/article/details/148322955

30秒代码项目：JavaScript DOM查询实用技巧大全

30-seconds-of-code Chalarangelo/30-seconds-of-code: 一个基于 JavaScript 的代码片段库，包含了各种常用的代码片段和技巧，适合用于学习和查询 JavaScript 编程知识。项目地址: https://gitcode.com/gh_mirrors/30/30-seconds-of-code

前言

在现代Web开发中，DOM操作是JavaScript编程的核心部分之一。高效地查询和操作DOM元素不仅能提升开发效率，还能优化页面性能。本文将介绍一系列实用的DOM查询技巧，这些技巧源自一个知名的代码片段集合项目，它们能帮助开发者快速解决常见的DOM查询问题。

基础DOM查询方法

1. 快速选择器简写

对于经常使用document.querySelector()和document.querySelectorAll()的开发者，可以创建简写方法：

const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);

// 使用示例
const header = $('header');
const buttons = $$('button');

这种简写方式可以显著减少代码量，使DOM查询更加简洁明了。

2. 获取特定元素

获取页面中所有图片元素是一个常见需求：

const getImages = (el = document) => [...el.querySelectorAll('img')].filter(img => !img.loading);

// 使用示例
const images = getImages();

这个方法不仅获取所有img元素，还通过loading属性过滤掉正在加载的图片，这在处理懒加载场景时特别有用。

元素关系查询

3. 获取元素祖先、父级、兄弟和子元素

const getAncestors = el => {
  let ancestors = [];
  while (el) {
    ancestors.unshift(el);
    el = el.parentNode;
  }
  return ancestors;
};

const getSiblings = el => [...el.parentNode.children].filter(child => child !== el);

这些方法可以帮助开发者快速获取元素的家族关系，在处理事件委托或复杂DOM结构时非常实用。

可视区域相关查询

4. 判断元素是否在视口中可见

const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
  const { top, left, bottom, right } = el.getBoundingClientRect();
  const { innerHeight, innerWidth } = window;
  return partiallyVisible
    ? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
        ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
    : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
};

这个方法可以精确判断元素是否在可视区域内，支持完全可见和部分可见两种判断模式，对于实现懒加载或滚动动画非常有用。

5. 获取比视口宽的DOM元素

const getElementsWiderThanViewport = () => {
  return [...document.querySelectorAll('*')].filter(
    el => el.scrollWidth > document.documentElement.clientWidth
  );
};

这个方法可以找出页面中所有宽度超过视口的元素，对于响应式设计和布局调试很有帮助。

焦点与位置相关查询

6. 获取当前获得焦点的元素

const getFocusedElement = () => document.activeElement;

虽然简单，但在处理表单或可聚焦元素的交互时非常实用。

7. 获取指定坐标点的元素

const elementFromPoint = (x, y) => document.elementFromPoint(x, y);

这个方法可以获取指定坐标位置最上层的元素，常用于实现拖放功能或自定义右键菜单。

8. 获取元素的垂直偏移量

const getVerticalOffset = el => {
  let offset = el.offsetTop;
  let parent = el.offsetParent;
  while (parent) {
    offset += parent.offsetTop;
    parent = parent.offsetParent;
  }
  return offset;
};

这个方法计算元素相对于文档顶部的垂直偏移量，比直接使用offsetTop更准确，因为它考虑了所有祖先元素的偏移。

性能优化技巧

9. 高效存储DOM元素引用

const store = {
  elements: new Map(),
  set(id, el) {
    this.elements.set(id, el);
  },
  get(id) {
    return this.elements.get(id);
  }
};

// 使用示例
store.set('header', document.querySelector('header'));
const header = store.get('header');

使用Map对象存储DOM引用可以避免重复查询DOM，提高性能，特别是在需要频繁访问同一元素的场景下。