JavaScript Object 내부에 있는 값들은 일부 변경할 수 있다.
0. console.dir()
HTML
<div id="first" class="Momentum">
<h1>Grab me!</h1>
</div>JS
const title = document.querySelector(".Momentum h1");
console.dir(title);- console.dir() 를 이용하면 javaScript object를 자세히 볼수 있다.
- on이 앞에 붙은 메서드들은 event이다.
1. getElementById
- 지정된 문자열과 일치하는 id의 요소를 나타내는 개체를 반환
- 쉽게 말해 HTML에서 id를 통해 element를 찾음
HTML
<div id="first" class="Momentum">
<h1>Grab me!!</h1>
</div>JS
const first = document.getElementById("first");
console.log(first);
first.innerHTML = "<h1>I got you!</h1>";결과:
2. getElementByClassName
- 지정된 문자열과 일치하는 class에 해당하는 요소를 배열로 반환
- 배열이기 때문에 variable.xxx 형식으로 값을 가져올수 없음!!!
HTML
<body>
<h1 class="Momentum">Grab me!</h1>
<h1 class="Momentum">Grab me!</h1>
<h1 class="Momentum">Grab me!</h1>
<h1 class="Momentum">Grab me!</h1>
<h1 class="Momentum">Grab me!</h1>
<script src="app.js"></script>
</body>JS
const hellos = document.getElementsByClassName("Momentum");
console.log(hellos);콘솔:
3. getElementByTagName
- 해당 태그에 해당하는 "모든" 요소를 가지고 온다
- 배열로 반환하기 때문에(객체가 아니기 때문에) variable.xxx 형식으로 값을 가져올 수 없다!!!
HTML
<div class="Momentum">
<h1>Grab me!</h1>
</div>JS
const title = document.getElementsByTagName("h1");
console.log(title);콘솔:
4. querySelector
- element를 CSS 방식으로 검색할 수 있다.
- css와 같이 class는 .class명 id는 #id명으로 참조한다.
- 아래 예제에서는 class명과 그 자손으로 h1태그를 지정하고 있다는것을 명시하고 있다.
- 이와 같이 지정하고자 하는 요소를 명확하게 작성한다.
- 단 하나의 element를 return 해준다.
- .이나 #없이 그냥 입력할시 해당 문자열과 일치하는 태그를 찾는다.
- QuerySelector는 getElementById, className, TagName을 모두 대체가 가능하다.
- 찾는 항목이 없다면 null을 return 한다.
- 아래 예시와 다르게 여러개의 Momentum과 h1이 존재한다면 가장 첫번째 element를 리턴한다.
- 만약 동일한 class의 모든 요소를 가져오고 싶다면
querySelectorAll()을 이용한다. - CSS 문법 처럼 querySelector(".Momentum h1:first-child") 와 같이 사용할수 있다.
HTML
<div class="Momentum">
<h1>Grab me!</h1>
</div>JS
console.log(document.querySelector(".Momentum h1"));콘솔 :
5.querySelectorAll
- selector 안의 조건에 부합하는 모든 element를 가져온다.
- class, id, 태그를 모두 가져올 수 있다.
- 아래 예시에서는 중복된 h1 3개를 배열로 반환한다.
HTML
<body>
<div class="Momentum">
<h1>Grab me!!</h1>
</div>
<div class="Momentum">
<h1>Grab me!!!</h1>
</div>
<div class="Momentum">
<h1>Grab me!!!!</h1>
</div>
<script src="app.js"></script>
</body>JS
console.log(document.querySelectorAll(".Momentum h1"));콘솔:
6.getElementByName
- name이라는 속성에 지정된 문자열을 가진 요소를 반환한다.
- array를 반환한다.
- HTML JS 결과는 생략
7. style
- querySelector로 HTML의 요소를 가져오면 style 메서드를 이용해 적용된 CSS를 변경할 수 있다.
HTML
<div id="first" class="Momentum">
<h1>Grab me!</h1>
</div>JS
const title = document.querySelector(".Momentum h1");변경 전:
JS
const title = document.querySelector(".Momentum h1");
console.dir(title);
title.style.color = 'blue';변경 후:
프론트엔드 개발자 지망생