[풀스택] JavaScript (2) : DOM

1. 문서 객체 모델(DOM, Document Object Model) : XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공.

1) 해당 요소 접근하기

(1) querySelector('css 선택자') : node 하나만 반영

(2) querySelectorAll('css 선택자') : node List 반영

(3) getElementById('해당 id') : node 하나만 반영

(4) getElementsByName('해당 name') : node List 반영

(5) getElementsByTagName('해당 Tag의 이름') : node List 반영

2) 해당 요소의 주변 노드

(1) parentNode : 해당 요소 상위 노드(부모 노드)

(2) childNode : 해당 요소 하위 노드(자식 노드)

3) 태그 생성부터 태그 속성 지정, 텍스트 삽입 까지

 (1) createElement(태그명) : 태그 생성 <태그명></태그명>

var div = document.createElement("div");

 (2) createAttribute("style") : 속성 지정 

var attr = document.createAttribute("style")

 (3) nodeValue : 노드 값 (함수 아님)

attr.nodeValue = "border: 2px solid blue";    // <div style = "border: 2px solid blue"></div>

 (4) setAttributeNode(속성) : 속성 전달

div.setAttributeNode(attr);    // <div style = "border: 2px solid blue"></div>

* setAttributeNode(속성, 속성 적용할 내용) : div.setAttribute("style", "border: 2px solid red")

 (5) createTextNode(생성할 텍스트) : 텍스트 노드 생성

var txt = document.createTextNode("엘리먼트 생성!")   // <div style = "border: 2px solid blue">엘리먼트 생성!</div>

 (6) appendChild(생성된 텍스트) : 해당 노드에 전달(추가)

div.appendChild(txt)

4) 생성 되어 있던 노드를 바탕으로 수정 (교체 및 삽입, 제거)

 (1) parentNode.replaceChild(newChild, oldChild) : 특정 부모 노드의 한 자식 노드를  다른 노드로 교체.

 (2) parentNode.insertBefore(newNode, referenceNode) : 참조된 노드 앞에 특정 부모 노드의 자식 노드를 삽입.

 (3) Node.innerHTML = '텍스트' : 해당 태그 안에 HTML 삽입. (innerText는 텍스트 삽입)

 (4) Node.removeChild(delChild) : 자식 요소 삭제 

 (5) element.removeAttribute(attrName) : 속성 삭제

 

2. array (배열) : 여러개의 값을 효과적으로 관리하기 위한 객체

1) 생성 : var arr = new Array(); 

var arrayLiteral = ['v1', 'v2', 3, 4] 

var arrayObj1 = new Array(5) // 빈 배열 [ , , , , ] 생성

var arrayObj2 = new Array(1,2,3,4,5)

2) join 함수 : [1,2,3,4,5].join('+') --> 1+2+3+4+5 

* 수식 작동하게 하고 싶다면 eval 함수 사용 eval('1+2+3+4+5') --> 15

* eval은 보안 문제 때문에 주의해서 사용해야 함! 거의 사용하지 않음.

3) 정렬 .sort()

(1) 문자열 정렬 : ascii code 순 정렬

(2) 역순 : reverse *함수아님

--> .sort().reverse : 내림차순

4) 큐 (선입선출) : .push('넣을값')로 넣고 .shift()로 빼기

 스택 (선입후출, 후입선출) : .push('넣을값')로 넣고 .pop()으로 빼기. 뒤부터 출력하기

5) 슬라이스 : .slice(시작, 끝+1)

 

3. popup : window.open(url, name, specs, replace);

1) 반환값(ret) : 새로 만들어진 창 객체가 반환. 창의 생성에 실패하면 null을 반환. 이 객체를 통해서 새창을 제어. 
2) url : 새창에 보여질 주소. 비워두면 빈창.
3) name : 새로 열릴 참의 속성 또는 창의 이름을 지정. 기본값은 "_blank" 
- _blank : 새 창에 열림
- _parent : 부모 프레임에 열림
- _self : 현재 페이지 대체
- _top : 로드된 프레임셋을 대체
- name(임의의 이름) : 새 창이 열리고 창의 이름을 지정. 동일한 이름에 다시 open() 하면 기존 열린창의 내용이 바뀜. 다른이름 사용시 다른창 열림.

4) specs : 창의 크기, 스크롤여부, 리사이즈 가능등의 속성을 지정.

* 프로퍼티
 -document
 -history
 -location
 -navigator
 -screen
 -frames
 -parent
 -top
 -self
* 메서드
 -alert()
 -confirm()
 -prompt()
 -back()
 -forward()
 -setInterval()
 -clearInterval()
 -setTimeout()
 -open()
 -close()
 -scroll(),scrollBy(), scrollTo()

 

 

4. location

1) location.href="http://www.naver.com" // 해당 링크로 이동해라

2) location.assign("http://www.google.com") // 해당 링크로 이동해라

3) location.replace("http://lc.multicampus.com/k-digital") // 현재 페이지를 바꿔버려라

4) location.reload(); // 새로고침

 

5. 체크박스 <input type="checkbox"> : 체크박스.checked는 불리언 값으로 나타남.

 

6. children vs childNodes : children은 <태그>만 가져옴. childNodes는 텍스트 다 가져옴(빈 텍스트까지!)

 

7. 유효성 검사

for (var i = 0; i < vals.length; i++) {
                if(vals[i] == null || vals[i] == "" || vals[i] == undefined){
                    alert("제대로 입력했는지 다시 한번 확인해 주세요!")
                    return;
                }
            }

 

8. ajax (비동기 통신) :  Asynchronous JavaScript and XML

 * Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있음. Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있음.

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){
    // 4 : 요청 완료
    if(xhr.readyState == 4){
        // 200 : 정상 응답
        if(xhr.status == 200){
            // alert(xhr.responseText);
            var respXml = xhr.responseXML; }
            
// 해당 경로에 get 방식으로 요청.
xhr.open("GET", "받고싶은 파일.xml");
xhr.send();