[7/16] 자바스크립트 기초 3

📌String함수

: 문자값을 저장한 객체를 생성하기 위한 클래스 함수이다. 이 함수를 사용함으로써 객체에 저장된 문자값에 대한 속성과 메소드를 사용할 수 있게 된다

==> 자바랑 비슷하다

charAt(index)	객체에 저장된 문자값의 특정 위치의 문자를 반환하는 메소드
indexOf	객체에 저장된 문자값에서 특정문자값을 검색하여 시작 위치값을 반환하는 메소드
replace	객체에 저장된 문자값에서 시작위치부터 종료위치의 문자값으로 변환하여 반환하는 메소드
toUpper/toLowerCase	대문자/소문자로 변환하여 반환하는 메소드
substring	객체에 저장된 문자값을 시작위치부터 종료위치까지 분리하여 반환하는 메소드
split(쪼개는 기준)	분리하는 기준점을 기준으로 분리하여 배열객체로 반환하는 메소드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
	<h1>내장 클래스 함수 - String</h1>
	<hr>
	<p>String 클래스 함수 : 문자값을 저장한 객체를 생성하기 위한 클래스 함수
	- 객체에 저장된 문자값에 대한 속성과 메소드 제공</p>
	
	<script type="text/javascript">
	var text=new String("Hello, JavaScript!!!");
	//alert(typeof(text));//object
	
	//String.toString() : 객체에 저장된 문자값을 반환하는 메소드
	//alert(text.toString());
	//alert(text);
	
	//String.length : 객체에 저장된 문자값의 문자갯수가 저장된 속성
	//alert("text.length = "+text.length);
	
	//String.charAt(index) : 객체에 저장된 문자값의 특정 위치의 문자를 반환하는 메소드
	alert("text.charAt(7) = "+text.charAt(7));
	
	//문자값은 내부적으로 배열객체로 처리
	// => [] 연산자에 첨자를 사용하여 배열객체의 요소값(문자)을 표현 
	//alert("text[7] = "+text[7]);
	
	//String.indexOf(search) : 객체에 저장된 문자값에서 특정 문자값을  
	//검색하여 시작 위치값(Index)을 반환하는 메소드
	// => 검색 문자값이 없는 경우 -1 반환
	alert("text.indexOf('Script') = "+text.indexOf("Script"));
	
	//String.replace(search,replace) : 객체에 저장된 문자값에서 특정 문자값을
	//검색하여 원하는 문자값으로 변환하여 반환하는 메소드
	alert("text.replace('Hello','Hi') = "+text.replace("Hello","Hi"));
	
	//String.toUpperCase() : 객체에 저장된 문자값을 대문자로 변환하여 반환하는 메소드
	alert("text.toUpperCase() = "+text.toUpperCase());

	//String.toLowerCase() : 객체에 저장된 문자값을 소문자로 변환하여 반환하는 메소드
	alert("text.toLowerCase() = "+text.toLowerCase());
	
	//String.substring(from,to) : 객체에 저장된 문자값에서 시작위치부터
	//종료위치의 문자값을 분리하여 반환하는 메소드 
	alert("text.substring(7, 11) = "+text.substring(7, 11));
	
	//String.split(pattern) : 객체에 저장된 문자값을 패턴문자(정규표현식)을 이용하여  분리해 배열객체로 반환하는 메소드
	var array = text.split(" ");//공백으로 쪼갠다
	for(var i = 0; i < array.length; i++){
		alert(array[i]);//Hello, JavaScript두개로 쪼개져서 한 단어씩 출력되게 된다
	}
	
	var text = "ABCDEFG";
	alert(typeof(text)); //string
	alert("문자 갯수 = " + text.length); //변수의 자료형이 String인 경우 내부적으로 String 객체로 처리된다
	//=> String객체의 요소 사용이 가능해 진다
	</script>
</body>
</html>

📌내장클래스 함수 Array

: 자바의 ArrayList랑 비슷하고 생각하면된다. 배열은 아니고 배열객체이므로 추가 삭제가 가능하다

값들을 여러 개 를 저장할 수 있다
값들을 요소의 첨자를 이용하여 접근 할 수 있다.

배열객체를 생성하는 방법

1. Empty Array객체 생성

var array = new Array();

2. 배열크기가 정해진 Empty Array객체 생성

