[자바스크립트] 보충 2

1. DOM 구조와 엘리먼트

 

 

DOM (Document Object Model)

 

 

E1: E-태그명(엘리먼트) 

 

* : 문서에 있는 모든 요소를 찾아라 찾아라 비밀의 열쇠

E1 : 태그명만 작성하면 해당 이름을 가진 모든 태그를 찾아라

E1 #id : # - id 속성값을 이용해서 찾을 때 (주의점: 같은 문서 내에서 id 속성값이 같은건 사용할 수 x, 태그가 다르더라도 id는 사용 불가)

E1,E2 : ,는 합집합( E1도 찾고 E2도 찾아라) 여러개 가능 

E1 E2 : E1(조상)의 자손 중에 E2에 해당하는 것들을 찾아라

E1 > E2 : E1의 자식 요소 

E1 + E2 : E1의 형제 중 바로 뒤에 있는 것

E1 ~ E2 : E1을 기준으로 밑에 있는 형제 중 E2의 이름을 가진 것들을 찾아라

 

 

E1[attr] : attr의 속성을 가진 것들을 찾아라

E1[attr=val] : attr(속성)이 val인 것들을 찾아라

E1[attr^=val] : attr 중에 val로 시작하는 것들

E1[attr!=val] : attr이 val과 같지 않은 것들

E1[attr$=val] : attr이 val로 끝나는 것들

E1[attr*=val] : attr이 val에 포함되어있는 것들(일부분도 가능)

E1[attr|=val] : attr이 val과 같거나 'val-' 로 시작하는 것들

E1[attr~=val] : 속성값을 문장으로 줄 때 해당 단어가 있느냐? (*= 과 구분 방법: ???)

 

$("p a") : p의 자손 중에 a를 찾아라

$("div>span") : 자식 중에 span만 찾아라 

$("p+span") : 형제 중에 바로 뒤에 잇는 것들, div 밑에 있으면 찾아지지 않음 (바로 뒤=바로 위), 찾으면 

$("p~span") : 뒤에 있는 형제 중에 span을 찾아라 

 

 

 

엘리먼트(요소)

<시작태그 속성명="속성값">내용</종료태그>

 

** 찾아내는 명령어 3가지 ** (외우기)

document.getElementById("찾는 ID 속성값") : 제일 많이 사용,  id속성값은 하나라 element

document.getElementsByTagName("찾는 태그명") : 태그가 여러개 와서 elements, 검색된 데이터가 배열로 저장됨 

var 변수 = document.getElementsByClassName("찾는 class 속성값") : 앞에 있는 변수가 배열 변수가 됨, 배열 개수만큼 반복처리 해줘야함 

 

 

 

document.querySelector("p"); p 태그를 모두 찾아라 (찾아진것 중에 하나만 반환 - querySelector)

document.querySelectorAll("p.test");  : SelectorAll - 찾아진것 모두 반환, 배열같다고 생각하면 됨

-> p태그를 찾아라

documnet.querySelectorAll("p, div");    - p도 찾고 div도 찾아라 

 

<p class="test"></p>

 

document.querySelectorAll("[class]")  : class 속성을 가진 것들을 찾아라 

 

 

 

---

 

2. 이벤트 설정 

 

1) 이벤트: 사용자가 작업하기 위해 보내는 신호

 

2) 이벤트 핸들러 : 이벤트가 발생하면 이에 상응하는 작용을 하기 위해 작성된 프로그램을 말한다.

(자바스크립트에서는  함수로 구현)

 

3) 이벤트 설정 : 이벤트와 이벤트 핸들러를 연결하는 작업

 

 방법1) 태그에 직접 지정하는 방법(인라인 설정)

<태그명 on이벤트명="이벤트핸들러"> 내용 </태그명>

 

 방법2) 자바스크립트 영역에서 지정하는 방법

          ① 객체.on이벤트명 = function() {

                               처리할 내용들;

                               ....

                        };                                                                 : 이벤트 핸들러 부분

          ②  객체.addEventListener("이벤트명", 이벤트핸들러);   

             ex)  <input type="button" value="이벤트연습1" onclick="자바스크립트명령어 입력부분">

<input  ~  onclick="insa();">   : 함수 호출

 

 

 

방법 3)

---> 이 경우는 버튼3가 실행이 되지 않음

해결방법)

 

 

방법 4)

<script> window.onload = function(){       var btn2 = document.getElementById("testBtn2")       btn2.onclick = function() {                 alert("스크립트를 이용한 이벤트 설정입니다.  window.onload에서 설정");       }; } </script>

HTML문서의 내용이 모두 읽혀지고 DOM객체가 구성된 후 화면에 모든 내용이 나타난 후에 발생하는 이벤트

 

 

방법 5)