id 선택자로 접근
<!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>
<div id="container">
<h1 id="heading" style="color: aqua;">
후미진언덕그어디
</h1>
<div id="prodImg"></div>
</div>
<script>
// ID 선택자로 노드 접근 해보기
let node1 = document.getElementById("heading");
console.log(node1);
console.log(node1.textContent);
let headingStyle = node1.style;
console.log(headingStyle.color);
</script>
</body>
</html>
class 선택자로 접근
<script>
// getElementsByClassName
// HTML 컬렉션 타입으로 접근이 된다 !!!
// class 선택자로 노드 접근 해보기
let headingNode = document.getElementsByClassName("m--heading");
console.log(headingNode[0].textContent);
console.log(headingNode[0].style.color);
</script>
태그 선택자를 사용해서 노드 접근
<script>
// getElementsByTagName
// HTML 컬렉션 타입으로 접근이 된다 !!!
// 태그 선택자로 노드 접근 해보기
let headingNode = document.getElementsByTagName("h1");
console.log(headingNode);
console.log(headingNode[0].textContent);
console.log(headingNode[0].style.color);
</script>
querySelector 사용해서 노드에 접근하기
<body>
<div id="container">
<h1 id="heading" class="m--heading" style="color: aqua;">
후미진언덕그어디그기억
</h1>
<h2>구름나드리</h2>
<article>오늘날씨는좀그래</article>
</div>
<script>
let divContainerNode = document.querySelector("#container");
console.log(divContainerNode);
let h1Node = divContainerNode.querySelector("h1");
h1Node.textContent = "그늘진그언덕그어디";
// 문제 : h2 노드에 접근해서 문자열 변경해 보기
</script>
</body>
querySelectorAll 사용해서 노드에 접근하기
<body>
<div id="container">
<h1 id="heading" class="m--heading" style="color: brown;">
후미진언덕그어디그기억
</h1>
<h2>구름나드리</h2>
<article>오늘날씨는좀그래</article>
</div>
<script>
let divContainerNode = document.querySelectorAll("#container");
console.log(divContainerNode);
// h1 태그에 문자열 변경 (divContainerNode 시작하기)
divContainerNode[0]
.querySelector("h1")
.textContent = "힘내요~ 내일 휴무 하지만 과제 있습니다";
</script>
</body>