JS 자식선택자

[ 기본 ]

• document.getElementById("ID");
• document.getElementsByClassName("class");
• document.getElementsByTagName("li");

 

[ query... ]   |  IE8 이상

• document.querySelector(" div.user input[name=login] ");
  • CSS 선택자를 기준으로 가장 첫번째 엘리먼트 반환 ( '.', '#' 등 사용 )
• document.querySelectorAll("  ");
  • CSS 선택자에 맞는 모든 엘리먼트를 NodeList로 반환 (NodeList는 DOM의 변화를 반영하지 않음)

 

 

[ 문서 전체가 아닌 ==> 특정 노드의 자식 중 elements를 찾고 싶을 때 ]

var divs = window.document.getElementsByTagName("div");

var div2 = divs[2];

var div2Child = div2.getElementsByTagName("div");

 

for (var i = 0; i < div2Child.length; i++) {

    div2Child[i].style.border = "4px solid #ff0000";

}

 

 

[ 부모 노드 찾기 ]

• 특정Ele.parentNode    (IE9 이상)
  
  • ...parentNode.childElementCount  (자식 수 반환 ; IE 9)
  • ...parentNode.children  (자식 HTMLCollection 반환 - DOM 변화 실시간 업데이트 ; IE 9)
  • ...parentNode.firstElementChild  (IE 9)
  • ...parentNode.lastElementChild  (IE 9)
  • ...parentNode.style.border = "4px solid #ff0000";
  • ...parentNode.append( )   (IE 지원 X)
  • ...parentNode.prepend( )  (IE 지원 X)
  • ...parentNode.querySelector( )   (IE 9)
  • ...parentNode.querySelectorAll( )   (IE 9)

 

 

 

[ 형제 노드 찾기 ]

- Node 객체의 프로퍼티인 previousSibling와 nextSibling을 이용하면 앞뒤로 인접한 형제노드에 각각 접근

  할 수 있습니다.

• ...previousSibling.id or style or ....  (IE 9)
• ...nextSibling.id or style or ....   (IE 9)

 

[ 노드 생성 및 추가하기 ]

- 노드를 생성하고 추가하는 방법은 세가지가 있습니다.

- Document.createElement() 메서드 사용

- HTMLElement.innerHTML 프로퍼티 사용

- Node.cloneNode() 메서드 사용

- 위 세가지 방법을 경우에 따라 적절하게 독립적으로 또는 서로 조합해서 사용하면 됩니다.

- Document.createElement() 메서드를 사용하는 경우

- 첫번째 영역에 추가하기

1. 새로 생성할 노드를 추가할 위치의 기준이 되는 엘리먼트의 첫번째 자식노드를 찾습니다.

2. createElement() 메서드를 이용해 새로운 노드를 생성합니다.

3. 새롭게 생성한 텍스트를 추가하기 위해 createTextNode() 메서드를 이용해 텍스트 노드를  생성합니다.

4. 생성한 텍스트노드를 2번에서 생성한 자식 노드로 appendChild() 메서드를 이용해 추가합니다.

5. 끝으로 page.insertBefore(추가노드, 기준노드) 함수를 이용해 #sample_page 노드의 형제노드로 

    새로 생성된 노드를 추가합니다.

- 두번쨰 영역에 추가하기

첫번째와 같은 순서로 진행됩니다. 다만 새로 생성되는 노드가 많을 경우 자식노드를 모두 만들어 준 후 새로

생성되는 노드에 추가하는 구문이 들어갑니다.

- 세번째 영역에 추가하기

첫번째와 같은 순서로 진행됩니다. 새로 생성된 노드의 위치가 #sample_page 노드의 자식 노드로 추가되고

이를 위해 insertBefore() 메서드 대신 appendChild() 메서드를 사용합니다.

- HTMLElement.innerHTML 프로퍼티를 사용하는 경우

- Element의 내부에 들어있는 모든 자식을 문자열로 담은 프로퍼티입니다.

- innerHTML 프로퍼티 기능을 사용하면 새로 추가할 노드를 DOM 메서드를 이용해 일일이 생성하지 않고 문자

  열을 만들어 대입해주기만 하면 됩니다.

- Node.cloneNode() 메서드를 사용하는 경우

- 생성하고 싶은 내용이 이미 생성되 있는 요소와 똑같거나 다소 비슷하다면 Node객체에서 제공하는 

   cloneNode() 메서드를 이용해 똑같은 노드를 복사해서 생성할 수 있습니다.

 

 

출처: https://begindeveloper.tistory.com/entry/자바스크립트DOM-노드-다루기 [개발자로 살아남자!!!]