책 읽다가 코딩하다 죽을래
자바스크립트 DOM요소에 접근하기 본문
CSS에는 선택자(id,class,tag) 개념이 있습니다. HTML 요소의 스타일을 선택하여 수정할 때 이 선택자를 이용해서 자신이 원하는 위치, 범위를 설정할 수 있습니다. 자바스크립트로 DOM(Document Object Model) 요소에 접근할 때도 주로 선택자를 사용합니다.
DOM 요소를 id 선택자로 접근하는 함수 - getElementById()
<body>
<div id = "container">
<h1 id ="hi">nice to meet you</h1>
</div>
id 속성 값은 한 문서 안에서 유일하기 때문에 자주 사용한다.
우리가 css를 코딩할 때는 #hi 를 통해서 nice to meet you 텍스트를 수정했다.
자바스크립트에선 getElementById()을 통해 DOM 요소에 접근할 수 가 있다.
document.getElementById("hi").onclick = function(){
this.style.fontSize = "5em"
}
바로 이런식으로 작성하면 nice to meet you를 클릭했을 때 글자크기가 커지는 이벤트를 발생시킬 수 있다.
DOM 요소를 class 값으로 찾아내는 함수 - getElementsByClassName()
<body>
<div class = "container">
<h1 class ="hi">nice to meet you</h1>
<h2 class ="hi">nice to meet you.too!</h2>
</div>
</body>
자바스크립트에서는 class요소에 접근할려면 getElementsByClassName() 함수를 쓰는데 이름을 잘 보시면 앞에 id접근함수랑 다른 점이 한 가지 있습니다. class는 getElement 뒤에 s가 붙습니다.
그 이유는 class 선택자는 id선택자와는 다르게 웹 문서 안에서 여러 번 사용할 수 있다는 것에 있습니다.
즉 getElementsByClassName()함수에 사용하면 웹 문서에 해당되는 class요소에 모두 접근하기 때문에 복수를 뜻하는 's'가 붙어 있습니다.
앞에 저 예제를 통해 함수의 결과를 확인해보겠습니다.
document.getElementsByClassName("hi")
보시다시피 이렇게 모든 클래스 요소를 찾게 됩니다.
DOM 요소를 태그 이름으로 찾아내는 함수 - getElementsByTagName()
id나 class 선택자가 없는 순수 태그(ex : h1,p 등)들은 getElementsByTagName()함수를 사용하고 이 함수 이름에서도 s가 붙어 있습니다. 마찬가지로 이 함수도 DOM 요소를 모두 찾아 접근합니다.
사용 예시 : document.getElemntsByTagName("h2")
DOM요소를 다양한 방법으로 찾아주는 함수 - querySelector(), querySelectorAll()
querySelector()와 querySelectorAll()은 id, class, tag 모두 다 사용 가능합니다.
Selector는 한개 selectorAll는 여러개 접근 가능합니다.
id를 찾을 경우 : document.querySelector("#id"), document.querySelectorAll("#id")
class를 찾을 경우 : document.querySelector(".class"), document.querySelectorAll(".class")
tag를 찾을 경우 : document.querySelector("tag"), document.querySelectorAll("tag")
만약 선택된 id,class,tag가 코드 상으론 여러 개가 있는데 Selector함수를 쓰면 코드 상 맨 앞에 있는 id,class,tag가 반환됩니다
이 글은 Do it! 웹 프로그래밍을 위한 자바스크립트 기본 편 을 기반으로 만들어졌습니다
'코딩 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트 객체 선언, 접근, 메모리저장방식 (0) | 2021.07.22 |
|---|---|
| 자바스크립트 scope (0) | 2021.07.20 |
| DOM요소에 DOM요소를 연결하기 (0) | 2020.02.26 |
| 자바스크립트 Array 객체에 알아보자 (0) | 2020.02.12 |
| 자바스크립트 사용자 정의 객체 만들기 (0) | 2020.02.06 |
