728x90
반응형
1. DOM(Document Object Model) 선택 메소드
1. getElementById
- 사용 목적: ID 속성을 사용하여 단일 요소를 선택합니다.
- 반환 값: 해당 ID를 가진 첫 번째 요소를 반환합니다. 만약 해당 ID를 가진 요소가 없다면 null을 반환합니다.
- 특징: ID는 페이지 내에서 유일해야 하므로, 이 메소드는 항상 단 하나의 요소만을 반환합니다.
2. getElementsByClassName
- 사용 목적: 클래스 이름을 사용하여 요소들을 선택합니다.
- 반환 값: 해당 클래스 이름을 가진 모든 요소를 담은 HTMLCollection을 반환합니다.
- 특징: 반환되는 HTMLCollection은 실시간으로 업데이트되는 살아있는(collection). 즉, DOM 구조가 변경되면 컬렉션 내용도 자동으로 업데이트됩니다.
3. querySelector
- 사용 목적: CSS 선택자를 사용하여 단일 요소를 선택합니다.
- 반환 값: 주어진 CSS 선택자와 일치하는 문서 내 첫 번째 요소를 반환합니다. 만약 일치하는 요소가 없다면 null을 반환합니다.
- 특징: getElementById, getElementsByClassName, getElementsByTagName 등의 기능을 모두 포함할 수 있는 더 일반적이고 강력한 메소드입니다.
4. querySelectorAll
- 사용 목적: CSS 선택자를 사용하여 일치하는 모든 요소를 선택합니다.
- 반환 값: 주어진 CSS 선택자와 일치하는 모든 요소를 담은 NodeList를 반환합니다.
- 특징: querySelectorAll에 의해 반환된 NodeList는 getElementsByClassName이나 getElementsByTagName에 의해 반환된 HTMLCollection과 달리 살아있지 않습니다(static collection). 즉, 반환된 후 DOM 구조가 변경되어도 컬렉션 내용은 업데이트되지 않습니다.
요약
- getElementById: ID를 사용해 단일 요소를 선택합니다.
- getElementsByClassName: 클래스를 사용해 여러 요소를 선택합니다(살아있는 HTMLCollection 반환).
- querySelector: CSS 선택자를 사용해 단일 요소를 선택합니다.
- querySelectorAll: CSS 선택자를 사용해 여러 요소를 선택합니다(살아있지 않은 NodeList 반환).
1.1 querySelector 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#my-div{
background-color: aqua;
width: 100px;
height: 100px;
}
</style>
<script>
var width = 100;
var height = 100;
function myFuc(){
width = width + 100
height = height + 100
var myDiv = document.querySelector("#my-div") //quertySelector는 '정해지지 않은 변수'의 선택자이다. 디비전은 #으로, 클래스는 .으로 접근한다.
myDiv.style.width = width + 'px';
myDiv.style.height = height + 'px';
}
</script>
</head>
<body>
<div id = 'my-div'>
JavaScript
</div>
<button onclick="myFuc()">클릭</button>
</body>
</html>
- querySelector
- '정해지지 않은 변수'의 선택자이다.
- 디비전은 #으로, 클래스는 .으로 접근한다.
- 단일 접근
1.2 querySelectorAll 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#my-div{
background-color: aqua;
width: 200px;
height: 400px;
}
.box{
width: 100px;
height: 100px;
background-color: blueviolet;
margin:10px;
}
</style>
<script>
function myFuc(){
var box = document.querySelectorAll("#my-div>.box")
box[0].innerText = '변경됨1';
box[1].innerText = '변경됨2';
box[2].innerText = '변경됨3';
}
</script>
</head>
<body>
<button onclick="myFuc()">클릭</button>
<div id="my-div">
<div id = '1' class = 'box'>박스1</div>
<div id = '2' class = 'box'>박스2</div>
<div id = '3' class = 'box'>박스3</div>
</div>
</body>
</html>
- querySelectorAll
- 여러 요소에 접근하는 메서드이다.
- 동일한 이름을 가져야하므로 id는 해당하지 않고(id는 중복되면 안됨), 클래스명은 동일한 이름을 가지므로 가능하다.
- id가 달라도 참조하는 클래스가 같으면 한번에 여러 요소에 접근 가능하다.
- 하위 선택자 '>'를 사용할 수 있다.
- #my-div>.box : my-div 디비전 밑에 있는 box 클래스를 의미한다. querySelectorAll (.box)로 접근해도 된다.
1.3 querySelectorAll 예제#2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#my-div{
background-color: aqua;
width: 200px;
height: 400px;
}
.box{
width: 100px;
height: 100px;
background-color: blueviolet;
margin:10px;
}
</style>
<script>
function myFuc(){
var box = document.querySelectorAll(".box")
for(var i=0; i<box.length; i++){
// box[i].innerText='변경됨'+(i+1);
box[i].innerHTML='<b style="color:red">변경됨'+(i+1)+'</b>';
}
}
</script>
</head>
<body>
<button onclick="myFuc()">클릭</button>
<div id="my-div">
<div id = '1' class = 'box'>박스1</div>
<div id = '2' class = 'box'>박스2</div>
<div id = '3' class = 'box'>박스3</div>
</div>
</body>
</html>
- for문을 사용해 각 box요소에 접근해 각각을 변경 할 수 있다.
- innerHTML을 사용하면 태그요소까지 추가할 수 있다.
- b style은 글씨가 진하게 표시된다.
1.4 getElementById 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
<script>
function myFuc(){
var myInput=document.getElementById("my-input")
alert(myInput.value)//김대리
myInput.value = '최부장';
}
</script>
</head>
<body>
<input type="text" id="my-input" value="김대리">
<button onclick="myFuc()">클릭</button>
</body>
</html>
- getElementById로 단일 요소를 반환받아 접근한다.
- input은 웹 페이지에 입력창이 나온다.
- value값은 입력창에 미리 입력된 값이다.
- myInput.value로 미리 입력된 값에 접근해 수정할 수 있다.
2. HTML Input태그의 Type
1). text
- 설명: 가장 기본적인 입력 필드 유형입니다. 사용자가 한 줄의 텍스트를 입력할 수 있게 해줍니다.
- 주 사용처: 사용자 이름, 이메일 주소, 검색어 등 단순 텍스트를 입력받을 때 사용됩니다.
2). checkbox
- 설명: 사용자가 하나 이상의 항목을 선택할 수 있게 해주는 입력 필드입니다. 각 체크박스는 독립적으로 체크/언체크 될 수 있습니다.
- 주 사용처: 여러 옵션 중 다수를 선택해야 할 때 사용됩니다. 예를 들어, 설문조사에서 관심사를 선택하라는 질문에 사용될 수 있습니다.
3). radio
- 설명: 사용자가 주어진 옵션들 중 하나만 선택할 수 있게 해주는 입력 필드입니다. 라디오 버튼들은 그룹으로 묶여 있으며, 하나가 선택되면 그 그룹 내의 다른 버튼이 선택되어 있을 경우 그 선택이 해제됩니다.
- 주 사용처: 성별, 예/아니오 질문 등 한 가지 옵션만 선택해야 할 때 사용됩니다.
2.1 type = 'text' 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#my-div1{
width: 100px;
height: 100px;
background-color: aqua;
margin: 0 auto;
}
</style>
<script>
function myFuc(){
var myDiv = document.getElementById("my-div1")
var myInput1=document.getElementById("my-input1")
myDiv.style.width = myInput1.value + 'px'
var myInput2=document.getElementById("my-input2")
myDiv.style.height = myInput2.value + 'px'
var myInput3=document.getElementById("my-input3")
myDiv.style.backgroundColor = myInput3.value
}
</script>
</head>
<body>
가로<input type="text" id="my-input1" >
세로<input type="text" id="my-input2" >
색깔<input type="text" id="my-input3" >
<button onclick="myFuc()">클릭</button>
<div id = "my-div1">
박스
</div>
</body>
</html>
- 가로, 세로, 배경색 값을 입력 받아서 div의 속성을 변경한다.
- input 태그 type="text"를 사용하면 사용자로부터 text를 입력받을 수 있는 창이 웹페이지에 나온다.
- getElementById는 요소를 하나씩 읽어오므로 input태그 각각의 id를 설정해줘서 접근한다.
2.2 type = 'checkbox' 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
<script>
function myFuc(){
var myCheck = document.getElementById("my-check")
alert(myCheck.checked)//false, checked 함수는 체크가 되어있다면 true, 체크가 되어있지 않다면 false를 반환한다.
}
</script>
</head>
<body>
<input type="checkbox" id = "my-check">
<button onclick="myFuc()">클릭</button>
</body>
</html>
- checked 함수는 체크가 되어있다면 true, 체크가 되어있지 않다면 false를 반환한다.
2.3 type = 'checkbox' 예제#2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
<script>
function myFuc(){
var myCheck = document.getElementsByClassName("my-check")
console.log(myCheck[0].checked)
console.log(myCheck[1].checked)
console.log(myCheck[2].checked)
}
</script>
</head>
<body>
<input type="checkbox" class = "my-check">
<input type="checkbox" class = "my-check">
<input type="checkbox" class = "my-check">
<button onclick="myFuc()">클릭</button>
</body>
</html>
- getElementByClassName은 클래스에 접근해 반환한다. 클래스는 id와 달리 여러 요소에 접근 가능하다.
- 동일한 클래스명의 여러 요소는 배열로 저장되어 인덱스로 접근 가능하다.
2.4 type = 'checkbox' 예제#3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#my-div{
background-color: aqua;
width: 300px;
height: 300px;
}
</style>
<script>
function myFuc(){
var myCheck = document.getElementsByClassName("my-check")
var result = 0;
for(var i =0;i<myCheck.length;i++){
if(myCheck[i].checked===true){
result += parseInt(myCheck[i].value);
}
}
var myDiv = document.getElementById("my-div")
myDiv.innerText=result;
}
</script>
</head>
<body>
<input type="checkbox" class = "my-check" value="5000">
<input type="checkbox" class = "my-check" value="3000">
<input type="checkbox" class = "my-check" value="2000">
<button onclick="myFuc()">클릭</button>
<div id ="my-div"></div>
</body>
</html>
- 체크를 하면 value값을 반환 받아, 더한 값을 화면에 출력하는 코드
2.5 type = 'radio' 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
<script>
function myFuc(){
var myRadio=document.getElementsByClassName("my-radio")
for(var i =0; i<myRadio.length; i++){
if(myRadio[i].checked===true){
alert(myRadio[i].value)
}
}
}
</script>
</head>
<body>
<input type="radio" class = "my-radio" name="radio-group1" value="A"> <!--radio는 checkBox와 다르게 여러게중 하나만 선택하는 것이 목적이다.-->
<input type="radio" class = "my-radio" name="radio-group1" value="B"> <!--name으로 그룹을 묶어줘야 radio의 역할을 한다.-->
<input type="radio" class = "my-radio" name="radio-group1" value="C">
<button onclick="myFuc()">클릭</button>
</body>
</html>
- radio는 checkBox와 다르게 여러게중 하나만 선택하는 것이 목적이다.
name으로 그룹을 묶어줘야 radio의 역할을 한다. - 심리테스트 사이트 같은 곳에서 여러 항목 중 하나를 선택하는 것에 사용된다.
3. select 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
<script>
function myFuc(){
var mySelect = document.getElementById("my-select")
alert(mySelect.value)
}
</script>
</head>
<body>
<select id="my-select" onchange="myFuc()">
<option value="choice">선택</option>
<option value="apple">사과</option>
<option value="pear">배</option>
<option value="grape">포도</option>
</select>
</body>
</html>
- select는 선택상자가 나온다.
- onchange는 선택할 때 마다 myFuc()이 실행되도록 할 수 있다.
- option태그 안에 있는 값 또는 option value=""값을 반환하는 선택 상자.
4. setAtrribute로 이미지에 접근 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
width: 100px;
height: 100px;
}
</style>
<script>
var i =0;
function myFuc(){
var myImg=document.getElementById("my-img")
var imgSource = ['./images/sudal.jpg', './images/cat.jpg', './images/dog.jpg']
myImg.setAttribute('src',imgSource[i++])
if(i === imgSource.length) {
i=0; //이미지를 모두 바꿨다면 인덱스 초기화
}
}
</script>
</head>
<body>
<img src="./images/dog.jpg" alt="개" id = "my-img">
<button onclick="myFuc()">클릭</button>
</body>
</html>
- 클릭할때마다 배열에 저장된 경로에 접근해 이미지 변환하는 코드
- setAttribute 메서드로 해당 경로에 접근해 이미지를 변경할 수 있다.
4.1 setAtrribute로 이미지에 접근 예제#2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
<script>
function myFuc(){
var myInput=document.getElementById("my-input")
myInput.setAttribute('type','text')
}
</script>
</head>
<body>
<input type="password" id="my-input">
<button onclick="myFuc()">클릭</button>
</body>
</html>
- input 태그도 setAttribute로 타입을 바꿀 수 있다.
- password는 입력한 값이 아스트릭스(*)로 보이지만 text 타입은 텍스트가 모두 보인다.
5. Audio 클래스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
<script>
var audio_test = new Audio();
audio_test.src = './audio/my_piano1.mp3'
function play(){
audio_test.play();
}
</script>
</head>
<body>
<button onclick="play()">재생</button>
</body>
</html>
- Audio 객체는 mp3 파일을 재생할 수 있다.
- audio 객체 주요 메소드 설명 영문 링크 : https://www.w3schools.com/tags/ref_av_dom.asp
function stop(){
audio_test.pause;
audio_test.currentTime=0; //stop메서드는 따로 없기 때문에 currentTime을 0으로 바꿔서 같은 기능을 만든다.
}
- stop메서드는 따로 없기 때문에 currentTime을 0으로 바꿔서 같은 기능을 만든다.
6. 기타 라이브러리
책장, 책 넘기는 기능을 주기 위한 라이브러리 : http://www.turnjs.com/
홈페이지에 들어가서 라이브러리 사용 방법을 보고 웹페이지에 적용할 수 있다.
'Coding 공부 > JavaScript' 카테고리의 다른 글
[JavaScript] DOM 객체 처리하는 방법 5단계 (0) | 2024.05.29 |
---|---|
[JavaScript_project] ToDoList (미니 프로젝트) (0) | 2024.04.02 |
[JavaScript_Example] TrafficLight(HTML+CSS+JavaScript)#2 (0) | 2024.03.27 |
[JavaScript_Example] TrafficLight(HTML+CSS+JavaScript) (0) | 2024.03.25 |
[JavaScript] Jason, 영화 API 사이트에서 JASON 받아오기, html + css + javaScript 예제 (0) | 2024.03.25 |
댓글