국비지원교육 24일차(5주차&자바스크립트)

Array메소드
원본 배열을 반복적으로 참조하는 메소드
- forEach() : 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한다.
- map() : 람다식을 시작하는 시작점. 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 실행 결과를 새로운 배열에 담아 반환한다.
- filter() : 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 결과값이 true인 요소들만을 새로운 배열에 담아 반환한다.

 

 

DOM의 개념

 

문서 객체 모델(Document Object Model)
문서 객체 모델은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다.

 

HTML에 사용 되는 메소드
- document.getElementsByTagName(태그이름) : 해당 태그 이름의 요소를 모두 선택. 결과는 배열값이 나타난다.  div는 많지만 h1은 하나이다. 하나여도 배열이 나타나고 , 없는 경우 null이 아니라 길이가 0인 배열 [] 이런 표시로 나타난다. 

 

 

console화면(결과물)

 

- document.getElementById(아이디) : 해당 아이디의 요소를 선택하여 맨 첫번째 하나만 가져옴. 만약 값이 없다면 null이 출력된다.

 

결과물을 출력하면 <h1 id="title">DOM연습</h1> 이게 모두 다 출력된다.

getElementsById

 

body 에 있는 내용

 

console화면 (결과물)

 

 

view가 abc와 123이 있는데 맨 첫번째 하나만 가져온다.

 

getElementById

body 에 있는 내용

 

console화면 (결과물)

- document.querySelector(선택자) : 해당 선택자로 선택되는 요소중 하나를 선택. document 내의 요소를 검색하고 여러 결과를 찾았다면 첫 번째 요소만 반환해주는 메소드

 

title이 id값이기 때문에 #title만약에 div2값이 필요하다고 하면 .div2 를 쓸 것이다.

 

qs = document.querySelector("div");여기서 div가 여러개 있지만 그중에 첫번째 하나만 출력된다.

만약 없다면 null을 출력한다

 

 

 

 

 

- document.querySelectorAll(선택자) : 해당 선택자로 선택되는 요소를 모두 선택. document 내의 요소를 검색하고 여러 결과를 찾았다면 모든 요소를 배열로 반환해주는 메소드

 

없는 경우  getElementsByTagName과 같이 null이 아니라 길이가 0인 배열 [] 이런 표시로 나타난다

 

 

 

innerHTML : innerHTML은 element 안의 HTML이나 XML을 가져온다.
innerText : element 안의 text값들만 가져온다. 즉 사용자에게 직접 보여지는 것들만 가져온다.
textContent : node의 속성이기 때문에 노드가 가지고 있는 텍스트 값을 모두 읽어온다.

 

그래서 아래의 결과를 보면 console 화면의 textContent : 민수 에서 민수앞에   innerText :민수  보다 공백이 더 많이 존재하는 것을 볼 수 있다.

 

 

- document. createElement : 지정한 tagName의 HTML 요소를 만들어 반환한다. 실체 자체는 없지만 메모리에 저장이 되어있어서 만약 div.innerHTML="내용이 바뀜"을 사용하게 되면 또 하나의 div가 생성이 되는 것이다.

 

혹시라도 tagName을 인식할 수 없다면  HTMLUnknownElement (en-US)값을 반환한다.

 

tagName의 예시: h1이 될수도있고, div가 될수도있고 table이 될수도 있다.

 

아래의 예시를 보면 원래 div는 class div2(바깥쪽)까지만 있었는데 createElement 를 통해 새로운 div(tagName)을 생성한 것이다. 대신 createElement  혼자서만 존재한다면 계속 메모리값에만 새로운div가 존재했을 것이다. 그래서 div.innerHTML을 통해 "내용이 바뀜"을 넣어주어 createElement  생성한 div 태그를 눈에보이게 출력할 수 있다. 이걸 토대로 여러가지를 응용할 수 있다.

 

- getAttribute : 속성에 접근
- setAttribute : 속성을 추가(또는 수정)
- removeAttribute: 속성을 제거 

 

 

빨간박스>   setAttribute가  class를 a로 바꿔준거고
파란박스> 그러면 setAttribute 가 class에 접근했는데 a로 바뀐거니까
노란박스> 출력물은 a

 

setAttribute 를 통해 div에 title을 만들어주고 // <div id="view" title="title">abc</div>

removeAttribute를 통해 title을 삭제해준 것이다.

 

 

classList 

 

 

classList : class를 관리해주는 DOM 속성이다.
add, remove, contains, toggle 등의 함수를 사용하여 구성한다.

console.log(div.classList);
        div.classList.add("red"); //색을 바꿔줌
        div.classList.remove("a"); // a를 없애줌
        div.classList.toggle("c"); //class에 c가 있다면 c를 삭제 
        div.classList.toggle("c"); //class에 c가 없다면 c를 추가
        let red = div.classList.contains("red");

 

 

 

 

 

 

 

노드(node)

 

 

HTML DOM은 계층적 단위에 정보를 저장하고 있는데 이것을 노드라고 한다.


1. parentNode : 부모 노드 ; 가장 중요한 노드이다. 이것만큼은 꼭 알아두도록 하자.
2. childNodes : 자식 노드 리스트
3. firstChild : 첫 번째 자식 노드
4. lastChild : 마지막 자식 노드
5. nextSibling : 다음 형제 노드
6. previousSibling : 이전 형제 노드