var array = new Array(5);

3. 값이 들어있는 배열객체 생성

var array = new Array(10,20,30,40,50);

4. 값이 들어있는 배열객체 생성 -JSON이용

var array = [10,20,30,40,50];

요소 추가 : 객체의 마지막에 배열요소를 추가하여 값을 저장

array.push(value);

요소 삭제 : 객체의 마지막에 배열요소를 삭제하고 값을 반환

var num = array.pop();

unshift(value) : 객체의 첫번째에 배열요소를 추가하여 전달

array.unshift(num);

shift(value) : 객체의 첫번째 배열요소를 제거하고 값을 반환

array.shift(num)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>내장 클래스 함수 - Array</h1>
	<hr>
	<p>Array 클래스 함수 : 값을 여러 개 저장하기 위한 객체를 생성하기 위한 클래스 함수
	- 객체에 저장된 배열요소에 대한 속성과 메소드 제공</p>
	
	<!-- 스크립트 -->
	<script type="text/javascript">
	//배열 요소가 하나도 없는 객체를 생성 - Empty Array
	//var array = new Array();
	
	//Array.length : 배열 요소의 갯수를 저장한 속성
	//alert(array.length);
	
	//Array.toString() : 모든 배열 요소값을 문자값으로 변환하여 반환하는 메소드
	//alert(array.toString());
	//alert(array);
	
	/*
	//Array(size) : 원하는 사이즈의 배열객체를 만들 수 있다.
	//=> 배열에 요소값 미저장
	var array = new Array(5);
	alert(array);
	*/
	
	/*
	//Array(value,value,...) : 전달값을 배열 요소값으로 저장한 객체 생성
	// => 전달값의 갯수만큼 배열요소가 있는 객체 생성
	var array=new Array(10,20,30,40,50);	
	//alert(array.length);
	alert(array);
	*/
	
	var array=new Array(10,20,30,40,50);	

	//객체의 배열 요소는 [] 연산자에 첨자를 사용하여 접근
	alert("array[0] = "+array[0]);
	alert("array[1] = "+array[1]);
	alert("array[2] = "+array[2]);
	alert("array[3] = "+array[3]);
	alert("array[4] = "+array[4]);
	
	/*
	//for 구문을 이용한 일괄처리 - 첨자 표현
	for(var i=0;i<array.length;i++) {
		alert("array["+i+"] = "+array[i]);
	}
	*/
	
	/*
	//첨자를 반환받아 일괄처리 => 첨자임 첨자!!!!!!
	for(i in array) {
		alert("array["+i+"] = "+array[i]);
	}
	
	//Array.forEach(callback(element[, index])) :  객체의 배열요소를 일괄처리하기 위한 기능을 제공하는 메소드
	//=> 콜백함수의 매개변수에는 요소값과 첨자가 자동저장됨
	array.forEach(function(element, i){
		alert("array["+i+"] = " + element);
	});
	*/
	
	/*
	//Array객체는 [] 기호를 사용하여 표현 - JSON
	var array = [10,20,30,40,50];
	alert(array);
	*/
	
	//Empty Array객체 생성
	var array = new Array();// = (var array = [];)
	alert(array.length);
	
	//요소 추가
	//Array.push(값) : 객체의 마지막에 배열요소를 추가하여 값을 저장
	array.push(10);
	array.push(20);
	array.push(30);
	array.push(40);
	array.push(50);
	
	alert(array.length); // 출력 : 5
	
	//요소 삭제
	//Array.pop(값) : 객체의 마지막에 배열요소를 삭제하고 값을 반환
	var num = array.pop();
	
	alert(num); // 출력 : 50
	alert(array.length); // 출력 : 4
	
	//Array.unshift(value) : 객체의 첫번째에 배열요소를 추가하여 전달
	array.unshift(num); 
	alert(array.length); // 출력 : 5
	alert(array); // 출력 : 50 10 20 30 40
	
	//Array.shift(value) : 객체의 첫번째 배열요소를 제거하고 값을 반환
	array.shift();
	alert(array.length); // 출력 : 4
	alert(array); // 출력 : 10 20 30 40
	
	
	</script>

</body>
</html>

