01.부모,조상 요소 찾기
- parentElement : 부모요소 찾기 , 태그만 찾음
//1-7. parentElement : 클릭된 자신의 부모요소를 조회 //-> 여기서는 클릭된 링크가 포함된 <li>태그의 객체 const parent = current.parentElement; //1-8.부모의 배경색상 변경 parent.style.backgroundColor = color;
- closest : 현재 엘레멘트에서 가장 가까운 조상요소 찾기 , 없다면 null 반환
//2-6.상위 요소들 중에서 주어진 selector를 충족하는 가장 가까운 요소 검색 : closest //->IE에서는 지원하지 않음 const parents = current.closest(".list-group"); //2-7)검색된 조상 요소의 배경 색상을 변경(=할당) parents.style.backgroundColor = color;
02.자식,자손 요소 찾기
- children : 자식요소 찾기 , 불필요한 요소를 제거하고 하위element만 조회
const childLi = document.querySelector("#list").children; //-> #list의 자식 태그들
- childNodes : 자식요소 찾기 , 지정된 요소의텍스트와 하위 element를 모두 조회, 심지어 코드 줄맞춤을 위한 줄바꿈도 텍스트로 인식 (비추)
console.log(document.querySelector("#list").childNodes); //-> #list의 자식태그들 및 줄맞춤을 위한 줄바꿈까지 포함
- 메서드체인: 자손요소 찾기,객체로 가져온 HTMLElement는 그 하위의 요소들을 다시 getElementBy .., querySelector 등의 기능으로 탐색할 수 있다. document 안붙이고 가져온 객체 변수명에 바로 요소에 접근한다.
<body> <ul id="post1"> <li><span class="thumb">1</span></li> <li><span class="thumb">2</span></li> <li><span class="thumb">3</span></li> <li><span class="thumb">4</span></li> </ul> <ul id="post2"> <li><span class="thumb">1</span></li> <li><span class="thumb">2</span></li> <li><span class="thumb">3</span></li> <li><span class="thumb">4</span></li> </ul> <button id="btn1" type="" button>자손요소</button> <script> //메서드 체인 방식으로 이벤트 정의 document.querySelector("#btn1").addEventListener("click", e => { //ul태그 가져오기 const post = document.querySelector("#post1"); //객체로 가져온 HTMLElement는 그 하위의 요소들을 //다시 getElementBy .., querySelector 등의 기능으로 탐색할 수 있다. // 주의 document 안붙이고 가져온 객체 변수명에 바로 요소에 접근한다. const thumbs = post.querySelectorAll(".thumb"); for (const t of thumbs) { t.style.color = "#06f"; t.style.fontWeight = "bold"; } }); </script> </body>
03.이전,다음 요소 찾기
- previousElementSibling : 이전요소 찾기
//parentElement.previousElementSibling //자신의 부모'이전'요소의 style변경 current.parentElement.previousElementSibling.style.fontSize = size1 + "px";
- nextElementSibling : 다음요소 찾기
//parentElement.nextElementSibling //자신의 부모 "다음"요소의 style 변경 current.parentElement.nextElementSibling.style.fontSize = size2 + "px";
냠소현 개발일지