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();
'코딩 어쩌구 > web' 카테고리의 다른 글
[풀스택] Django : 기초 (0) | 2022.02.04 |
---|---|
[풀스택] jQuery (0) | 2022.01.30 |
[풀스택] JavaScript (1) : 기본 조작 (0) | 2022.01.27 |
[풀스택] HTML, CSS로 Layout 만들기 (0) | 2022.01.26 |
[풀스택] CSS (0) | 2022.01.22 |