Coding_Beginner_JH

Coding 공부/JavaScript

[JavaScript] DOM 선택 메소드, Input type('text', 'checkbox', 'radio'), select, setAtrribute, Audio 예제

CBJH 2024. 4. 1.
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>

 

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

볼 만한 글

댓글

티스토리툴바