* history 객체
- 프로퍼티 : length - 현재 ㅡ라우저창의 history 목록에 있는 항목의 개수, 즉 방문한 사이트 개수저장.
ex. console.log(history.length);
- 메서드 : back() - 이전페이지
forward() - 다음페이지
go() - 현재 페이지를 기준으로 상대적인 위치에 있는 페이지를 현재 화면으로 불러옴.
ex. history.go(1) - 다음페이지
history.go(-1) - 이전페이지
* location 객체
- 현재 문서의 URL 주소 정보가 들어있음.
- 프로퍼티 : href() - 전체 URL, 이 값을 변경하면 해당 주소로 이동함.
- 메서드 : reload() - 현재 문서 다시 불러오기
replace() - 현재 문서의 URL 지우고 다른 URL의 문서로 교체.
[window 객체의 하위객체 - document]
- HTML 문서 정보(=내용)를 관리하는 객체
- 문서 정보 확인, 내용 변경 등의 작업 수행 가능.
- 속성 : title, bgColor, fgColor
- 메서드 : wirte(), querySelector(), getElementById() 등
<head>
<script>
console.log(document); // document 객체 전체내용(HTMl 모든 문서내용) 출력
console.log(document.head); // document 객체 하위객체(요소)인 head 내용출력
console.log(document.body); // null 출력
// => 현재 자바 스크립트 코드는 <head></head>태그 사이에 위치애 있으므로
// 이 코드들이 실행되는 시점에 head 객체까지는 생성이 되어 있으나 아직 <body>태그를 로딩하지않아
// boby 객체가 생성되기 전이므로 body 객체 출력시 null 값이 출력되며,
// body 객체를 통해 작업이 불가함을 의미함(=객체 없응)
// => 따라서 body 태그가 로딩된 후에 document.body 형식으로 body 객체에 접근해야 한다.
</script>
</head>
* title 속성
- 현재 HTML 문서의 제목(= 웹브라우저 제목표시줄 내용 = title 태그 내용) 확인
=> document 객체의 title 속성값 활용
ex. console.log("document.title : " + document.title); // 현재 문서의 제목 확인.
- HTML 문서의 제목 변경(=title 속성값 변경)
ex. document.title = "변경된 title";
* bgColor, fgColor 속성
- HTML 문서의 색상 정보 확인 ( bgColor, fgColor 속성값 확인 )
ex. console.log("document.fgColor : " + document.fgColor); // 문서 전경색(주로 텍스트)
ex. console.log("document.bgColor : " + document.bgColor); // 문서 배경색
=> bgColor, fgColor 속성값을 별도로 설정한 적이 없을 경우 널스트링("")값이 저장되어 있음.
(전달되는 해당값이 비어있으면 기본값 사용됨)
- HTML 문서의 색상정보 변경 ( bgColor, fgColor 속성값 변경 )
=> 변경할 속성값으로 "색상명" 또는 색상코드값("RRGGBB") 형태로 지정
1. 색상명을 영문자로 지정하는 방식(대소문자 무관)
ex. document.fgColor = "gray"; // 전경색(텍스트)를 파란색 으로 변경
ex. document.bgColor = "lightorange"; // 배경색을 연한핑크색 으로 변경.
2 색상! 코드값을 16진수로 지정하는 방식(디테일한 지정이 가능함)
=> "#RRGGBB" 형식으로 지정 (빨 초 파 세가지 색상 조합.)
각 색상에 해당하는 값을 16진수 2자리(00 ~ FF)값의 범위 내에서 지정
(이때, 색의 3원색이 아닌 빛의 3원색 원리로 조합. 숫자가 크면 흰색 숫자가 적으면 검정.)
모든 값이 최대치(FFFFFF)이면 흰색, 모든 값이 최소치(000000)면 검정색
ex. document.fgColor = "#FF0000"; // red = 빨간색
ex. document.bgColor = "#00FF00"; // green = 녹색
ex. document.fgColor = "#FFFF00"; // 노란색
ex. document.bgColor = "#FFFFFF"; // 흰색
[ 선택자(Selector) ]
- HTML 문서에서 특정 대상(요소)을 구분(선택)하는 용도로 사용되는 속성(이름)
- id, class, 태그 등을 사용
1) id 선택자(#) : 태그 요소를 유일하게 구분할 수 있도록 지정하는 중복되지 않는 이름
=> 해당 태그에 id 속성을 통해 이름을 지정(중복되지 않은 이름 필수!)
2) class 선택자(.) : 태그 요소를 복수개 선택할 수 있도록 중복으로 지정하는 이름
=> 해당 태그에 class 속성을 통해 이름을 지정(중복 가능)
3) 태그 선택자(태그명) : 해당 태그를 직접 선택할 수 있도록 지정하는 이름(태그명 그대로 사용)
[ document 객체를 사용하여 특정 선택자를 갖는 요소(태그) 선택 방법 ]
< 1. document.getElementXXX() : 하나만선택(id)
또는 document.getElementsXXX() : 복수개선택(class, tag선택자) 메서드 활용 >
1. id 선택자 : document.getElementById("id선택자명");
2. class 선택자 : document.getElementsByClassName("class선택자명");
3. 태그 선택자 : document.getElementsByTagName("태그명");
=> 메서드 호출 시 리턴되는 객체를 통해 해당 요소(태그)에 접근하여 다양한 작업(제어) 수행 가능
=> 이 때, id 선택자를 지정하면 대상 태그에 대한 단일 객체가 리턴되며(= 유일하므로)
class 선택자 또는 태그 선택자 지정 시 대상 태그들에 대한 복수개의 객체가 리턴됨(= 중복되므로)
따라서, 복수개의 객체가 리턴될 경우 HTMLCollection 타입 객체로 관리되며 (배열처럼 관리됨)
반복문을 통해 복수개의 요소 중 각각의 요소에 차례대로 접근 가능함
// ------ id 선택자 -------
// <body> 태그 내의 HTML 태그 요소들 중 id 선택자가 "name" 인 태그 선택하여 객체로 가져오기
// => <input type="text" id="name" placeholder="id=name">
// => document.getElementById() 메서드 호출하여 해당 id 선택자를 갖는 태그 요소를 객체로 리턴받기
let nameElement = document.getElementById("name")
console.log(nameElement);// 결과: <input type="text" id="name" placeholder="id=name">
console.log("nameElement : " + nameElement); // 결과: [object HTMLInputElement](HTMLCollection 타입 객체이기 때문에 접근이 불가함.)
// nameElement 변수를 통해 해당 요소(태그)를 제어 가능
// => 객체명.속성명 형태로 해당 요소의 속성값 접근 가능
console.log("nameElement 의 id 선택자 : " + nameElement.id); // 결과:name id(속성값 출력)
console.log("nameElement 의 placeholder 속성값 : " + nameElement.placeholder); // 결과:id=name(placeholder 속성값 출력)
// nameElement 변수를 통해 첫번째 텍스트박스에 접근하여 입력된 텍스트 값 가져오기(value 속성 활용)
console.log(nameElement.value); // 입력된 텍스트 출력됨.
// 해당 요소를 별도의 변수에 저장하지 않고 즉시 속성값 접근도 가능
console.log(document.getElementById("name").value); // 입력된 텍스트 출력됨.
// => 이때 ,입력된 값이 없을 경우 null값(객체가 없는 경우)이 아닌 null string 출력
// nameElement 변수를 통해 첫번째 텍스트박스에 입력된 값 변경하시오.
nameElement.value = "변경된 값";
console.log(nameElement.value); // 텍스트박스에 입력된 값이 아닌 "변경된 값" 출력됨.
// name2라는 id 선택자 요소를 지정하여 name2Element 변수에 저장 후 선택자 요소에 입력된 텍스트 출력
let name2Element = document.getElementById("name2");
console.log(name2Element.value); // 입력된 텍스트 출력됨.
// id 선택자가 "header1"인 요소의 배경색을 "skyblue"로 변경
// => 해당요소 객체의 style 속성에 접근후 background 속성에 접근하여 skyblue로 변경
let color1 = document.getElementById("header1");
color1.style.background = "skyblue";
// id 선택자가 "header2"인 요소의 배경색을 pink로 변경
let color2 = document.getElementById("header2");
color2.style.background = "pink";
// -------- class 선택자 ------------
// class 선택자를 통해 단.일. 또는 복.수.개.의 요소 선택가능
// 클래스 선택자가 header5인 요소를 pink 색으로 변경하기.
let classColor = document.getElementsByClassName("header5");
// classColor.style.background = "pink";
// => TypeError: Cannot set properties of undefined (setting 'background')
// => HTMLCollection 타입은 배열과 동일하게 취급되므로 배열 접근 방법 사용가능
// 배열의 인덱스(0 ~ 배열크기-1)와 for문을 조합하여 사용
for (let i = 0; i < classColor.length; i++){
classColor[i].style.background = "pink";
}
// -------- tag 선택자 ------------
// 태그 선택자를 통해 클래스 선택자와 마찬가지로 복수개의 태그 요소에 접근 가능
// => 클래스 선택자는 서로 다른 태그 복수개를 하나로 묶어서 관리 가능하지만
// 태그 선택자는 동일한 태그만 묶어서 관리함. (따로 관리 불가함.)
// => class 선택자와 동일한 방식으로 접근하며, HTMLColection 객체(배열)로 관리됨
//h4 태그 요소들의 배경색 변경하기
let h4Element = document.getElementsByTagName("h4");
for(let h4 of h4Element){
h4.style.background = "green";
}
'자바스프링웹공부(2024) > 자바스크립트' 카테고리의 다른 글
| 2024.08.14. JS - event (0) | 2024.08.19 |
|---|---|
| 2024.08.14. JS - document 객체 : querySelector(), innerText, innerHTML (0) | 2024.08.19 |
| 2024.08.08. 객체 -1 (0) | 2024.08.08 |
| 2024.08.08. 이벤트, 배열 (0) | 2024.08.08 |
| 2024.08.06.-08.07. JS - 함수 (0) | 2024.08.06 |
