[ JavaScript ] 주요 API : 체크상태 변경 / 엘리먼트 조작 / 바로실행함수

하루입니다.

 

 

---

 

주요 API : 체크박스/라디오버튼의 체크상태 변경하기

체크박스/라디오버튼의 체크상태 조회하기

        let 변수 = element.checked;

        * 변수에는 true 혹은 false값이 대입된다.

 

체크박스/라디오버튼을 체크상태로 변경하기

        element.checked = true;

 

체크박스/라디오버튼을 체크해제 상태로 변경하기

        element.checked = false;

 

HTML 문서의 체크박스 중에서 체크된 체크박스만 선택하기

        let 변수 = document.querySelectorAll("선택자:checked");

        * 변수에는 체크박스 중에서 체크된 체크박스를 표현하는 모든 엘리먼트 객체가 저장된 배열유사객체(NodeList나 HTMLCollection)가 반환된다.

 

 

 

 

 

작은 사진 위에 커서를 올리면 큰 사진이 해당 작은 사진으로 바뀐다.

 

엘리먼트의 속성 조작하기

엘리먼트의 속성값 조회하기

        let 변수 = element.getAttribute("속성명");
        * 지정된 속성의 속성값이 변수에 저장된다.

 

엘리먼트에 속성 추가하기
        element.setAttribute("속성명", "속성값");
        * 엘리먼트에 새로운 속성이 추가된다.

 

엘리먼트에서 지정된 속성의 속성값 변경하기

        element.getAttribute("속성명", "속성값");
        * 엘리먼트에 속성을 추가하는 것과 속성의 값을 변경하는 메소드가 동일하다.
        * 실행했을 때 엘리먼트에 지정된 속성명에 해당하는 속성이 없으면 추가하고, 지정된 속성명에 해당하는 속성이 이미 정의되어 있으면 속성값만 변경한다.

 

엘리먼트에서 지정된 속성명의 속성 삭제하기
        element.removeAttribute("속성명");
        * 엘리먼트에서 지정된 속성명에 해당하는 속성을 삭제한다.

 

엘리먼트에서 지정된 속성명의 속성이 존재하는지 조회하기
        let 변수 = element.hasAttribute("속성명");
        * 엘리먼트에서 지정된 속성명에 해당하는 속성이 존재하면 true를 반환한다. 

* 속성값 변경시 주의사항 : value, disabled, checked, readonly는 input Element의 프로퍼티이다.
<input type="text" name="userName" value="홍길동" disabled readonly />

value 프로퍼티 변경하기
        element.value = "강감찬";
disabled 프로퍼티 변경하기
        element.disabled = false;
readonly 프로퍼티 변경하기
        element.readonly = false;

 

 

즉시실행함수

(function() {
         수행문;
         수행문;
})();

* 웹 브라우저가 HTML 문서를 로딩하면 자동으로 실행되는 함수다. 
* 이름 없는 함수이기 때무에 다시 실행할 수 없다.
* 주로, 웹페이지 로딩시 자동으로 실행해야 하는 작업을 작성할 때 사용된다.
- 웹 페이지 로딩시 자동으로 실행해야 하는 작업 예
         초기 데이터를 웹서버에서 가져오는 작업
         화면에 맨 처음에 표시할 정보를 출력하는 작업
* 엘리먼트에 이벤트 핸들러 함수를 바인딩 시키는 작업

 

 

 

---

 

 

 

잘못된 정보에 대한 지적은 언제나 환영입니다. 

 

복습 끝!