如何在没有jQuery的情况下在Javascript中链接选择器

尝试操纵外部网站的布局时，我经常被迫使用一系列选择器来定位我想要的特定元素。我第一次遇到这个时，我被提供了一个jQuery解决方案，并且很容易得到结果。我不想依赖jQuery，并想知道标准Javascript中的可行性。下面是一个例子jQuery的 '链' -如何在没有jQuery的情况下在Javascript中链接选择器

$('div[id="entry"] > p[class="header"] > span[id="title"] > div[class*="entry"] > p[class="title"] > a[class*="target"]').. etc

所以说HTML结构大致

<div id="entry"> 
    <p class="primary"> 
    <p class="header"> 
     <span class="side"> 
     <span id="title"> 
      <div class="secondary entry"> 
       <p class="return"> 
       <p class="title"> 
        <a class="img"> 
        <a class="mytargetelement">

那么这怎么可能正常？谢谢。

来源

2011-07-03 gavin19

我假设你的层次比你的例子更复杂，但你可以简化您选择到'$（“＃DIV项中的[类* =元素]”）' – Dexter

是，道歉。我想我试图让它看起来比它需要的链更加复杂，看看它是否可能在细节上。 – gavin19

输入document.querySelectorAll。

这是jQuery在内部支持它的浏览器使用的。语法与jQuery（Sizzle）选择器中的语法相同，请参阅Selectors API。

来源

2011-07-03 12:30:28 katspaugh

不支持IE6＆7 http://caniuse.com/queryselector – Candide

这看起来正是我所期待的。缺乏IE6/7兼容性不是问题。干杯! – gavin19

这不是漂亮..

对于您可以通过childNodes财产得到它的孩子们每个嵌套/链接元素。然后让循环开始。：/然后你必须循环遍历所有的孩子和孩子的孩子，等等，直到找到适当匹配的元素。

更新：如果你想避免jQuery和只使用复杂的CSS选择器则

if (element.className.indexOf('myClass') >= 0) { 
    // found it! 
}

来源

2011-07-03 12:24:05 Kon

我会说递归更适合探索DOM树。 – Candide

@罗兰，这正是我的意思。当我提到循环时，我认为它是隐含的，但可能不够清楚。 – Kon

@Kon非常感谢。我不知道element.className方法。这将有助于记住。 – gavin19

：

要检查类名称的一部分，你可以做这样的事情SizzleJS library可能是你需要的。每次你在寻找一个DOM元素时，比自己做的更容易！

来源

2011-07-03 12:27:56 Tak

是的，我注意到它实际上是Sizzle而不是jQuery本身。我只是想看看是否有可能没有使用任何外部库。不管怎么说，还是要谢谢你。 – gavin19

function selectors(){ 
     var temp= [];  //array for storing multiple id selectors. 
     for(var i = 0;i<arguments.length;i++){ 
     if(typeof arguments[i] === 'string') 
     temp.push(document.getElementById(arguments[i])); 
      } 

      return temp; //for chanining 
     }, 

now call the function as many time as you want like 
selectors('p').selectors('anyid')

来源

2011-07-03 12:32:29 Ankur

试试这个，它会一直工作。现在你可以根据你的需要修改这个函数，就像你想要的Xpath选择器，然后修改function.simply不使用JQUERY – Ankur

如何在没有jQuery的情况下在Javascript中链接选择器

回答

相关问题