JavaScript/Javascript_Advanced

[JS]DOM(Document Object Model) part.3

MoZZANG 2022. 4. 15. 19:04

다양한 예제로 DOM을 좀 더 익혀보자

 

<body>
  <h2>DOM API 사용하기:노드 가져오기</h2>
  <fieldset style="width:60%">
    <legend>다양한 방법으로 노드 선택하기</legend>
    <h2>태그명으로 얻기</h2>
    <input type="checkbox" name="inter" value="POL">정치
    <input type="checkbox" name="inter" value="ECO" />경제
    <input type="checkbox" name="inter" value="ENT" checked />연예
    <input type="text" name="txt" />
    <input type="button" value="태그명으로 DOM객체 얻기" onclick="fnGetElementsByTag()" />
    <h2>name속성으로 얻기</h2>
    <input type="button" value="NAME속성에 지정한 값으로 DOM객체 얻기" onclick="fnGetElementsByName()" />
    
   
    <h2>클래스명으로 얻기</h2>
    <ul>
        <li><a href="#" class="portal">네이버</a></li>
        <li><a href="#" class="portal">다음</a></li>
        <li><a href="#" class="portal">네이트</a></li>
    </ul>
    <button onclick="fnGetElementsClass()">클래스명으로 DOM객체 얻어오기</button>
    <h3>아이디명으로 얻기</h3>
    <fieldset>
        <legend>이미지 교체</legend>
        <a href="javascript:fnChangeImage(1)">1번 이미지</a>
        <a href="javascript:fnChangeImage(2)">2번 이미지</a>
        <a href="javascript:fnChangeImage(3)">3번 이미지</a>
        <a href="javascript:fnChangeImage(4)">4번 이미지</a>
        <hr />
        <img id="image" src="../Images/1.jpg" alt="이미지교체" style="width:200px;height:200px" />
    </fieldset>
    <fieldset>
        <legend>전화번호 복사</legend>
        <select id="src">
            <option value="010">010</option>
            <option value="011">011</option>
            <option value="017">017</option>
            <option value="019">019</option>
        </select>
        -
        <input type="text" size="4" maxlength="4" id="srcTxt1" />
        -
        <input type="text" size="4" maxlength="4" id="srcTxt2" />
        <br />
        <input type="button" value="복사" onclick="fnCopy()" />
        <br />
        <select id="dest">
            <option value="010">010</option>
            <option value="011">011</option>
            <option value="017">017</option>
            <option value="019">019</option>
        </select>
        -
        <input type="text" size="4" maxlength="4" id="destTxt1" />
        -
        <input type="text" size="4" maxlength="4" id="destTxt2" />
    </fieldset>

  </fieldset>
  </body>

 

 

▲ body태그를 브라우저에 출력하면 위와 같다. 

 

 

 

 

1) 태그명 얻기 - checkbox에 checked한것과 input에 입력한 텍스트를 console창에 반환

 

function fnGetElementsByTag(){      
     var inputs =document.querySelectorAll('input');
      console.log('%O',inputs);//NodeList(3)
      
      //체크한 값과 입력값 콘솔에 출력하기
      var checkString='',textString;
      inputs.forEach(function(item){
         /* ※JS에서 checked속성의 체크 여부 판단시에는 true혹은 false로 판단*/
         if(item.type==='checkbox' && item.checked==true){
            checkString+=codeToText(item.value)+' ';
         }
         if(item.name==='txt') textString=item.value;
      });

      console.log('체크된 값:',checkString);
      console.log('입력한 값:',textString);
    }
    
    function codeToText(code){
      switch(code.toUpperCase()){
        case 'POL':return "정치";
        case 'ECO':return "경제";
        default:return "연예";
      }
    }

 

 

 

 

2. name속성으로 얻기

 

//name속성으로 얻기
    function fnGetElementsByName(){
      var names = document.querySelectorAll('[name=inter]');
      console.log('%O',names);//Nodelist(3)
 
      //체크된 박스는 체크 해제,체크 안된 박스는 체크하자
      //자스로 체크 설정시에는 checked="checked" 나 checked=true;
      //자스로 체크 해제시에는 checked=null 나 checked=false;
     //단,조건 판단시에는 반드시 true나 false 로 판단해야 된다.
     names.forEach(function(item){
        if(item.checked) item.checked=false;
        else item.checked=true;
     });
    }

▲ 정치와 연예만 체크하고 'Name속성에 지정한 값으로 DOM객체 얻기' 버튼을 누르면 아래와 같은 결과가 나온다.

 

 ▲ 화살표를 눌러 각각의 객체의 checked를 살펴보면 아래와 같다.

 

 

▲ 내가 체크했던 부분의 checked는 false로, 체크하지 않았던 부분은 true로 바뀐 것을 볼 수 있다.

 

 

 

 

3. 클래스명으로 얻기

 

//클래스명으로 얻기
    function fnGetElementsClass(){
      //var portals=document.getElementsByClassName('portal');
      //console.log(portals);//HTMLCollection
      var portals=document.querySelectorAll('.portal');
      console.log(portals);//NodeList
      //시작태그와 종료태그사이의 컨텐츠 읽어오기
      for(var i=0;i < portals.length;i++)
        console.log(portals[i].textContent);
      }

▲ class명이 portal인 a태그에 있는 텍스트들을 가져와서 출력해주는 코드

 

 

 

 

 

4. 아이디명으로 얻기1

 

 //아이디명으로 얻기1
    function fnChangeImage(num) {
      //var img=document.getElementById('image');
      var img = document.querySelector('#image');
      console.log('%O', img);//HTMLImageElement
      img.src = "../Images/" + num + ".jpg";
    }
    
    
    //body에 있는 코드
    <fieldset>
        <legend>이미지 교체</legend>
        <a href="javascript:fnChangeImage(1)">1번 이미지</a>
        <a href="javascript:fnChangeImage(2)">2번 이미지</a>
        <a href="javascript:fnChangeImage(3)">3번 이미지</a>
        <a href="javascript:fnChangeImage(4)">4번 이미지</a>
        <hr />
        <img id="image" src="../Images/1.jpg" alt="이미지교체" style="width:200px;height:200px" />
    </fieldset>

▲ a태그를 클릭하면 함수가 실행되도록 href에 값을 주었다. a태그를 클릭하면 Images라는 디렉토리에 있는 이름이 각각1,2,3,4인 jpg를 href에 담는다.

 

 

 

 

5. 아이디명으로 얻기2

▲위 화면에서 중간에 복사버튼을 기준으로 위 input에 번호를 입력하고 복사버튼을 투르면 복사버튼 아래에 있는 빈칸에 똑같이 입력되는 기능을 구현할 것이다.

 

 

 //아이디명으로 얻기2
    function fnCopy() {
      document.querySelector('#dest').value = document.querySelector('#src').value;
      document.querySelector('#destTxt1').value = document.querySelector('#srcTxt1').value;
      document.querySelector('#destTxt2').value = document.querySelector('#srcTxt2').value;
    }

 

'JavaScript > Javascript_Advanced' 카테고리의 다른 글

[JS]BOM(Browser Object Model) part.2  (0) 2022.04.18
[JS]BOM(Browser Object Model) part.1  (0) 2022.04.15
[JS]DOM(Document Object Model) part.2  (0) 2022.04.14
[JS]DOM(Document Object Model) part.1  (0) 2022.04.13
[JS]Function(함수) part.4  (0) 2022.04.12

'JavaScript/Javascript_Advanced'의 다른글

  • 현재글[JS]DOM(Document Object Model) part.3

관련글

댓글

티스토리툴바