如何在沒有 jQuery 的 Javascript 中鏈接選擇器

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">

那么這通常怎么可能呢？ 謝謝。

Answer 1

輸入document.querySelectorAll 。

這是 jQuery 在內部用於支持它的瀏覽器。 語法與 jQuery (Sizzle) 選擇器中的語法相同，請參閱選擇器 API 。

Answer 2

這個不好看。。

對於每個嵌套/鏈式元素，您可以通過childNodes屬性獲取其子級。 然后讓循環開始。 :/ 然后你必須遞歸循環遍歷所有子元素和子元素，依此類推，直到找到適當匹配的元素。

更新：

要檢查 class 名稱的一部分，您可以執行以下操作：

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

Answer 3

如果您想避免 jQuery 並且只使用復雜的 CSS 選擇器，那么SizzleJS 庫可能就是您所需要的。 這比每次查找 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')