<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>
news-contents의 부모엘리먼트는 body 입니다.
document.body.children 의 첫 번째 자식 엘리먼트를 조회합니다. 0번째 엘레먼트 (nav)
따로 변수 선언을 해서 이 정보를 저장해두면, 주소를 참조하기때문에 언제든지 접근할 수 있습니다. 변수 newsContents 를 따로 선언하여 id가 news-contents 인 엘리먼트를 할당합니다.
부모 엘리먼트를 찾는 방법 (ref MDN)
Element.closest()
기준 Element 에서부터 closest() 메소드를 통해 자신부터 부모 요소 단위로 출발하여 각 요소가 지정한 선택자에 만족할 때까지 탐색한다(문서 루트까지 이동). 이 중 가장 가깝게 조건에 만족한 부모 요소가 반환되며, 조건에 만족한 요소가 없으면 null 값을 반환한다.
<!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