다연이네

[days06] 1) js 컬렉션 2)DOM 본문

Web/JavaScript

[days06] 1) js 컬렉션 2)DOM

　다연　 2020. 12. 16. 22:02
반응형

 1. js 컬렉션 

elements / forms / arguments / options /links / images등등
뒤에s가 붙으면 컬렉션(~의 집합)이라고 생각하자

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form id="form1" name="form1" action="">
  Name : <input type="text" name="name" value="admin" />
  <br>
  Age : <input type="text" name="age" value="20" />
  <br>
  Email : <input type="email" name="email" value="admin@naver.com" />  
  <button type="button" value="ok">확인</button>
</form>  
<p id="demo"></p>


<script>
$("button").click(function(event) {
	//js 컬렉션 elements / forms / arguments / options /links / images등등
	//뒤에s가 붙으면 컬렉션(~의 집합)이라고 생각하자
	var form = document.forms["form1"]; //name값
	//alert(form.elements.length);  //4 (input3개 button1개)
	for (var i = 0; i <form.elements.length; i++) {
		$("#demo").html( $("#demo").html()+"<br>"+
				form.elements[i].value);
	}
})
</script>
</body>
</html>

form.elements.length

컬렉션의 개수 (버튼 몇개 input 몇개)

 

 

 

 

 2. DOM 

 

1. DOM 정의 : 문서에 엑세스하기 위한 표준을 정의
2. Document Object Model의 약자
3. W3C DOM 종류 
   ㄱ. Core DOM  :모든 문서 유형에 대한 표준
   ㄴ. XML DOM  :xml문서
   ㄷ. HTML DOM  :html문서
4. html DOM을 배워서 어디에 사용하냐 ? 
   ㄱ. html 요소에 Access해서 내용 변경
   ㄴ. html 요소에 Access해서 스타일 변경
   ㄷ. html 요소에 Access해서 이벤트 처리
   ㄹ. html 요소에 Access해서 또다른 html 요소를 추가/수정/삭제

 

xx.html 요청(클라이언트에서) -> 응답(서버에서) -> 웹페이지 로딩 (브라우저가) , 이 때 HTML DOM 모델 트리 생성 

 

 	1. HTML DOM 문서 객체를 통해서 html 요소 찾기
 		ㄱ. document.getElementById(id)
 		ㄴ. document.getElementsByClassName(name)
 		ㄷ. document.getElementsByName(name)
 		ㄹ. document.getElementsByTagName(tagName)
 	
 	2. html 요소 변경
 		ㄱ. element.innerHTML = content
 		ㄴ. element.attribute = ???
 			document.getElementById("btn").value = ???;
 		ㄷ. element.style.property = ???
 		ㄹ. element.setAttribute(속성명, 속성값);
 			element.getAttribute(속성명);
 	
 	3. html 동적 생성, 추가, 수정, 삭제
 		ㄱ. document.createElement(element);
 		ㄴ. document.removeElement(element);
 		ㄷ. document.replaceChild(new, old);
 		ㄹ. document.appendChild(element)
 		ㅁ. document.write("<div>test</div>");
 		
 	4. 이벤트 처리
 	 document.getElementById("demo").onclick = function(){}
 	 document.getElementById("demo").onmouseover= function(){}
 	 document.getElementById("demo").onmousemove = function(){}
 	 document.getElementById("demo").onmouseup = function(){}
 	 등등
 	 
 	5. 
 		document.body == <body> 요소
 		document.cookie == 쿠키
 		document.doctype == <!DOCTYPE html> 선언문
 		document.documentElement == <html>요소
 		document.forms == 모든 <form> 요소들
 		document.head == <head> 요소
 		document.images == 모든<img> 요소들
 		document.links == 모든 <a> 요소들 , 모든 <area> 
 		*** document.referrer *** 
     		     링크를 통해 현재 페이지로 이동 시킨, 전 페이지의 URI 정보를 반환.
                 페이지로 바로 접근하였을 경우 이 값은 빈 문자열을 반환함.
                 (링크를 통해서 온것이 아닌 예사로 북마크를 통해서 이동했을 경우). 
                 문자열만을 반환하기 때문에,  참조 페이지(referring page)에 대한 
                 DOM  액세스가 제공되지 않음. 
 		document.scripts == 모든 <script> 요소들
 		document.title == <title> 요소

 

 

document.querySelector() - 여러개 찾아지면 맨 앞 하나만 받아옴

