Javascript 如何从Chrome扩展中检查HTML元素是否可编辑

我正在编写一个Chrome扩展，它需要在注入上下文脚本的页面上检测

contenteditable

HTML元素（或用户可以键入的元素）

我目前正在这样做：

var objAll = document.getElementsByTagName("*");
for(var i = 0; i < objAll.length; i++)
{
    obj = objAll[i];

    if(obj.contentEditable &&
        obj.contentEditable != 'inherit' &&
        obj.contentEditable != 'false')
    {
        //Yes, this is a content editable element!
    }
}

var objAll=document.getElementsByTagName（“*”）；
对于（变量i=0；i

但我的方法似乎并不适用于我测试它的所有网站

我很好奇，我错过了什么

---

另外，因为它是一个内容脚本，所以我没有使用jQuery来使它更加健壮。

contentEditable

是一个由

contentEditable

属性隐含的属性。您真正需要检查的是

isContentEditable

属性，它是一个布尔值，用于判断元素是否具有可编辑内容：

if (obj.isContentEditable) {
    // do stuff
}

但不要获取所有元素并对其进行过滤，只需选择所有

contenteditable

元素：

var contEditables = document.querySelectorAll('[contenteditable]');
for (var i = 0; i < contEditables.length; i++) {
    // do stuff
}

var contEditables=document.querySelectorAll（“[contenteditable]”）；
对于（变量i=0；i

事实上，元素具有可编辑内容的充要条件是它具有

contenteditable

属性，无论是否为空字符串

---

您是否尝试过使用类似于

document.queryselectoral（“[contenteditable]”）的工具同时选择所有需要的元素？谢谢。你知道，出于某种原因，
document.querySelectorAll（“[contenteditable]”）不起作用。只有当我做
if（obj.isContentEditable）
而不是我所拥有的，并且保留
document.getElementsByTagName（“*”
）时，它才适用于我的特定测试页面。知道为什么吗？@c0000fd事实上，没有。这个查询应该和，虽然我没有在扩展中测试它，但我不明白为什么它的行为应该不同。谢谢演示。我看得出来。但我正在一个更复杂的例子中测试它（来自Chrome扩展），我上面所说的确实起到了作用。如果有人能解释为什么，我会很感激的？也许元素是动态创建的？你什么时候运行那个代码？@c0000fd啊，小心点，那是不一样的！这就是可编辑的整个文档（在
中）。这并不取决于
contenteditable
属性，而是取决于
designMode
属性，该属性在文档上设置为
“on”
，而不是单个元素。这就是选择器失败的原因。