티스토리 뷰
자바스크립트를 이용하여 본격적으로 HTML 요소를 제어하는 방법을 배웠다. 다른 웹 사이트에서 본 적 있는 기능들을 직접 구현할 수 있게 되는 것 같아서 조금 신나는 것 같다.
기본적으로 HTML 태그를 Element, 값이 있는 속성을 Attribute, 값이 없는 속성을 Property라고 한다.
이제 이러한 속성을 제어해보자.
HTML 속성 제어
HTML 태그의 속성, 예를 들면 img 태그의 src, a태그의 href 등을 제어할 수 있다. 방법은 다음과 같다.
const mytag = document.querySelector("...");
mytag.hasAttribute(속성이름); // 해당하는 속성의 존재를 확인함.
mytag.getAttribute(속성이름); // 해당하는 속성값을 가져옴.
mytag.setAtrribute(속성이름, 변경할 값); // 해당하는 속성값을 변경함.
mytag.removeAttribute(속성이름); // 해당하는 속성값을 제거함.이것을 이용해 속성값을 가져와 변경하고, 제거하는 게 가능하다.
CSS 제어
획득한 객체의 CSS 속성에 접근할 수도 있다. 방법을 보자.
const mytag = document.querySelector("...");
mytag.style.css관련_프로퍼티 = "값"; // 내용 적용
const css = mytag.style.css관련_프로퍼티; // 적용된 내용 조회css 관련 프로퍼티는 color, background-color등이 있다. 여기서 주의할 점은, 자바스크립트에서 이렇게 css 속성에 접근할 때는 -로 표시되던 부분이 없어지고 대문자가 사용된다. 예를 들어 css에서는 background-color로 사용되는 것이 자바스크립트에서는 backgroundColor로 사용된다.
클래스 제어
획득한 객체의 클래스에 접근할 수 있다. 방법을 보자.
const mytag = document.querySelector("...");
mytag.classList.add(클래스이름); // 클래스 추가
mytag.classList.remove(클래스이름); // 클래스 제거
mytag.classList.toggle(클래스이름); // 클래스 on/off
mytag.classList.contains(클래스이름); // 해당 클래스가 존재하는지 여부를 boolean으로 반환이것으로 클래스를 추가, 제거할 수 있게 된다.
dataset
모든 HTML 태그 안에 data-*** 형식의 속성을 필요한 경우 정의할 수 있다. ***에는 원하는 글자가 들어가면 된다. 이 속성을 사용하여 자바스크립트에서 활용할 수 있는 정보를 포함시킬 수 있다. 이렇게 정의한 형식은 dataset.***으로 사용한다. 예시를 보자.
<html>
<body>
<div class="myclass" data-name="hello" data-say="world"></div>
<script>
const a = document.querySelector(".myclass")
const name = a.dataset.name;
const say = a.dataset.say;
console.log(`이름은 ${name}입니다. ${say}!`);
</script>
</body>
</html>div 태그에 data-name과 data-say가 있다. 이것을 script영역에서 dataset.name과 dataset.say를 이용하여 각각 변수 name과 say에 담았다. 이것을 실행하면 콘솔 창에는 "이름은 hello입니다. world!"가 출력될 것이다.
추가로, event.preventDefault라는 메서드가 있다. 이것은 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 기본 동작을 실행하지 않도록 지정한다. 예를 들면, a 태그는 누르게 되면 href를 통해 이동하거나 창이 새로고침 된다. 그럴 때 이 메서드를 사용하면 그러한 동작을 막는다. event에는 해당하는 이벤트의 이름이 들어가면 된다.
HTML 제어를 하는 방법을 통해 여러 가지 예제를 해보았다. 그것을 전부 여기에 적기보다는 다시 한 번 해보는 게 좋다고 생각하여 적지는 않았다. 열심히 해야겠다.
'javascript' 카테고리의 다른 글
| 15. HTML 태그 생성, 라이브러리 (0) | 2022.09.14 |
|---|---|
| 14. HTML 탐색하기, 서브 메뉴 만들기 (0) | 2022.09.13 |
| 12. 이벤트 (0) | 2022.09.08 |
| 11. 웹 페이지와 Javascript (0) | 2022.09.07 |
| 10. 비동기처리 (0) | 2022.09.06 |