Javascript 객체 선택에 대해

jQuery는 $('element')~ 혹은 parent~ children~ eq~ 등 으로 편하게 DOM 객체를 선택할 수 있었지만

Javascript는 어떤함수는 배열형으로 return 하고 어떤함수는 문서(body)가 모두 준비된 상태에서만 검색이 되는 등

다양한 바리에이션이 있다.

이에 대해 숙달되지 못한상태에서 진행을 하니 객체선택에 있어서 매우 난잡해지고 객체를 변수에 담는 빈도가 높아지는 것 같다. (성능적인 부분에서 변수에 객체를 담는 행동은 한번으로 끝내는게 좋다고 알고있다. 너무 스파게티 코드가 되는 경우는 빼고)

예를 들자면

 

const nodeList = document.getElementById('#mainList');
const currentNode = nodeList.getElementsByTagName(li)[index];

나는 지금 javascript에서 객체선택을 이런식으로 하고 있는데... 이 코드를 jQuery라면

var currentNode = $('#mainList li').eq(index);

이렇게 끝낼 수 있다.

 

때문에 대표적으로 알려진 기본적인 DOM 요소 선택자를 망라하고 거기에 javascript의 this에 대해서 명확히 정리 할 필요가 있을 것 같다.

 

---

 

 

1. getElementById()

DOM에서 특정 id값을 가진 엘리먼트를 반환한다. 값이 없을 경우 null을 반환한다. 만약 id값이 여러개일 경우 첫 번째 id값을 반환한다. 전역변수로 선언되어 어디서든 접근이 가능하다.

 

elem = document.getElementById("para1");
elem.style.color = newColor;

2. getElementsByName()

name에 명시된 조건에 맞는 모든 값들을 live NodeList로 반환한다. index로 접근이 가능하며 length속성을 가진다.

var x = document.getElementsByName("fname");

3. getElementsByClassName()

특정 클래스명을 가진 엘리먼트들을 NodeList로 반환한다.

var x = document.getElementsByClassName("example");

4. getElementsByTagName()

특정 태그명을 가진 엘리먼트들을 HTMLCollection을 반환한다. NodeList와 HTMLCollection 모두 DOM인터페이스로 엘리먼트의 집합을 말한다. 둘다 배열 메소드를 지원하지는 않는다. 차이점이 있다면 HTMLCollection은 노드의 집합이며 DOM의 변화를 반영한다.

var x = document.getElementsByTagName("LI");

5. querySelector()

css 선택자를 기준으로 제일 첫 번째 엘리먼트를 반환한다.

var el = document.querySelector(".myclass");

6. querySelectorAll()

css 선택자에 맞는 모든 엘리먼트를 NodeList로 반환한다.

var x = document.querySelectorAll(".example");

반환된 NodeList를 배열로 전환할 수 있다.

var nodesArray = Array.prototype.slice.call(document.querySelectorAll(".example"));

 

 

그리고 가장 궁금했던거.

document.getElementById('A').getElementsByTagName('a')[0] 같은식으로 이어붙이는게 가능하다