Javascript通过元素的属性检索元素

每个HTML元素都有偏移量值。我可以返回一个offsetLeft>10的元素吗

从来没有听说过这个功能，所以这个问题

我知道这可以通过循环来完成，但这些都很慢。了解XPath，但在引用中找不到任何与属性相关的内容

提前谢谢

---

另外，不需要过时的浏览器兼容性-HTML5'ish可以做到。

你看过这个页面了吗

jQuery可以轻松地选择元素的属性

<div>Dont find me</div>
<div this="yes">Find me</div>

$('div[this=yes]'); // will select the second div

---

您将遇到的问题是，偏移量和位置等都是计算值，而不是预先存储在dom中的元素。如果需要这样选择，我建议将它们作为属性放在dom元素本身中。那么上面的方法就可以很好地工作了。

您可以很容易地用jQuery完成它

$("*").each(function(index, elem){
    if($(this).offset().left > 10){
        // do something here with $(this)
    }
});

---

据我所知，要做到这一点，没有办法不涉及某种形式的循环。您可以在标准JS中使用以下内容：

var elems = document.getElementsByTagName("*"),
    myElems = [];
for(var i = 0; i < elems.length; i++) {
   if(elems[i].offsetLeft > 10) myElems.push(elems[i]);
}

---

如果您考虑一下，您希望选择文档中具有特定属性值的所有元素。无论您是否自己编写，在某个时刻都会涉及到一个循环，因为每个元素都必须检查。

我建议最好的方法是扩展jQuery的选择器。类似这样的方法效果很好：

$.extend($.expr[':'],{

        offsetLeft: function(a,i,m) {
            if(!m[3]||!(/^(<|>|=)\d+$/).test(m[3])) {return false;}
            var offsetLeft = $(a).offset().left;
            return m[3].substr(0,1) === '>' ?
                 offsetLeft > parseInt(m[3].substr(1),10) :
                     m[3].substr(0,1) === '<' ? offsetLeft < parseInt(m[3].substr(1),10) :
                         offsetLeft == parseInt(m[3].substr(1),10);
        }
});

这将允许您使用以下语法选择元素：

$'span:offsetLeft>10'

或

---

$'.someClass:offsetLeft您可以遍历所有DOM树并检查每个元素的属性/值。即使是querySelectorAll也无法匹配其offsetLeft属性中的元素，因此此功能的实现可能必须采取缓慢的方法并遍历文档树。无论您做什么，在某种程度上，存在某种循环。做点什么，看看解决方案是否慢。如果太慢，重构它。循环本身并不慢。循环中的内容很重要。@Felix King，但是如果有一个本机函数或一个看起来很快的函数，循环的感觉就会消失。@Felix King，我已经做了一些事情。。。在+/-600个元素的循环中为每个元素添加5个属性，大约是加载时不同父元素的5倍，可以暂时冻结浏览器，或者在Chrome的情况下冻结选项卡。至少以后可以使用XPath几乎立即检索它，但加载时间不正常。在您的示例中，这不是一个属性，而是一个属性。问题：关于属性检查。我也可以使用XPath选择属性，但是当添加到1000+个元素时，属性的速度非常慢。添加后一切正常，但添加时，浏览器会冻结，直到操作完成。但我不确定这是否可以在没有循环的情况下完成，即使在html5中，也没有使用querySelector按属性选择元素的方法，您可以按属性选择，问题中提到的jQuery在哪里？+1是迄今为止唯一发布非jQuery问题的非jQuery解决方案的人。var tags=[javascript，html，web development，dom]；对于var i=0；我用这个扩展了哪个函数？比如，它最终是在querySelector中还是在何处？@Matt，@Dis先生-你很可能会投反对票，这是你的选择，但这是一个非常有效的解决方案，因为jQuery提供了所有你需要的工具来做OP想做的事情。仅仅因为他没有标记他的帖子jQuery，并不意味着他不愿意接受涉及它的解决方案。他可能不知道。@Tom-这是一个广泛使用的jQuery框架的扩展。它有助于开发跨浏览器javascript解决方案，并以选择器为中心，使您能够在dom中查找特定元素。我的代码扩展了这些选择器，添加了一个新的选择器，允许您查找偏移量大于、小于或等于数值的元素，无需如此深入的解释。但是jQuery仍然是javascript，选择这些元素的函数也是javascript，只是jQuery给了它多一点额外的功能以使它更慢。所以我在想，什么是原生javascript函数，它通过jQuery扩展了这个功能。

$.extend($.expr[':'],{

        offsetLeft: function(a,i,m) {
            if(!m[3]||!(/^(<|>|=)\d+$/).test(m[3])) {return false;}
            var offsetLeft = $(a).offset().left;
            return m[3].substr(0,1) === '>' ?
                 offsetLeft > parseInt(m[3].substr(1),10) :
                     m[3].substr(0,1) === '<' ? offsetLeft < parseInt(m[3].substr(1),10) :
                         offsetLeft == parseInt(m[3].substr(1),10);
        }
});