DOM 객체로 바꾸는 방법
- 저번의 그 코드를 불러왔다.
const title = document.getElementById
("title");
title.innerHTML = "Hi From JS!"- title.innerHTML = "Hi From JS!"
: 이걸 통해서 HTML을 이 DOM 객체로 바꿀 수 있다.
자 이제 title 에서 가진 가능성을 모두 보여 보자.
const title = document.getElementById
("title");
title.innerHTML = "Hi From JS!"
console.dir(title);- console.dir(title); 의 목적
: title의 모든 object 들을 볼 수 있다. 그래서 그 많은 것들이 console 에 뜬다.
이게 다 "이벤트" 이다.
title.style.color = 'red';
이렇게 하면 타이틀의 색상이 빨간색으로 바뀐다.
즉, 자바스크립트로 HTML을 조종할 수 있는 것이다.console.dir(object)
- 자바스크립트 객체의 속성들을 출력한다. 그러면,
console.dir(document) 해보면,
객체를 통해 쭉 돌아 볼 수 있다.- document.title = " I am good";
: 자바스크립트로 HTML 을 바꾸고 수정할 수 있으며 어떻게 바뀌고, 숨기고 클릭할 때 감지를 하는 지 알 수 있다. getElement() 로 할 수 있는 HTML 객체 변환 및 조종은 참으로 다양하다.
.querySelector('#title');
- title 선언
const title = document.querySelector('#title');-
querySelector 의 의미
: 노드의 첫 번째 자식을 반환한다(?), document의 모든 자식을 검색하겠다는 뜻이 된다.(라는데;;) -
구글 검색 = 자바스크립트 querySelector
: .querySelector()는 CSS 선택자로 요소를 선택하게 해줍니다. 주의할 점은선택자에 해당하는 첫번째 요소만 선택한다는 것입니다. (음 좀더 친절하군..) -
선택자가 ID 일 경우의 문법
document.querySelector( '#selector' )- 선택자가 class 일 경우의 문법
document.querySelector( '.selector' )- 예시 : 클래스 값으로 abc를 갖는 요소 중 첫 번째 요소의 색을 빨간색으로 만든다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<p class="abc">Lorem Ipsum Dolor</p>
<p class="abc">Lorem Ipsum Dolor</p>
<p class="abc">Lorem Ipsum Dolor</p>
<script>
document.querySelector( '.abc' ).style.color = 'red';
</script>
</body>
</html>
ㅠㅠ
.