# 자바스크립트와 HTML
1. window 객체
- 웹개발을 위한 도구모음
- 메시지 창 띄우기
window.alert("Hello");
- 접속 기기의 위치를 리턴(ex. 위치기반앱)
window.navigator.geolocation
- 유저의 페이지 탐색기록
window.history
- 브라우저의 저장공간 (ex. 로그인토큰, 테마, 쇼핑카트)
document.cookie // 쿠키
window.localStorage // 쿠키의 대체제
- 서버에 데이터를 요청하는 메서드 (ex. AJAX: 페이지 새로고침없이 서버에 요청을 전송할 수 있는 기술)
window.XMLHttpRequest
window.fetch // 비교적 최신메서드
- 뷰 개발(화면 출력과 관련)
window.document // HTML문서
2. 엘리먼트 다루기
2-1) 엘리먼트 선택자
<ul>
<li id= "foo" class="item">foo</li>
<li class="item">bar</li>
<li class="item">baz</li>
</ul>- 태그 이름으로 선택하기
- let ul = document.querySelector( 'ul' ); // ul 태그를 가진 element 하나만 선택
- let ul = document.querySelectorAll( 'li' ) // li 태그를 가진 모든 엘리먼트를 선택
console.log( li ); // NodeList(3)
console.log( li[0] ); // foo
console.log( li[1] ); // bar
console.log( li[2] ); // baz
- 클래스 이름으로 선택하기
- const li = document.getElementsByClassName( 'item' );
- const li = document.querySelectorAll(' .item' )
// querySelectorAll을 사용하는 경우에는 앞에 클래스를 나타내는 .을 붙여준다
console.log( li ); // HTMLCollection(3)
console.log(li.length) // 3
- id로 선택하기
- const foo = document.getElementById( 'foo' );
- const foo = document.querySelector ( '#foo' );
// querySelectorAll을 사용하는 경우에는 앞에 아이디를 나타내는 #을 붙여준다.
- 자식선택자 (자식엘리먼트 선택하기)
const ul = document.querySelector( 'ul' );
console.log(ul.childern); // HTMLCollection(length)
console.log(ul.childrdn[0]); // foo
console.log(ul.firstElementChild); // foo
console.log(ul.lastElementChlid); // baz
- 형제선택자 (같은 라인에서 바로 다음에 오는 엘리먼트 선택하기)
const foo = document.getElementById( 'foo' );
console.log(foo.nextElementSibling); // bar
2-2) class 속성
<ul>
<li id="foo" class="class1 class2">foo</li>
<li>bar</li>
<li>baz</li>
</ul>- Js로 class 추가하기 , 삭제하기
const foo = document.getElementById( 'foo' ); // element 선택
방법1) foo.className += ' class3';
console.log(foo.className); // class1 class2 class3
방법2) foo.classList.add( 'class3' ); // 추가
foo.classList.remove( 'class3'); // 삭제
console.log(foo.classList); // DOMTokenList(length)
2-3) attribyte 속성
<ul>
<li><a id="foo" href="Foo">Foo</a></li>
<li><img id="bar" src="" alt="Bar"></li>
<li><input id="baz" type="text" value="Baz"></li>
</ul>const foo = document.getElementById("foo");
const bar = document.getElementById("bar");
const baz = document.getElementById("baz");
- attribute 확인
(방법1)
console.log(foo.href); // Foo
console.log(bar.alt); // Bar
console.log(baz.value); // Baz
(방법2)
console.log(foo.getAttribute('href'));
console.log(bar.getAttribute('alr'));
console.log(baz.getAttribute('value'));
- attribut 수정하기
(방법1)
foo.href = 'FOO';
bar.alt = 'BAR';
baz.value = 'BAZ';
(방법2)
수정할 element.setAttribute(attributeName, 수정값)
foo.setAttribute('href', 'FOO');
bar.setAttribute('alt', 'BAR');
baz.setAttribute('value', 'BAZ');
2-4) style 속성
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>const ul = document.querySelector("ul");
const li = document.querySelectorAll('li');
console.log(ul.style) // CSSStyleDeclaration
- ul에 테두리 추가
ul.style.border = '1px solid';
- 첫번째 li에 밑줄 추가
li[0].style.textDecoration = 'underline';
2-5) text content
<ul>
<li id="foo">foo</li>
<li>bar</li>
<li>baz</li>
</ul>const foo = document.getElementById('foo');
console.log(foo.innerHTML); // foo
- text 업데이트
foo. innerHTML = 'FOO';
2-6) element 주입
<ul>
<li>foo</li>
<li>bar</li>
</ul>- ul 엘리먼트 선택
const ul = document.querySelector( 'ul');
- li태그를 가진 엘리먼트 새로 만들기
const li = document.createElement( 'li' );
- innerHTML을 사용하여 만들어놓은 li에 text를 업데이트
li.innerHTML = 'baz';
console.log(li); // baz
- 만든 li를 ul의 child로 추가하기
element1.appendChild(element2) // element2를 element1의 마지막 child로 추가한다
ul.appendChild( li );
3. 이벤트와 이벤트 다루기
- 이벤트: 웹사이트에서 유저의 행위
ex) 클릭, 스크롤, 브라우저 크기조절, 마우스 포인터 이동, 키보드 누르기 등
<button>Button</button>
<script>
const button = document.querySelector('button');
// element.addEventListener (event, callback)
// 이벤트를 포착해서 그에 맞는 작업을 실행한다.
button.addEventListener('click', (e) => {
console.log(e); // PointerEvent
console.log(e.target); // 이벤트가 발생한 엘리먼트
alert('lol');
});
</script>
댓글