📌내장클래스 함수 Date

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
	<h1>내장 클래스 함수 - Date</h1>
	<hr>
	<p>Date 클래스 함수 : 날짜와 시간을 저장한 객체를 생성하기 위한 클래스 함수
	- 객체에 저장된 날짜와 시간에 대한 속성과 메소드 제공</p>
	
	<script type="text/javascript">
	//클라이언트 플렛폼(OS)의 현재 날짜와 시간을 저장한 Date 객체 생성 
	var now=new Date();	
	
	/*
	//Date.toString() : 객체에 저장된 날짜와 시간을 문자값으로 변환하여 반환하는 메소드
	//alert(now.toString());
	//alert(now);
	var day = ["일","월","화","수","목","금","토"]
	//Date.getXXX() : Date객체에서 원하는 값을 반환하는 메소드
	var today = now.getFullYear() + " 년 " + (now.getMonth()+1) + " 월 " + now.getDate() +  " 일 " + 
				day[now.getDay()] + " 요일"; 
	alert(today);
	*/

	//Date.setXXX(value) : 전달값으로 DATE객체에서 날짜 또는 시간을 변경하는 메소드
	now.setDate(now.getDate() + 7);
	//Date.toLocaleString() : 현재 클라이언트 플랫폼의 날짜(시간)에 대한 표현방식의 문자값으로 변환하여 반환하는 메소드
	alert(now.toLocaleString());
	
	//원하는 날짜(시간)을 전달하여 Date객체 생성
	var birthday = new Date(2000,11,25);//월은 0~11로 표현된다
	//alert(birthday); //출력 12월 25ㄹ로 출력
	
	//Date.getTime() : Date객체에 저장된 날짜와 시간을 TimeStamp로 변환하여 반환하는 메소드
	var interval = (now.getTime() - birthday.getTime())/(1000*60*60*24);
	alert("당신은 오늘까지 " + Math.ceil(interval) + "일 살았다");
	
	
	</script>
</body>
</html>

📌내장클래스 함수 Math

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
	<h1>내장 클래스 함수 - Math</h1>
	<hr>
	<p>Date 클래스 함수 : 수학 관련 속성과 메소드 제공</p>
	
	<script type="text/javascript">
	//Math.PI : 원주율이 저장된 속성
	final a = 10;
	alert("원주율 = "+Math.PI);
	
	//Math.ceil(number) : 전달값이 실수인 경우 올림 정수값을 반환
	alert(Math.ceil(12.1));
	
	//Math.floor(number) : 전달값이 실수인 경우 내림 정수값을 반환
	alert(Math.floor(12.9));
	
	//Math.round(number) : 전달값이 실수인 경우 반올림 정수값을 반환
	alert(Math.round(12.5));
	
	//alert(Math.pow(number, number)) : 전달값에 대한 제곱근을 반환하는 메소드
	alert(Math.pow(3, 5))
	
	//Math.random() : 난수값(0.0<=X<1.0)을 반환하는 메소드
	//alert(Math.random());
	//alert(parseInt(Math.random()*100));//0~99
	alert(parseInt(Math.random()*100)%45+1);//1~45의 난수가 출력
	
	</script>
</body>
</html>

📌내장클래스 함수 JSON

1. 객체를 받아서 문자값으로 반환

var text = JSON.stringify(student)

2. 문자값을 받아서 객체로 반환

var stu = JSON.parse(text)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
	<h1>내장 클래스 함수 - JSON</h1>
	<hr>
	<p>JSON 클래스 함수 : JSON 관련 속성과 메소드 제공</p>
	
	<script type="text/javascript">
	var student={"num":1000,"name":"홍길동"};
	//alert(typeof(student));//object
	//alert(student);//[object Object] >> Object 클래스 함수를 생성된 객체
	//alert("학번 = "+student.num+", 이름 = "+student.name);
	
	//JSON.stringify(object) : JSON으로 작성된 객체를 전달받아 문자값으로 변환하여 반환하는 메소드
	// => 웹프로그램 요청시 자바스크립트 객체를 문자값으로 변환하여 전달
	var text=JSON.stringify(student);
	//alert(typeof(text));//string
	alert(text);
	
	//JSON.parse(string) : JSON 형식의 문자값을 전달받아 자바스크립트 객체로 변환하여 반환하는 메소드
	var stu=JSON.parse(text);
	alert(typeof(stu));
	alert(stu);//출력 : 객체
	alert("학번 = "+stu.num+", 이름 = "+stu.name);
	
	</script>
	
