如何在沒有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中鏈接選擇器

回答

相關問題