자바 스크립트 컴포넌트를 위에서 아래로 가져 오기

Question

나는 DOM을 가지고 있으며 언제나 getElementByID/Class를 항상하고 싶지 않은 요소를 찾고 싶다. 첫 번째 요소를 가져온 다음 그 위치에서 요소 1을 아래로 이동시키는 기능을 원합니다. 나는 "1", "2", 다른 한 후 "3"하나, 나는 일을 얻을 수있는 능력을 원하고 거기에서 아래로 이동 2를 얻기 위해 다음 거기에서 3을 얻을 원하는 가정 즉

<div> 
    <p id="1"></p> 
    <p id="2"></p> 
    <p id="3"></p> 
</div> 

어떻게해야합니까? 또한

document.getElementById('1').nextSibling; 

같은

Answer 1

시도 뭔가,이 답을 체크 아웃은 : https://stackoverflow.com/a/574922

Answer 2

당신은 트리를 걸어 TreeWalker를 사용할 수 있습니다. 당신이 원하는 모든 형제를 얻는 것입니다 경우 귀하의 경우에는,

const first = document.getElementById('1'); 
const walker = document.createTreeWalker(first, NodeFilter.SHOW_ELEMENT); 
let next; 

while (next = walker.nextSibling()) { 
    console.log("Got next sibling", next); 
} 

,이 과잉 될 수 있지만, 걷는 더 복잡한 유형의 작업을 수행 할 수있는 기능을 제공합니다.

document.evaluate을 사용하여 XPath라는 언어를 기반으로하는 노드를 찾을 수도 있습니다. 요소를 선택하는 당신의 조건이 더 복잡한 경우 XPath를 할 수 있기 때문에

while (next = xPathResult.iterateNext()) { 
    console.log("Got next sibling", next); 
} 

것은이 유용 할 수있다 :이 경우, 이것은 당신이 걸을 수있는 반복자를 반환합니다

const xPathResult = document.evaluate('following-sibling::p', first, 
    null, XPathResult.ANY_TYPE, null); 

과 같을 것 사실상 무엇이든 나타냅니다.

요소를 가져 오는 또 다른 방법은 물론 querySelectorAll입니다. 그러나 형제를 선택할 방법이 없습니다. 당신은 부모와 함께 시작해야합니다 : 물론

first.parentNode.querySelectorAll('*') 

, 당신에게 모든 자손이 아니라 직접 아이들을 줄 것이다. 두 번째 및 다음 형제를 얻으려면 :

document.querySelectorAll('#1 > p:not(:first-child)')