![[7/16] 자바스크립트 기초 3](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FAy7eN%2FbtrSKunh6KF%2FjdSnmRWJQ5dRKhv18XrCYK%2Fimg.png)
📌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 |