document.querySelectorAll() - 여러개 찾아지면 다 받아옴

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<h3>Lorem ipsum dolor sit amet. </h3>
<p>hello world</p>
<p class="intro">Lorem ipsum dolor.</p>
<p class="intro">Ipsa itaque tempora!<b>Lorem ipsum.</b> test	</p>
<p id="demo"></p>
<p id="demo2"></p>

<script>

 //var p = document.querySelector("p.intro");//여러개 찾아져도 찾아진 첫번째거 가져옴
 //$("#demo").html(p.innerHTML); 
 
 var ps  =document.querySelectorAll("p.intro");
 $("#demo").html(ps[0].innerHTML);
 $("#demo2").html(ps[1].innerHTML);
 
</script>
</body>
</html>

 

 js를 사용해 DOM 탐색 
 1. W3C - html DOM 표준을 따르면 html 문서의 모든 것 - 노드
 2. 모든 html 요소(Element)태그는 Element Node(요소 노드)
 3. 요소 안에 있는 텍스트는 Text Node(텍스트 노드)이다
     예) <p id="box"> 텍스트 내용</p> 
 4. 시작 태그안에 있는 속성(id등)도 Atrribute Node(속성노드)이다. (없어질거다)
 5. 주석처리도  Comment Node(주석노드)이다.

 

 [Node들 간의 관계]
                [html]Node(RootNode)  부모노드(parent Node) (RootNode는 부모노드가 없다.)
 [head]Node                 [body]Node   자식노드(child Node)

첫번째 자식노드             두번째 자식노드(마지막 자식노드)
fisrtChild                       lastChild
childNodes[0]                childNodes[1]

 

예) parentNode(html).firstChild(head)다음 형제노드

                            .nextSibling(body)
                                                    .previousSibling(이전형제노드 == head)

 

nextElementSibling 속성 : Element.src 속성 (요소 형태로 돌려줌)

nextSibling 속성 : Node (노드 형태로 돌려줌)

 

노드간에 탐색할 때 사용하는 속성
1. parentNode 속성 : 부모노드
2. childNodes[i]    : 모든 자식들 가져옴
3. firstChild
4. lastChild
5. nextSibling
6. previousSibling

 

Node의 Type 속성 (alert으로 nodeType체크해보면 해당 번호가 출력됨)
1. Element-Node
2. Attribute-Node
3. Text-Node
4. Comment-Node
5. Document-Node  루트노드인 <html>을 나타냄
6. Document-Type-Node  <!DOCTYPE>

 

Node의 nodeValue 속성
1. 텍스트 노드의 nodeValue : 텍스트(문자열) 그 자체
2. 속성 노드의  nodeValue : 속성값
3. 요소 노드의   nodeValue : X

 

Node의 nodeName 속성  
1. 요소 노드의 nodeName 속성 - 대문자 태그명 H1

2. 텍스트 노드의 nodeName 속성 - #text
3. 속성 노드의 nodeName 속성 - 속성명
4. 문서 노드의 nodeName 속성 - #document

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>


<script>
	//1. h1(id01) DOM 을 사용해 노드를 얻어와서 그 안의 MyFirst Page 텍스트를 경고창으로 출력
	// 텍스트도 텍스트 노드이다 => 텍스트 노드값을 얻어올때 우린 지금까지
				//element.innerHTML 속성 사용 (목록이라면 HTMLCollection 돌려줌)
	alert(document.getElementById("id01").innerHTML);
	
	
	//		2번째 방법
	//		텍스트노드는 h1의 자식노드이다.
					//node 가져옴 (목록이라면 nodeList 돌려줌)
	//document.getElementById("id01").childNodes; => nodeList형태로 모든 자식 가져옴
	var txtNode = document.getElementById("id01").firstChild; //결과적으로 텍스트 노드 가져온 것	
	
	//nodeType 체크
	alert(txtNode.nodeType); //3
	//nodeValue 체크
	alert(txtNode.nodeValue); //My First Page
	
	//3번째 방법
	alert(document.getElementById("id01").childNodes[0].nodeValue);
	
	
	
	//document.body(body)    /    document.documentElement(html)
	alert(document.body.innerHTML); //body부분 코딩 출력
	alert(document.documentElement.innerHTML); //html 코딩 전체 출력
	
	//nodeName 체크
	alert(document.getElementById("id01").nodeName); //H1
	alert(document.getElementById("id01").firstChild.nodeName); //H1

	
