如何在不使用jQuery时查找所有contenteditable为true的DOM节点？

嘿，这个问题问得太到位了！手动通过getElementsByTagName捞一堆元素再挨个检查属性确实有点笨，其实浏览器原生就有更高效、更简洁的方案，完全不用依赖jQuery。

最直接高效的方法：CSS属性选择器 + querySelectorAll #

浏览器的原生querySelectorAll方法支持完整的CSS选择器语法，我们可以直接用属性选择器精准定位所有contenteditable属性为true的元素，这是效率最高的方式——因为底层是浏览器的选择器引擎在处理，比你手动JS循环遍历快得多。

精准匹配contenteditable="true"的元素

直接用这个代码：

const editableElements = document.querySelectorAll('[contenteditable="true"]');

它会一次性返回所有符合条件的DOM节点集合，你可以直接遍历操作：

// 遍历所有找到的可编辑元素
editableElements.forEach(el => {
  console.log('找到可编辑元素:', el);
  // 比如给元素加个高亮边框
  el.style.outline = '2px solid #2196F3';
});

补充：匹配所有“实际可编辑”的元素

有时候你会遇到只写了<div contenteditable>（没有赋值）的情况，这种元素的contenteditable属性值在HTML里是空字符串，但实际也是可编辑的。如果要把这类元素也包含进来，可以扩展选择器：

// 同时匹配明确写了true和只写了contenteditable的元素
const allEditableElements = document.querySelectorAll('[contenteditable="true"], [contenteditable=""]');

为什么这比手动遍历更高效？ #

你之前用getElementsByTagName拿div、p再逐个检查属性的方法，会遍历大量无关元素——比如页面上可能有几百个div，但只有少数是可编辑的，这种方法做了很多无用功。而querySelectorAll是让浏览器直接通过内部优化的选择器引擎筛选元素，省去了JS层面的循环检查，代码更简洁，执行速度也更快。

额外小技巧：检查元素是否实际可编辑 #

如果需要判断单个元素是否真的可编辑（考虑继承情况，比如父元素设置了contenteditable，子元素没设置但也能编辑），可以用DOM元素的isContentEditable属性：

// 检查某个元素是否实际可编辑
if (someElement.isContentEditable) {
  // 做你需要的操作
}

内容的提问来源于stack exchange，提问作者M.Onyshchuk