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 

그래서

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

어떻게이 정상적으로 가능하다 HTML 구조가 약이라고? 감사.

Answer 1

document.querySelectorAll을 입력하십시오.

jQuery가이를 지원하는 브라우저에서 내부적으로 사용하는 것입니다. 구문은 jQuery (Sizzle) 선택기와 동일합니다 (Selectors API 참조).

Answer 2

이 .. 당신이 childNodes 속성을 통해 아이를 얻을 수있는 각각의 연쇄/중첩 된 요소에 대해

꽤하지 않습니다. 그런 다음 반복을 시작하십시오. :/당신은 적절하게 일치하는 요소를 찾을 때까지 모든 자식과 자식을 반복적으로 순환해야합니다. 당신이 jQuery를 방지하고 그런 다음에야 복잡한 CSS 선택기를 사용하려면

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

Answer 3

:이 같은 뭔가를 할 수

클래스 이름의 일부를 확인하려면 :

는 업데이트 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')