1 자식 엘리먼트 찾기
(1-1) 눈으로 살핌
<html>
<body>
<div id="nav">
<div class="logo"></div>
<div class="menu-wrapper">
<div class="menu">menu</div>
<div class="menu">menu</div>
<div class="menu">menu</div>
<div class="profile-photo">photo</div>
</div>
</div>
<div id="news-contents">
<div class="news-content-wrapper">
<div class="news-picture">news-picture</div>
<div class="news-title">news-title</div>
<div class="news-description">news-description</div>
</div>
</div>
<div id="footer">footer</div>
</body>
</html>
(1-2) console.dir(document.body)를 통해 객체를 구하고 검색한다
- console.log은 HTML 형태로 출력한다.
- console.dir은 DOM을 객체의 모습으로 출력한다.->console.dir(document.body)
- document.body에서 객체의 key중에서 children을 찾아본다.
console.dir(document.body) 를 통해 출력된 객체에서, children 속성을 찾을 수 있습니다.
children 속성에 nav, news-contents, footer 가 자식으로 있는 것을 확인할 수 있습니다. - 물론 document.body.children 으로 바로 조회할 수도 있습니다.
2 부모 엘리먼트 찾기
-
news-contents의 부모엘리먼트는 body 입니다.
-
document.body.children 의 첫 번째 자식 엘리먼트를 조회합니다. 0번째 엘레먼트 (nav)
-
따로 변수 선언을 해서 이 정보를 저장해두면, 주소를 참조하기때문에 언제든지 접근할 수 있습니다. 변수 newsContents 를 따로 선언하여 id가 news-contents 인 엘리먼트를 할당합니다.
부모 엘리먼트를 찾는 방법 (ref MDN)
-
Element.closest()
기준 Element 에서부터 closest() 메소드를 통해 자신부터 부모 요소 단위로 출발하여 각 요소가 지정한 선택자에 만족할 때까지 탐색한다(문서 루트까지 이동). 이 중 가장 가깝게 조건에 만족한 부모 요소가 반환되며, 조건에 만족한 요소가 없으면 null 값을 반환한다.- Syntax
var closestElement = targetElement.closest(selectors); - Parameters
selectors: CSS 선택자가 들어가는 DOMString 개체 문자열,
예) "p:hover, .toto + q". - Result value
closestElement 기준 요소를 포함하여 부모 요소 단위로 선택자 조건에 가장 가까운 Element 객체를 가져오며, null 값이 될 수 있다.
- Syntax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<article>
<div id="div-01">Here is div-01
<div id="div-02">Here is div-02
<div id="div-03">Here is div-03</div>
</div>
</div>
</article>
</body>
<script>
var el = document.getElementById('div-03');
console.log("el", el);
var r1 = el.closest("#div-02");
// id=div-02 조건이 만족하므로 속성을 가진 부모 요소가 반환된다.
console.log("r1", r1);
var r2 = el.closest("div div");
// div 요소에 만족한 요소 중 div 자식을 가리키므로, id=div-03 자신이 만족된다.
console.log("r2", r2);
var r3 = el.closest("article > div");
// 가장 가까운 article 요소 바로 하위의 div 요소 id=div-01 속성을 가진 요소가 반환된다.
console.log("r3", r3);
var r4 = el.closest(":not(div)");
// div 요소가 아닌 가장 가까운 부모 article 요소가 반환된다.
console.log("r4", r4);
</script>
</html>
참고: (1)코드스테이츠 / (2)mdn
끝까지 ... 가면 된다.