</body>
</html>

📌BOM - window객체

이거보다는 박스모델을 중첩해서 사용한다 - publishing때문에

prompt	입력창을 제공하여 문자값을 입력받아 반환하는 메소드
comfirm	확인창을 제공하여 선택값을 반환받는다 t/f
open	프로그램에 대한 응답 결과를 새로운 브라우저를 생성해서 요청출력하는 메소드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>BOM(Browser Object Model) - window객체</h1>
	<hr>
	<p>window객체 : 브라우저를 객체로 표현하여 속성과 메소드를 제공 </p>
	
	<script type="text/javascript">
	alert(window);//object window
	
	//window.alert(message) : 메세지창을 제공하여 메세지를 출력하는 메소드
	//=>window객체를 생략해도 메소드 호출이 가능하다
	//보토 디버깅용으로 쓰고 요즘에는 쓰지 않는다
	window.alert("메세지창에 메세지를 출력하는 메소드");
	
	//window.prompt(message[,value])입력창을 제공하여 문자값을 입력받아 반환하는 메소드
	var input = window.prompt("숫자를 입력해 주세요",10); //초기값을 제공하는 경우도 있다.
	//alert("입력값 : " + input);
	
	//window.confirm() : 확인창을 제공하여 선택값(취소 = false, 확인 = true);
	
	if(window.confirm("정말로 게시글을 삭제하시겠습니까?")){
		alert("게시글을 삭제 하였습니다");
	} else {
		alert("게시글 삭제를 취소했습니다.");
	}
					//창의이름 //옵션
	//window.open(url[,name][,option]) : 
	//프로그램에 대한 응답 결과를 새로운 브라우저를 생성하여 요청 출력하는 메소드
	//option : width, height, top, left, location, menubar, status, toolbar, 
	window.open("https://daum.net" , "다음" , "width = 1000", "height = 640", "top = 100");
	
	if(confirm("브라우저를 종료할거니?")){
		//브라우저를 종료하는 메소드
		window.close();
	}
	
	</script>

</body>
</html>

📌BOM - screen객체

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
   <h1>BOM(Browser Object Model) - screen 객체</h1>
   <hr>
   <p>screen 객체 : 브라우저 출력장치를 객체로 표현하여 속성과 메소드를 제공</p>

   <script type="text/javascript">
   //alert(screen);//[object Screen]
   
   //screen.width : 출력장치 해상도의 폭을 저장한 속성
   var width=screen.width;
   //alert(width);
   
   //screen.height : 출력장치 해상도의 높이을 저장한 속성
   var height=screen.height;
   //alert(height);
   
   var win=open("","","width=400,height=300,top=100,left=400");
   
   //Window.moveTo(x,y) : 브라우저를 출력좌표를 변경하는 메소드 - 브라우저 이동
   win.moveTo(0,0);
   
   //Window.resizeTo(width, height) : 브라우저의 폭과 높이를 변경하는 메소드
   win.resizeTo(width, height);
   
   var intervalId=setInterval(function() {
      //Window.moveBy(x,y) : 브라우저의 현재 출력좌표를 기준으로 브라우저 출력좌표를 변경하는 메소드
      win.moveBy(10,10);
      
      //Window.resizeBy(width,height) : 브라우저의 현재 크기를 기준으로 브라우저 크기를 변경하는 메소드
      win.resizeBy(-20,-20);
   }, 500);
   
   setTimeout(function() {
      clearInterval(intervalId);
   }, 5000);
   </script>
</body>
</html>

📌BOM - navigator

: 브라우저 엔진을 객체로 표현하여 속성과 메소드를 제공

브라우저의 특성을 잘 타는 언어가 js임
어떤 브라우저이건 동일한 기술을 쓸 수 있도록 하기위해서 어떤 브라우저를 사용하고 있는지 알기위해서 필요한 객체이다

