728x90
반응형
html 요소를 꾸미는 메서드를 알기 위해선 먼저 javascript가 어떤 역할을 하는 언어인지 부터 알아야 한다.
자바스크립트란, 기존에 정의돼있는 HTML, CSS를 변경할 수 있는 기술이다.
자바스크립트에 대한 기본적인 개념은 아래 링크에서 확인 가능
https://wowy0211.tistory.com/4
JavaScript 란?
자바스크립트(JavaScript) 기존에 정의돼있는 HTML, CSS를 변경할 수 있는 기술이다. 조금 더 덧붙여서 말하자면, 기존에 HTML과 CSS로는 웹페이지에서 할 수 없었던 복잡한 기능을 구현할 수 있도록(동
wowy0211.tistory.com
JS(JavaScript)로 우리는 HTML과 CSS를 수정하고 다룰 수 있으며 이 때 HTML의 요소를 선택해서 쉽게 바꾸기 위해
메서드 라는 것을 사용한다.
메서드의 종류를 알아보자.
| document.querySelector(선택자) | 해당 선택자로 선택되는 요소를 선택한다 |
| document.querySelectorAll(선택자) | 해당 선택자로 선택되는 요소를 모두 선택한다(배열) |
| document.getElementsByTagName(태그이름) | 해당 태그 이름의 요소를 모두 선택한다(배열) |
| document.getElementById(아이디) | 해당 아이디의 요소를 선택한다 |
| document.ElementsByClassName(클래스이름) | 해당 클래스에 속한 요소를 모두 선택한다(배열) |
보통 HTML의 요소를 선택할 때는 jquery라이브러리를 이용,
$("")를 사용하여 선택하는 경우가 많다(다고 한다... 많은 공부가 필요😒)
지금 배우고자 하는 것은 jquery를(라는 것을) 사용하지 않고, 자바스크립트에서 HTML 요소를 선택할 때 사용하는 함수
querySelector(), querySelectorAll() 이다.
querySelector
- HTML의 요소를 선택할 때 사용하며 Id, Name, Class, HTML 태그 등 다양한 요소들을 선택할 수 있다.
- 이름의 같을 경우 최상단의 요소를 선택한다.
- 요소를 선택하여 Value를 변경하거나 Style을 변경하는 등 다양한 동작들을 수행할 수 있다.
사용 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="querySelectorId">
<input type="text" class="querySelectorClass">
<input type="text" name="querySelectorName">
<script>
//id의 경우 맨 앞에 "#"을 붙여서 선택한다.
document.querySelector("#querySelectorId").value = "ID";
//class의 경우 맨 앞에 "."을 붙여서 선택한다.
document.querySelector(".querySelectorClass").value="Class입니다";
//Name의 경우 html태그[name="네임명"]을 사용해서 선택한다.
document.querySelector("input[name='querySelectorName']").value="Name테스트";
</script>
</body>
</html>
728x90
'언어 > JavaScript' 카테고리의 다른 글
| Javascript 함수에 대해서 (0) | 2022.09.14 |
|---|---|
| Javascript 조건문에 대해서 (0) | 2022.09.13 |
| 자바스크립트의 기본 사용 문법, 변수와 자료형에 대해서 (0) | 2022.09.06 |
| JavaScript 란? (0) | 2022.09.06 |