Javascript 필수 함수 정리

devpad.tistory.com/37

[조언] jQuery 보다 먼저 알았으면 좋았을 것들

> 출저 입니다.

 

1. DOM 선택

 1) Id

  > document.getElementById( "Idvalue" )

     document.querySelector( "#Idvalue" )

    

 2) class

  > document.getElementsByClassName( "classname" )

     document.querySelectorAll( ".classname" )

 

 3) 태그명

  > document.getElementsByTagName( "tagname" )

     document.querySelectorAll( "tagname" )

 

 

2. 속성 값

 1) 값 얻기

  > document.querySelector( "div" ).getAttribute( "href" )

 

 2) 값 변경

  > document.querySelector( "div" ).setAttribute( "href", "www.blahblah.com" )

 

 3) 값 삭제

  > document.querySelector( "div" ).removeAttribute( "href" )

 

 

3. 이벤트

 1) 추가

  > function eventfunc() { alert( " 이벤트 함수 " ); }

     document.querySelector( "div" ).addEventListener( "click", eventfunc );

 

 2) 삭제

  > document.querySelector( "div" ).removeEventListener( "click", eventfunc );

 

 3) 임의 실행

  > document.querySelector( "div" ).click()

  

 4) 사용자 정의 이벤트 실행

  > const evt = new CustomEvent( "@click" ) 

  > document.dispatchEvent( "evt" )

  - IE11 이하 

  > const evt = document.createEvent( "CustomEvent" )

  > evt.initCustomeEvent( "@click", true, false, "some data" )

  > document.dispatchEvent( evt )

 

 

4. 문자열 변경

  > document.querySelector( "#Idvalue" ).innerHTML = "Change text"

 

 

5. 비동기 요청

  > const req = new XMLHttpRequest()

     req.open('GET', '/resource', true);

     req.onreadystatechange = () => {

         if (req.readyState === 4) {

          if (req.status === 200) success()

          else faile()

         }   

     }

     req.send(null)

 

 

6. 참고

 1) 컬렉션 다루기

   > Array.from(document.querySelectorAll('li')).forEach(li => {

      // 실행할 내용

      })

 

 2) 객체 합치기

  > const obj3 = Object.assign({}, obj1, obj2)