appName	브라우저 엔진명을 저장한 속성
appVersion	브라우저 엔진버전을 저장한 속성
userAgent	브라우저 엔진이름과 버전을 저장한 속성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>BOM(Browser Object Model) - navigator 객체</h1>
	<hr>
	<p>navigator 객체 : 브라우저 엔진을 객체로 표현하여 속성과 메소드를 제공</p>

	<script type="text/javascript">
	alert(navigator);//[object Navigator]
	
	//navigator.appName : 브라우저 엔진명을 저장한 속성
	alert("브라우저 엔진이름" + navigator.appName);
	
	//navigator.appVersion : 브라우저 엔진버전을 저장한 속성
	alert("브라우저 엔진버전 = " + navigator.appVertion);
	
	//navigator.userAgent : 브라우저 엔진이름과 버전을 저장한 속성
	alert("브라우저 엔진 = " + navigator.userAgent);
	
	</script>
</body>
</html>

📌BOM - location

: 브라우저 주소영역을 객체로 표현하여 속성과 메소드를 제공

href	주소영역의 URL주소를 저장한 속성
reload	주소영역의 URL주소로 재용청하는 메소드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>BOM(Browser Object Model) - location 객체</h1>
	<hr>
	<p>location 객체 : 브라우저 주소영역을 객체로 표현하여 속성과 메소드를 제공</p>

	<script type="text/javascript">
	//location.toString() : 주소영역의 URL주소를 문자값으로 반환하는 메소드
	alert(location);
	setTimeout(function() {
		//location.href : 주소영역의URL주소를 저장한 속성
		//=> 속성값 변경 : URL주소를 변경하여 요청한 결과를 응답받아 출력(=페이지 이동)
		location.href = "https://www.daum.net";
	}, 3000)
	
	setInterval(function(){
		//location.reload() : 주소영역의 URL주소로 재요청하는 메소드
		//=> 일종의 새로고침
		location.reload();
	}, 1000)
	
	</script>
</body>
</html>

📌BOM - document

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>BOM - document객체</h1>
	<hr>
	<p>document객체 : 브라우저 응답영역을 객체로 표현하여 속성과 메소드 </p>
	
	<script type="text/javascript">
	alert(document); //object HTMLDocument출력
	
	//document.write(html) :브라우저 응답영역에 HTML을 출력하는 메소드
	document.write("<p>document객체 : 브라우저 응답영역을 객체로 표현하여 속성과 메소드 </p>");
	</script>

</body>
</html>

DOM(Document Object Model)

DOM이란? 웹문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법이다. 객체로 사용하게 되면, 웹문서에 존재하는 텍스트/이미지/표 등 모든 요소가 모두 객체라는 뜻이다! 이 객체들을 자바스크립트를 이용하여 접근하여 조작하면 된다.그래도 이해가 가지 않는다면?예를들어 어떤 웹 문서를 수정한다고 가정하자. 수정하기 위해서는 HTML 문서를 열어 CSS의 코드를 변경하면된다. 하지만 기능을 하나 추가/변경/삭제하기 위해 항상 문서를 열어서 수정해야한다면 여간 귀찮은 일이 아닐것이다. 만약 사용자가 버튼을 눌렀을때 어떤 이벤트가 실행되어야한다는 등 기능이 더욱 복잡해 진다면 더욱 귀찮아 질 것이다.이런경우에 자바스크립트로 DOM을 제어하면 쉬워진다. 웹문서를 직접 수정하는 대신에, DOM Tree 구조로 되어있는 웹브라우저를 원하는 엘리먼트에 접근하여 조작하면된다.

📌DOM - document Object Model

가지고 있는 모든 태그들을 객체로 인식할 수 있게된다
아주아주 중요
엘리먼트 객체를 조작할 수 있게된다.(응답결과를 조작한다) => DHTML(즉, 전체가 바뀌는것이 아니라 일부분만 계속 바뀌는 것)
document객체는 브라우저 응답영역에 출력된 태그를 엘리먼트 객체로 표현한다
이것을 DOM(Document Object Model) 이라고 한다.
이벤트가 발생될 경우 Element객체를 변경(응답 조작이 가능하다) 할 수 있다.
DHTML이라고 한다 (동적인 HTML)

📌DOM - onload이벤트

바디가 다 로드가 됐다면 실행되는 이벤트 이다

둠트리

둠트리를 조작하려면 onload이벤트를 이용해야한다

1. body태그에 이벤트 핸들러를 걸어서 주는 방법
: 출력된 후에 조작된다

2. head에 자바스크립트를 써서 하는 방법

