Question

在尝试操纵外部网站的布局时，我经常被迫使用一系列选择器来定位我想要的特定元素。我第一次遇到这个时，我得到了一个jQuery解决方案，很容易得到结果。我宁愿不依赖jQuery，也想知道这在标准Javascript中是多么可行。这是一个jQuery＆＃39;链的例子。 -

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

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

Answer 1

输入document.querySelectorAll。

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

Answer 2

这不太漂亮..

对于每个嵌套/链接元素，您可以通过childNodes属性获取其子元素。然后让循环开始。：/然后你必须递归遍历所有孩子和孩子的孩子，依此类推，直到你找到适当匹配的元素。

已更新 ：

要检查班级名称的一部分，您可以执行以下操作：

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

Answer 3

如果你想避免使用jQuery并且只使用复杂的CSS选择器，那么SizzleJS library可能就是你所需要的。每次你在寻找一个DOM元素时，这比自己做的容易得多！

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

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

4 个答案: