javascript로 html과 상호작용하기

전제

자바스크립트를 html에 붙여넣기

or

<script></script> 안에 직접 쓰는 방법도 있을것임

<script src="OOO.js"></script>

 

getElementsByblabla와 querySelector(All)로 해당작업을 수행할 수 있다.

 

1. 해당 element의 id로 가져오기

const title = document.getElementById("title");

그리고 해당 element에는 수많은 속성값들이 존재하며, 이는 .dir을 통해 확인 가능하다.

예를들어, innerText 값을 javascript로 수정해본다고 하자.

title.innerText = "New Title";

이런 식으로 js를 통해 html을 수정할 수 있다.

 

2. 해당 element의 class로 가져오기

const hello = document.getElementsByClassName("Hello");

그룹으로 elements 가져오는 방법. id는 고유하며 하나만 정해지지만

class의 경우가 많이 쓰인다고 볼 수 있겠다.

 

3. 해당 element의 tag로 가져오기

<div class="hello">
	<h1>Hello h1!</h1>
</div>

이러한 html 코드가 있다고 해보자

const title = document.getElementsByTag("h1");

이런식으로, h1 태그에 모두 접근 가능하다. 물론! class에 대한 조건이 없기 때문에 모든 h1 tag이 달린 elements를 배열로 가져온다고 생각해야 한다. 좋진 않다.

 

4. querySelector, querySelectorAll

const title = document.querySelector(".hello h1");

CSS 방식으로 elements 가져오는 방식이다.

위 문자열을 보면, hello class의 h1 tag를 가지는 elements 가져오도록 되어있는 것임

id도 같은 방식으로 #을 붙여 사용하면 되겠다

상세한 범위 설정을 위해서는 쿼리셀렉터가 편할것이다.

querySelector와 querySelectorAll의 차이는 해당 조건을 만족하는 것을 모두 가져올것이냐,
첫번째 것 하나만 가져올 것이냐의 차이. ~~All은 array형태로 모든 element을 반환함.