3. body태그에 마지막 자식으로 스크립트태그를 선언
: onload이벤트 관련 함수를 선언하지 않아도 둠조작이 가능해 진다

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function load(){
	alert("DOM Tree완성!!!!!!");
}
//객체의 이벤트 속성에 이벤트 핸들러를 등록하여 이벤트 처리를 한다
//=> 객체에서 이벤트가 발생할 경우 자동으로 이벤트 핸들러가 호출되어 명령이 실행된다
//자바스크립트를 써서 하는 방법
window.onload = function() {
	
	alert("DOM Tree완성!!!!!!");
	
}
</script>
</head>
<!-- onload이벤트 속성 : 태그가 DOM Tree에 추가된 경우 발생되는 이벤트 -->
<!-- 이벤트 속성값으로 자바스크립트의 이벤트 핸들러 작성 -->
<!-- 일반적으로 함수를 호출한다 -->
<!-- 태그에 이벤트 핸들러를 걸어서 해주는 방법 -->
<!-- <body onload = "load();"> -->
<body>
	<h1>DOM - onload이벤트</h1>
	<hr>
	<p>이벤트 : 태그(js에서는 element객체라고 부른다)에 관련된 사건 </p>
	<p>태그에서 이벤트가 발생될 경우 이벤트 속성값으로 이벤트 핸들러(자바스크립트)를 등록하여 이벤트를 처리 
		-자바스크립트를 이용하여 등록</p>
		
	<p>이벤트를 이용하여 document영역의 응답결과를 변경( DOM을 조작 ) -> DOM Tree생성 후 조작이 가능해진다 </p>
	
	
	<script type="text/javascript">
	 //body태그에 마지막 자식으로 스크립트태그를 선언하면 onload이벤트 관련 함수를 선언하지 않아도 둠조작이 가능해 진다
	//=>출력되기전에 미리 조작을 할 수 있기 때문에 가독성이 더 좋다
	alert("DOM Tree완성!!!!!!");
	
	</script>

</body>
</html>

📌DOM - element객체

document.getElementById	DOM요소를 id선택자로 접근하는 메소드
document.getElementsByTagName	DOM요소를 태그이름으로 찾아내는 메소드
document.querySelectorAll	DOM요소를 id, class, 태그이름으로 찾아내는 메소드 id는 #, class는 .을 이용하여 접근하면 된다.

태그를 일단 엘리먼트 객체로 반환받아 와야한다

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>Dom - Element객체</h1>
	<hr>
	<p>Element 객체 : 자바스크립트는 HTML 태그를 Element객체로 처리 </p>
	<p>Element 객체는 노드 또는 텍스트 노드로 구분 </p>
	<p>노드 : 태그명을 저장한 Element 객체</p>
	<p>텍스트 노드(TextNode) : 태그내용(NodeValue)을 저장한 element객체</p>
	<hr>
	
	<!-- h2 -->
	<h2 id = "h2"> 태그의 내용 </h2>
	
	<!-- ul -->
	<ul>
		<li> li태그 내용 - 1 </li>
		<li> li태그 내용 - 2 </li>
		<li> li태그 내용 - 3 </li>
		
	</ul>
	
	<!-- p태그 -->
	<p> p태그의 내용입니다 </p>
	
	<script type="text/javascript">
	
	//---------------태그아이디 속성값으로 둠조작------------------
	//document.getElementId(id) : 태그를 아이디 속성값으로 검색하여 Element객체로 반환하는 메소드
	//내가 원하는 태그를 꼭 선택해서 걔만 바꿀 수 있는 방법 ★★★★
	var h2e = document.getElementById("h2");
	//alert(h2E) ; //object HTMLHeadingElement
	
	//Element.nodeName : Element 객체의 노드명(태그명)을 저장한 속성
	//alert(h2e.nodeName);//출력 : H2
	
	//Element.nodeValue : Element 객체의 노드값(태그내용)을 저장한 속성
	//alert(h2E.nodeValue);//null
	
	//Element.firstChild : Element 객체의 첫번째 자식 Element객체를 저장한 속성
	//alert(h2e.firstChild.nodeName);//출력 : #text
	//alert(h2e.firstChild.nodeValue);//출력 : 태그의 내용
	
	//Element 객체의 태그내용을 변경 - dom조작 : 응답 문서 변경
	h2e.firstChild.nodeValue = "h2의 태그내용 변경";
	
	
	//---------------태그이름가지고 둠조작------------------
	//document.getElementsByTagNameNS() : 태그를 태그명으로 검색하여 Element객체의 목록(HTMLCollection객체 - NodeList)으로 반환하는 메소드
	var liList = document.getElementsByTagName("li");
	//alert(liList); //object HTMLCollection출력됨]
	
	//Collection.length : Element객체에 저장된 Element객체의 갯수 
	//alert(liList.length);
	
	for(var i = 0; i<liList.length; i++){
		//Collection.item(index) : index위치의 Element객체를 반환하는 메소드
		var liE = liList.item(i);//반환값은 엘리먼트
		//alert(liE);
		alert(liE.firstChild.nodeValue);
	}
	
	//---------------CSS선택자를 가지고 둠조작------------------ => Jquery에 가장 많이 사용
	//CSS선택자로 태그를 검색하여 NodeList 객체로 반환하는 메소드 
	var pList = document.querySelectorAll(".p");
	//alert(pList);
	//alert(pList); //1출력
	alert(pList.item(0).firstChild.nodeValue);//출력 : p태그의 내용입니다 
	
	
	
	</script>
	

