JS/jQuery - 요소 선택 : 아이디(id), 클래스(class), 네임(name), 태그명(tagname), 부모(parent), 조상(closest), 자손(children), 형제(siblings), 이전(prevSibling), 다음(nextSibling)

닌니디자인 JS 썸네일

특정 요소 (id, class, name, tagname)

특정 HTML 요소를 선택하는 방법은 여러 가지가 있다. 주로 요소를 어떻게 선택하고, 어떤 기준으로 접근하느냐에 따라 다르다.

 

 

특정요소 - 바닐라스크립트

// 특정 id로 선택
let element = document.getElementById('myId');

// 특정 class로 선택
let element = document.getElementsByClassName('myClass');

// 특정 name으로 선택
let element = document.getElementsByName('myname');

// 특정 태그명으로 선택
let element = document.getElementsByTagName('div');

// CSS 선택자를 사용하여 첫 번째 일치하는 요소 선택
let element = document.querySelector('.myClass');

// CSS 선택자를 사용하여 일치하는 모든 요소 선택
let element = document.querySelectorAll('.myClass');

check_circle Check

querySelectorAll을 사용하여 요소를 선택하면, forEach() 메소드를 사용하여 각 요소에 접근할 수 있다.

 

특정요소 - 제이쿼리

// 특정 id로 선택
let element = $('#myId');

// 특정 class로 선택
let element = $('.myClass');

// 특정 name으로 선택
let element = $('[name="myName"]');

// 특정 태그명으로 선택
let element = $('div');

 

 

 

---

 

가족 요소 (parent, closest, children, siblings)

특정 요소의 가족 요소는 부모, 조상, 자식, 형제요소 등이 있다. 다양한 가족요소에 접근하려면 여러 속성들이 필요하다.

 

 

가족요소 - 바닐라스크립트

const element = document.getElementById('myElement');

// node 탐색

// 부모노드
let parentNode = element.parentNode;
// 자식노드 목록
let childrenNode = element.childNodes;
// 첫번째 자식노드
let firstchildrenNode = element.firstChild;
// 마지막 자식노드
let lastchildrenNode = element.lastChild;
// 이전 형제노드
let previousSiblingNode = element.previousSibling;
// 다음 형제노드
let nextSiblingNode = element.nextSibling;



// element 탐색

// 부모요소
let parentElement = element.parentElement;
// 해당 조상요소(본인포함)
let closestParent = element.closest('.closestClass');
// 자식요소 목록
let children = element.children;
// 첫번째 자식 요소
let firstchildren = element.firstElementChild;
// 마지막 자식 요소
let lastchildren = element.lastElementChild;
// 이전 형제 요소
let previousSibling = element.previousElementSibling;
// 다음 형제 요소
let nextSibling = element.nextElementSibling;

 

가족요소 - 제이쿼리

const element = $('div');

// 부모요소
let parentElement = element.parent();
// 조상요소들 목록
let parentElement = element.parents();
// 자식요소 목록
let childrenElement = element.children();
// 형제요소 목록(본인제외)
let siblingsElement = element.siblings();
// 이전 형제 요소 목록
let previousSibling = element.prev();
// 다음 형제 요소 목록
let nextSibling = element.next();

wb_incandescent Tip

제이쿼리 선택자 괄호안에 탐색하고자 하는 class나, id 등의 값을 입력하면 해당되는 요소만 선택된다.