✔ history 객체 - 브라우저의 히스토리 정보를 문서와 문서 상태 목록으로 저장하는 객체 - 사용자의 개인 정보를 보호하기 위해 이 객체의 대부분의 접근 방법을 제한 back() - 뒤로 이동 forward)_ : 앞으로 이동 go(0) : 새로고침 location.reload() : 새로고침
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > history </ title >
</ head >
< body >
< h2 > history </ h2 >
< button onclick = " history . back () " > 뒤로 </ button >
<!-- <button onclick="history.back(-2)">뒤로 2페이지 이동</button> -->
< button onclick = " history . forward () " > 앞으로 </ button >
< button onclick = " history . go ( 0 ) " > 새로고침 </ button >
</ body >
</ html >
✔ navigator 객체 - 내 위치를 알려쥬눈 역할 정도만 사용한다. 브라우저 공급자 및 버전 정보등을 포함한 브라우저에 대한 정보를 저장하는 객체 geolocation : GPS정보를 수신하는 프러퍼티
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > navigator </ title >
< script >
const success = function ( loc ){
console . log ( loc . coords . latitude );
console . log ( loc . coords . longitude );
}
const fail = function ( msg ){
console . log ( msg . code );
}
navigator . geolocation . getCurrentPosition ( success , fail );
// 콜벡함수 getCurrentPosition에 해당하는 데이터가 있으면 스스로 가저오는 것이다. 성공하면 success 실패하면 fail에 데이터가 들어가게 된다. 앞이 성공 뒤가 실패를 알자.
// interval과 timeout도 콜벡함수이다.
</ script >
</ head >
< body >
< h2 > navigator </ h2 >
</ body >
</ html >
❗❗❗ 문서 객체 모델(Document Object Model) - HTML문서 또는 XML문서등을 접근하기 위한 일종의 인터페이스 역할 - 문서내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공 ✔ document 객체 - 웹 페이지 자체(body)를 의미하는 객체 - 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때 반드시 document 객체로부터 시작 ✔ getElementsByTagName() : 해당 태그 이름의 요소를 모두 선택 //html의 요소를 태그 네임에 따라 배열식으로 가저오겠다!!!! ✔ getElementById() : 해당 아이디의 요소를 선택 // id는 한 문서에 하나만 있어야 한다. 그렇게 때문에 Element에 s가 붙지 않는다. ✔ getElementsByClassName() : 해당 클래스에 속한 요소를 모두 선택 ✔ getElementsByName() : 해당 name 속성값을 가지는 요소를 모두 선택 ✔ querySelectorAll() : 선택자로 선택되는 요소를 모두 선택, ()안은 css를 이용하여 요소를 선택하여 변화를 주거나 추가를 할 수 있다. (querySelector()) : 단수로
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > 문서객체모델1 </ title >
</ head >
< body >
< h2 > 문서객체모델1 </ h2 >
< ul >
< li name = "markup" > HTML </ li >
< li > CSS </ li >
< li id = "javascript" class = "js" > JavaScript </ li >
< li class = "js" > jQuery </ li >
< li class = "backend" > Apache </ li >
< li class = "backend" > Spring </ li >
< li id = "nodejs" class = "js" > Node.js </ li >
< li id = "react" class = "js" > React </ li >
</ ul >
< script >
const tagName = document . getElementsByTagName ( 'li' );
// 태그네임을 통해 모든 li태그가 있는것을 가저오는 기능을 하고있다.
for ( let i = 0 ; i < tagName . length ; i ++){
console . log ( tagName [ i ]);
tagName [ i ]. style . color = 'gold' ;
// js는 style을 통해 css와 동일하게 특징을 줄 수 있다.
}
console . log ( "------------------------------" );
const className = document . getElementsByClassName ( 'js' );
for ( let i = 0 ; i < className . length ; i ++){
console . log ( className [ i ]);
className [ i ]. style . color = 'deeppink' ;
}
console . log ( "------------------------------" );
const id = document . getElementById ( 'javascript' );
console . log ( id );
id . style . color = 'greenyellow'
console . log ( "------------------------------" );
const name = document . getElementsByName ( 'markup' );
for ( let i = 0 ; i < name . length ; i ++){
console . log ( name [ i ]);
name [ i ]. style . color = ' deepskyblue' ;
} console . log ( "------------------------------" );
const qs = document . querySelectorAll ( 'li.backend' )
for ( let i = 0 ; i < qs . length ; i ++){
console . log ( qs [ i ]);
qs [ i ]. style . color = 'navy' ;
}
</ script >
</ body >
</ html >
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > 문서객체노드2 </ title >
< script >
window . onload = function (){
const gnb = document . getElementById ( 'gnb' );
console . log ( gnb );
console . log ( gnb . parentNode ); //div
console . log ( gnb . children [ 0 ]); //ul
console . log ( gnb . children [ 0 ]. nextElementSibling ); //null 형제노드 없음
console . log ( gnb . children [ 0 ]. children [ 0 ]); // first
console . log ( gnb . children [ 0 ]. firstChild ); //#text 문서종류별로 전부 찾아온다 노드의 종류를 정해주지 않았기 때문이다. 공백에 있는 text를 가저온 것으로 생각을 하자 이런 문제를 없에기 위해서는 순서나 요소를 추가하자
console . log ( gnb . children [ 0 ]. firstElementChild ); // first, 이렇게 사용하는 습관을 가지자!!!
}
//onload 윈도우가 모두 로드되었다면 -> 전체 로드되었다면 이렇게 해줘!! 즉 하단에 있는 HTML을 전부 읽을 후에 처리한다고 생각하면 편하겠다!!!!!
</ script >
</ head >
< body >
< h2 > 문서객체노드2 </ h2 >
< div >
< nav id = "gnb" >
< ul >
< li class = "first" > 내용1 </ li >
< li > 내용2 </ li >
< li > 내용3 </ li >
</ ul >
</ nav >
</ div >
</ body >
</ html >
✔ 노드(node) - HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장 노드 종류 - 문서노드 : 문서 전체를 나타내는 노드 - 요소노드 : HTML 요소는 요소 노드, 속성 노드를 가질 수 있는 유일한 노드 - 속성노드 : 속성은 모두 속성 노드이며, 요소 노드에 관한 정보를 가지고 있음 - 텍스트 노드 : 텍스트는 모두 텍스트 노드 - 주석노드 : 주석은 모두 주석 노드 노드의 관계 - parentNode : 부모 노드를 의미, 나를 감싸고 있는 부분 - children : 자식노드 - childNode : 자식 노드 리스트 - firstChild : 첫번째 자식 노드, 종류가 어떤건지 알 수 없다. - firstElementChild : 첫번째 자식 요소 노드, 종류 즉 태그를 알기 위해 사용한다. - lastChild : 마지막 자식 노드 , 종류가 어떤건지 알 수 없다. - nextSibling : 다음 형제 노드 , 종류가 어떤건지 알 수 없다. - preciousSibling : 이전 형제 노드 ❗ 노드 메소드 - 자주 사용하는 내용 노드 추가 - appendChild() : 새로운 노드를 해당 노드의 자식 노드 리스트 맨 마지막에 추가 - insertBefore() : 새로운 노드를 특정 자식 노드 바로 앞에 추가 - insertDate() : 새로운 노드를 텍스트 데이터로 추가 노드 생성 - createElement() : 새로운 요소 노드를 만듬 - createAttribute() : 새로운 속성 노드를 만듬 - createTextNode() : 새로운 텍스트 노드를 만듬 노드 제거 - removeChild() : 자식 노드 리스트에서 특정 자식 노드를 제거, 노드가 제거되면 해당 노드를 반환. 노드가 제거될 때 노드의 자식들도 다같이 제거 - removeAttribute() : 특정 속성 노드를 제거 노드 복제 - cloneNode() : 기존의 존재하는 노드롸 동일한 새로운 노드를 생성하여 반환 노드 교체 - replaceChild() : 기존의 요소 노드를 새로운 요소 노드로 교체 - repaceData() : 텍스트 노드의 텍스트 데이터를 교체
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > 문서객체노드2 </ title >
< script >
window . onload = function (){
const gnb = document . getElementById ( 'gnb' );
console . log ( gnb );
console . log ( gnb . parentNode ); //div
console . log ( gnb . children [ 0 ]); //ul
console . log ( gnb . children [ 0 ]. nextElementSibling ); //null 형제노드 없음
console . log ( gnb . children [ 0 ]. children [ 0 ]); // first
console . log ( gnb . children [ 0 ]. firstChild ); //#text 문서종류별로 전부 찾아온다 노드의 종류를 정해주지 않았기 때문이다. 공백에 있는 text를 가저온 것으로 생각을 하자 이런 문제를 없에기 위해서는 순서나 요소를 추가하자
console . log ( gnb . children [ 0 ]. firstElementChild ); // first, 이렇게 사용하는 습관을 가지자!!!
}
//onload 윈도우가 모두 로드되었다면 -> 전체 로드되었다면 이렇게 해줘!! 즉 하단에 있는 HTML을 전부 읽을 후에 처리한다고 생각하면 편하겠다!!!!!
</ script >
</ head >
< body >
< h2 > 문서객체노드2 </ h2 >
< div >
< nav id = "gnb" >
< ul >
< li class = "first" > 내용1 </ li >
< li > 내용2 </ li >
< li > 내용3 </ li >
</ ul >
</ nav >
</ div >
</ body >
</ html >