</script>
</body>
</html>

 

새 요소(노드)를 추가 : var x =  document.createElement("태그");

텍스트 노드 생성 -> 새 요소(노드)에 자식으로 추가 : 부모가될노드.appendChild(추가할노드);

마지막 자식으로 추가 : 부모.appendChild(추가할노드);

앞의 자식으로 추가 : 부모.insertBefore(추가할노드, 누구자식); //어떤 부모의 누구 자식 앞에 추가

요소 제거 : 요소.remove();

                부모.removeChild(부모.childNodes[1]); 

요소 교체 : replaceChild(새노드, 교체노드)    /    부모.replaceChild(새노드, 교체노드)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<!-- html 요소(노드) 추가 -->
<div id="div1">
	<p id="p1">Lorem ipsum dolor sit </p>
	<p id="p2">amet, consectetur.</p>
</div>

<script>
	//새 요소(노드)를 추가
	var para =  document.createElement("p");
	//텍스트 노드 생성 -> 새 요소(노드)에 자식으로 추가
	var txtNode = document.createTextNode("this is new");
	para.appendChild(txtNode);
	//<p> this is new</p>
	
	var box = document.getElementById("div1");
	
	//마지막 자식으로 추가 - appendChild()
	box.appendChild(para);
	//앞의 자식으로 추가
	var p = document.getElementById("p2");
	//어떤 부모(box)의 누구 자식(p1) 앞에 추가
	box.insertBefore(para, p);
	
	//기존의 html 요소를 제거 : remove() / removeChild()
	//para를 제거하겠다 => 제거할 요소.remove();
	para.remove();
	
	//removeChild() 함수를 사용해서 p1을 제거
	//- 형식 ?  제거할요소.remove()
	//부모 					자식
	box.removeChild(document.getElementById("p1")); //1번
	//box.removeChild(box.firstChild); //이러면 삭제 안됨 왜 ? 
	//이유
	alert(box.firstChild.nodeName); //#text
	//div의 첫번째 자식 노드는 p1이니까 p찍힐줄 알았는데 #text가 짝혔다 => text노드를 찍은 것
	//<div id="div1"> ??? <-여기 텍스트가 찍혀있는 것, 주석 있으면 주석도 자식노드로 잡힘
	box.removeChild(box.childNodes[1]); //이렇게 해야 p1태그 삭제 됨
	
	var dNode = box.childNodes[1];
	//부모노드를 바로 찾을 수 있다 : parentNode
	dNode.parentNode.removeChild(dNode);
	
	
	
	//p2 -> para 교체
	//insertBefore para 끼워넣고 p2 삭제해도 교체 가능하나,
	//replaceChild(새노드, 교체노드) 함수 존재
	box.replaceChild(para, p2);
	
	
</script>
</body>
</html>

 

HTMLCollection = element(요소)들의 집합
nodeList = node들의 집합

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p>Lorem ipsum dolor.</p>
<p>Quod delectus accusamus.</p>
<p>Nihil sequi eveniet.</p>
<p>Exercitationem voluptatum laborum!</p>
<p>Velit ab libero.</p>


<script>
//HTMLCollection = element(요소)들의 집합  element(속성, 텍스트) 이렇게 포함되지만
//nodeList = node들의 집합		nodeList = 속성노드, 텍스트노드 따로 있다

	// Collection, List 둘 다 마치 배열처럼 사용하면 된다. 
    //(하지만 배열은 아니다) => 배열관련 메소드는 사용 불가( push(), pop() 등 )
	var myList = document.getElementsByTagName("p");
    //var myList = document.querySelectorAll("p"); 이렇게 노드로 잡아도 됨 (사용은 똑같이하면 됨)

	//alert(myList.length); //5
	for (var i = 0; i <myList.length; i++) {
		myList[i].style.color="red";
	}
	
		
	//nodeList = 속성노드, 텍스트노드 포함됨
</script>
</body>
</html>
반응형
저작자표시 비영리

'Web > JavaScript' 카테고리의 다른 글

[days07] DOM사용 예시  (0) 2020.12.17
[days06] 이벤트 처리 방법, 전파 방법(버블링 외)  (0) 2020.12.16
[days06] 공 튀기기  (0) 2020.12.16
[days06] draggable()와 마우스 관련 이벤트  (0) 2020.12.16
[days06] 클로저(Closure) (중요! 취업질문 多)  (0) 2020.12.16
'Web/JavaScript' Related Articles more
Comments