如何获取以某些东西开头的所有HTML属性(属性名称,*不是*它们的值!)

Question

我想获取HTML页面中包含以某些东西开头的属性的所有元素/节点(同样,属性名称以某些东西开头,而不是它们的值!).例如,TinyMCE有添加自定义的趋势归因于它保存,如元素"mce_style","mce_href","mce_bogus",等我想有像CSS3选择属性值,[attr^="mce_"],但不适合的值,属性名.

当然,我可以遍历所有DOM节点及其属性并逐个检查它们,但我想知道是否有更有效的方法.

请不要给我TinyMCE特定的答案,我很确定有一个标志会阻止TinyMCE保存这些属性,但问题是通用的.

Answer 1

这是一个简单的演示,用于查找包含以...开头的属性的所有元素mce_.可能需要一些改进.

function getMCE() {
    var el, attr, i, j, arr = [],
        reg = new RegExp('^mce_', 'i'),                //case insensitive mce_ pattern
        els = document.body.getElementsByTagName('*'); //get all tags in body

    for (i = 0; i < els.length; i++) {                 //loop through all tags
        el = els[i]                                    //our current element
        attr = el.attributes;                          //its attributes
        dance: for (j = 0; j < attr.length; j++) {     //loop through all attributes
            if (reg.test(attr[j].name)) {              //if an attribute starts with mce_
                arr.push(el);                          //push to collection
                break dance;                           //break this loop
            }
        }
    }
    return arr;
}

console.log(getMCE())?

Answer 2

试试这个：（我尝试用 * 代替a标签，但它给所有元素着色，包括那些没有mce_style属性的元素）

\n\n

a[mce_style] { color : red; }\xe2\x80\x8b\n

\n\n

演示： http: //jsfiddle.net/Tcdmb/

\n\n

更多信息： https: //developer.mozilla.org/en/CSS/Attribute_selectors

\n