如何在Javascript中链式选择器而不使用jQuery

Question

在尝试操作外部网站的布局时，我经常被迫使用一系列选择器来定位我想要的特定元素。第一次遇到这种情况时，我被提供了一个jQuery解决方案，它非常容易获得结果。我希望不依赖于jQuery，并想知道在标准Javascript中实现这一点的可行性。以下是一个示例jQuery“链” -

$('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">

通常情况下，这是如何实现的？谢谢。

- gavin19

---

我假设你的层次结构比你的示例更复杂，但你可以简化选择器为 $('div#entry a[class*=element]')。 - Dexter

是的，抱歉。我想我试图使链看起来比需要的更复杂，以查看是否可能在细节上实现。 - gavin19

Answer 1

输入 document.querySelectorAll。

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

- katspaugh

---

这看起来正是我所需要的。IE6/7的兼容性问题不是问题。干杯！ - gavin19

Answer 2

这看起来有些不美观..

对于每个嵌套/链接元素，您可以通过 childNodes 属性获取它的子元素。然后让循环开始 :/。接下来，您需要递归地遍历所有子元素、子元素的子元素等，直到找到相应匹配的元素。

更新：

要检查类名的一部分，您可以这样做：

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

- Kon

---

我认为递归更适合于探索DOM树。 - Candide

@Roland，这正是我想表达的。当我提到循环时，我认为这是暗示，但可能不够清楚。 - Kon

@Kon 非常感谢。我之前不知道 element.className 方法，这个方法很有用，我会记住的。 - gavin19

没问题。只要记住它是一个属性，而不是一个方法。 - Kon

Answer 3

如果您想避免使用jQuery，只使用复杂的CSS选择器，那么SizzleJS库可能是您需要的。每次查找DOM元素时，使用它比自己编写代码要容易得多！

- Tak

---

是的，我注意到实际上是Sizzle而不是jQuery本身。我只是想看看是否可能完全不使用任何外部库。无论如何，谢谢。 - gavin19

Answer 4

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') 

- Ankur

---

尝试这个，它总是有效的。现在你可以根据自己的需要修改这个函数，比如如果你想要Xpath选择器，那么只需修改函数即可。简单地说，不使用jQuery。 - Ankur