</body>
</html>

📌DOM - element 추가

createElement	엘리먼트 객체를 생성하여 반환
createTextNode	Text객체를 만들어서 반환하는 매소드, content내용까지 함께 반환한다
appendChild	괄호안에 있는 객체를 마지막 자식으로 붙이는 메소드
setAttribute	객체의 속성을 변경하는 메소드
insertBefore	객체전에 새로운 엘리먼트 객체를 삽입하는 메소드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>DOM - Element객체의 생성과 추가</h1>
	<hr>
	<div id = "imageDiv"></div>
	
	<script type="text/javascript">
	//document.createElement(nodeName) : Element객체를 생성하여 반환
	var h3E = document.createElement("h3");//<h3></h3>
	//alert(h3E); //object HTMLHeadingElement
	
	//document.createTextNode(content) : Text 객체를 생성하여 반환하는 메소드
	var h3TN=document.createTextNode("h3 태그의 내용이 다하하하항");
	//alert(h3TN);
	h3E.appendChild(h3TN); //<h3>태그의 내용</h3> //부착해라
							//body의 마지막자식은 스크립트 태그이기 떄문에 
	
	//document.body : body 태그를 Element객체로 저장한 속성
	//웹에는 body는 항상 1개밖에 없으므로 이렇게 표현이 가능하다
	document.body.appendChild(h3E); 
	
	var imgE = document.createElement("img"); //이미지 태그 생성이 된다
	
	//Element.attributeName : Element객체의 속성을 표현 - 태그의 속성이 된다
	//=> 태그속성(Attribute)이 아닌 객체 속성(Property)으로 표현 가능하다
	//img.src = "Koala.jpg"; //<img src = "">가 생성된다
	//alert(imgE.src); //실질적으로는 서버이름까지 포함된 경로가 다 나온다
	
	//Element.setAttribute(name, value) : Element객체의 속성을 변경하는 메소드
	imgE.setAttribute("src", "Koala.jpg");//태그 속성이 없으면 표현자체가 안됨
	
	//alert(imgE.getAttribute("src")); //Koala.jpg 얘는 다됨
	
	imgE.setAttribute("width", "300");
	
	var imageDiv = document.getElementById("imageDiv");
	imageDiv.appendChild(imgE);
	
	var hrE=document.createElement("hr");//<hr>
	//Element.insertBefore(newElt,before) : 기존 Element 객체 전에
	//새로운 Element 객체를 삽입하는 메소드
	document.body.insertBefore(hrE, h3E);
	
	</script>

</body>
</html>

저작자표시 비영리 동일조건 (새창열림)

'💻 수업정리 (2020) > JavaScript' 카테고리의 다른 글

[7/21] jQuery (0)	2020.07.21
[7/20] 자바스크립트 last (0)	2020.07.20
[7/17] 자바스크립트 기초4 (0)	2020.07.17
[7/15] 자바스크립트 기초2 (0)	2020.07.15
[7/14] 자바스크립트 (0)	2020.07.14