| 1. JS객체 | 2. 요소선택 | | 3. 요소선택 || | 4. 요소선택 ||| | 5. window객체 |
| var o = {}; | .querySelector | document.~~ | .childElementCount | alert() |
| var o = new Object(); | .querySelectorAll | consol.log() | .get(.set)Attribute | prompt() |
| .getElement(s)~ | .removeAttribute | confirm | ||
| .replace |
1. JS 객체
1-1 객체 생성
- var 0 = new Object( ); - 정석 방식
- var o2 = { }; - 일반적인 방식
1-2 객체에 값 입력
- 객체 .name = ' swy '
- 객체 [ 'name' ] = 'swy'
1. o.name = ‘swy ’ 방식으로 입력해주기
2. o[ ‘name’ ] = ‘swy’ 방식으로 입력해주기
- name을 그냥 사용 안 하고 ‘ ’ 로 해준 이유는
- – 그냥 name으로 사용하면 변수 name으로 인식한다.
1번 방식을 권장 @but
2번 방식을 사용해야 하는 상황도 있다.
- 1. 객체 속성명(key값)에 변수를 사용하고 싶을 경우
- 2. 띄어쓰기를 포함한 key값을 사용하고 싶을 때 [ ‘ ’ ] 방식 사용한다
2. 요소 선택 |
Js를 사용하는 이유는?
요소를 가져와서 작업하는 것
2-1 querySelector
- 쿼리 셀럭터는 – 첫 번째 요소를 가져오는 것이라 생각하면 된다.
document.querySelector('.box');
- .box 해도 .box다 가져오는 것이 아니라 첫 번째 애만 가져온다.
- 1. 현재 문서에서 클래스명 = "box" 인 애중 첫 번째 요소 가져온다.
- 2. 현재 문서에서 input 태그 가져올 것인데 type=password인 애 하나 가져온다.
2-2 querySelectorAll
- 조건 맞는 거 다 가져와서 list형태 - 배열로 반환해줌
querySelectorAll(‘.box’)
- 1. 현재 문서에서 클래스명 = "box"인애들 모두 가져온다.
- 2. 배열의 형태로 반환해준다.
2-3 getElementBy~
- 현재 문서의 [ Id로 / class로 / tag로 ] 요소 가져오기
- ById() 는 1개의 요소 반환 -getElement
- ByClassName과 ByTagName은 여러 개의 요소 반환 - getElements
# document.getElementById()
# document.getElementsByClassName()
- Elements - 's' 체크 – 배열로 반환
#document.getElementsByTagName()
- div 태그들 가져오기
2-4 쿼리 셀렉터와 겟엘리먼트의 차이는? - 리턴 값 차이
- NodeList로 리턴되는 - querySelctor
- HTMLCollection으로 리턴되는 - getElement
- NodeList :: 조건에 맞는 노드들을 list형태로 반환
- HTMLCollection :: html 타입애들 모아서 반환
- Node란? - 거의 모든 걸 노드라고 한다. ( tag / elem / 우리가 입력하는 text 등 )
3. 요소 선택 ||
요소 선택 | 에서는 < body > 안에 있는 요소들 선택하는 것을 알아보았다.
요소 선택 || 에서는 문서를 대상으로 선택하고 입력하고 알아보기
3-1 document.title ;
- <title>에 입력해놓은 문서의 제목 가져오기
- document.title;
3-2 document.URL;
- 현재 문서의 URL 주소 가져오기
- document.URL;
3-3 document.write();
- 문서에다가 어떤 내용을 작성하는 것도 가능
- 개발자도구-> 콘솔 창이 아닌 – 웹페이지 body 부분에
- write()로 입력한 내용 생성됨을 확인
3-4 - console.log(document);
- 현재 파일 자체를 출력해보기도 가능
- <head> <body> 모든 내용 출력
4. 요소 선택 |||
요소 선택 | 에서는 < body > 안에 있는 요소들 선택하는 것을 알아보았다.
요소 선택 || 에서는 문서를 대상으로 선택하고 입력하고 알아보기
요소선택 ||| 에서는 요소의 속성 값을 선택하고 변경하고 알아보기
4-1 .childElementCount
- 요소의 자식 수 파악
- 그냥 글자는 자식으로 안쳐준다.
4-2 .getAttribute()
- 요소의 속성 값을 가져오는 것 ( id / class / width / 이런 거 )
- 태그( h1 / br / 이런 거는 ) - X
# .getAttribute('id')
# .getAttribute(‘class’)
4-3 .setAttribute(“ ”, “” )
- 요소의 속성 값을 입력 / 변경하는 것 ( id / class/ width / 이런 거 )
- setAttribute(“class”, “blue” )
- 태그는 변경 X
# setAttribute(“class”, “blue” ) 여러 클래스도 지정가능
# 변수로도 사용 가능
4-4 replace( ‘a’, ‘b’);
- getAttribute( ' XXX ' ) 로 가져온 것
- XXX 속성의 값 - a를 b로 변경
4-5 removeAttribute(' ');
- getAttribute( ' XXX ' ) 로 가져온 것
- ' ' 속성의 값을 삭제
4-6 innerText;
- 가져온 요소 안쪽에 모든 텍스트를 출력해준다.
- spanOuter.innerText;
- < div id = " span-outer " > 안쪽에 모든 텍스트 출력해준다.
# spanOuter.innerText = ' 입력할 텍스트 '
- 가져온 요소 안쪽에 텍스트 입력도 가능
- HTML <태그> 적용은 안됨 - 텍스트로 인식
4-7 .innerHTML;
- 가져온 요소 안쪽에 모든 텍스트를 출력해준다.
- HTML <태그>까지 모두 포함해서 출력해준다.
# spanOuter.innerHTML = ' 입력할 텍스트 '
- 가져온 요소 안쪽에 텍스트 입력도 가능
- HTML <태그> 적용까지 된다.
- 원래 있던 span태그 없어지고 덮어 쓰이지 않도록 += 처리 필요
- 문자열로 처리되니까 += 연산자 사용
윈도우 객체 활용해보기
- window 객체는 window.---- 해서 사용하는 것이 정석
- 하지만 [ window . ] 생략해서 사용 가능
- java의 object와 같은 것이 window
[ JS ] [ window 객체 ] alert, prompt, confirm, location
윈도우 객체 활용해보기 window 객체는 window.---- 해서 사용하는 것이 정석 하지만 [ window . ] 생략해서 사용 가능 java의 object와 같은 것이 window window 객체 확인 많다. 몇 가지만 골라서 사용해보..
giggs.tistory.com
review
객체와 요소 선택
window객체를 다뤄보았다.
{ } 객체 생성 완료.ㅎㅎ
편하고 좋은 건가 잘 모르겠고
아직은 생소하다
현재 문서에서 쿼리셀럭터나 겟엘리먼트로
객체=요소=속성 가져와서
값도 확인해보고 변경해보고 삭제해보고 하였다.
함수 사용하는 방법은 java와 다를 게 없어서
함수만 익혀놓으면 될듯하다.
JS 점점 알아 가는 중!
'Java 기반 클라우드 융합 개발자 과정 - KH 정보교육원 > 6월' 카테고리의 다른 글
| 22. 06. 27 - [ JS ] 복습시작 - 변수, JS사용법, 입출력함수, 요소접근 (0) | 2022.07.06 |
|---|---|
| 22. 06. 24 - [ JS ] 실습 문제들 풀이 (0) | 2022.07.06 |
| 22. 06. 22 - [ JS ] 개요, 출력문, 변수, 연산자, 제어문, 배열 (0) | 2022.06.28 |
| 22.06.21 - [ CSS 스타일 ] 반응형, 애니메이션, 부트스트랩, flex (0) | 2022.06.28 |
| 22. 06. 21 - [ CSS 레이아웃 ] 내가 만든 웹페이지 발표 (0) | 2022.06.26 |